The guide of using Mixin OAuth in the SPA without exposing client_secret.
In the Mixin official documentation, We can know that the only method provided to use OAuth of Mixin is to visit https://mixin.one/oauth/authorize first. This means the user will have to leave the application first to get authenticated and be redirected to the original page.
I thought it was the only way to do that before I saw 4swap used a different method. When you're logging into 4swap, you won't leave the current page. The whole process would be completed on the same page. Which is awesome. So I want to figure it out.
4swap's website is open sourced. The auth page must be related to the keyword auth / oauth, then I found this page which contains a component called f-auth-method-modal.
This component doesn't exist in 4swap-web. So I looked for other repos and found this uikit. And there're tons of f prefixed components.
The OAuth component for mixin messenger is in here, Inside <script> -> mounted(), there's a function called authorize. I considered it's what makes it all works and opened it.
I won't explain every line of it, basically, it's all about a WebSocket connection and PKCE.
I wrapped those two files into one. So you will only need to import the spa-oauth.js and use it like spa-oauth.vue.
Javascript helper: spa-oauth.js
Vue use case: spa-oauth.vue