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

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]

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.

[simov]

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.