search

simov / grant

OAuth Proxy
MIT License
4.08k stars 257 forks source link

How to redirect from vue3 to grant/express through axios? #268

Closed joobei closed 2 years ago

joobei commented 2 years ago

I am using vue3 as my front-end. If, therefore, my oauth2 callback goes directly to express.js/grant, my front-end doesn't know about it and cannot act upon the authentication result. Therefore my oauth2 callback with the ?access_token=... has to land on the vue3 front end and then be somehow routed/redirected to Express.js through some axios call. Express.js/grant will then complete the authentication by exchanging the code for a token and user/profile and return it to the front end through the axios response. When I do that, I get: GET | http://localhost:5000/?error=Grant: missing session or misconfigured provider I am guessing that some "session" information that was created when I made the original request to the grant/express backend is now missing from the axios/vue3 call. Any ideas on how to resolve this?

simov commented 2 years ago

Hi, take a look at this article https://dev.to/simov/oauth-like-a-boss-2m3b and specifically the:

  1. Login from a browser app hosted on GitHub Pages.

Let me know if that works for you.

joobei commented 2 years ago

@simov thank you for offering help. Unfortunately was not so successful in applying the lessons from that post. It is not clear what this "sub configuration" is and what key/secret should be used for it.

simov commented 2 years ago

Ok, here are some general concepts about it then:

Axios or any other HTTP client cannot be used for this. The user have to click on a regular link pointing to your Grant OAuth proxy, usually available on the /connect/[provider] route. This will allow the browser to navigate away from your single page Vua app and into the third-party authorization server page, where the user can login with that provider.

After that you have a few transport options to pick from, but maybe the easier for you would be to set your callback route to point back to your single page Vue app. With that when the OAuth flow is complete the user will be redirected all the way back to your single page Vue app and the resulting access_token will be embedded into the URL in the address bar as querystring.

After the page loads you can use JavaScript in your single page Vua app to read the access_token from the querystring.

There are other ways to achieve this as well, but you can try this one first as probably the easiest one to setup.

joobei commented 2 years ago

I understand your suggestion and I have gotten this to work. That method works only with querystring transport if I'm not mistaken. What concerns me with this approach is that some malicious plugin/malware on the client side(vue3/browser) could intercept that access_token and start making calls to discord's API on the user's behalf.

simov commented 2 years ago

That's true. For that reason there are other transport types available such as session and state. If you take a look at the state transport example you will see that you can have a handler right after the Grant middleware where you can read the returned credentials, the access_token, probably store it in a database, and respond with something else, or redirect to another location in your frontend app.