node express react oauth pass access token after athorization in callback with react client app

Question

I have a node server that authenticates with a third party (like stack overflow does) using oauth. When the third party hits my callback and I authorize the request and get the access token and other info, I want to then pass this info to a react app I made, so then the react app can make REST calls to using the access token straight from the provider.

I am new to react and node, but am able to make a node server that can get the access and refresh token info. I am new to 'serving' and serving a react app. I have been serving using

app.use('/client', express.static(__dirname + '/client'));

to serve react apps, and this works great to a limited extent. The situation I am currently in exceeds the extent and I want to learn how to send the oauth info along with my react app back after authorizing in the callback. The flow I am using authorizes the request in the callback and then does a redirect back to the /client route to render the app, which fails to pass any oauth info to the client. Is there any way to set the header before that redirect to have the oauth info, and then some how get that oauth info in the react app?

I am posting here to get some advice on some avenues and resources I should read up on, and maybe some suggestions for my current situation. I am eager to learn more on express and am currently looking to set the header with the info I need and then serving the react app as a file or something, I am not sure yet.

Thanks to all in advanced!

Answer 1

I'll give my best to answer your question. So the problem with SPA(Single Page Application) and OAuth login is that the only way to transfer data with redirects is URL query string. The JWT(JSON Web Token) would allow this, but it's only supported in mobile native SDK-s. Solution for the web, without using the popover flows here:

For Node.js I suggest to use Passport.js OAuth modules, the login flow:

1. Example /auth/google -> redirect to Google login page.
2. On success, you get redirected back to callback url /auth/google/callback
3. You also get back the access_token, refresh_token, basic profile information etc.
4. No sessions are used so we use the JWT and generate the token on server side.
5. Redirect back to application with the token: app.example.com?token=JASJKDk..
6. On client side extract the token from query string.

This is just one possible flow that you might use, instead of JWT you could also use session/cookie solution.