How to integrate oauth for react front end and node back end?

Viewed 3231

I am using React as Front end. and i used react-google-login and react-facebook-login for login with Google and Facebook.

It gives me accesstoken in front end.

I passed this accesstoken to backend (I am using Node with hapi).

But in backend, how can I get the userDetails from Google or Facebook using the accesstoken and pass refresh token to get new accesstoken?

Update:

OK There is Three steps in google oauth2 process .

  1. take authorization code
  2. Exchange authorization code to get access token
  3. pass access token to get user info

when i decouple front end and back end . In these three steps what are all i should do in front end and in back-end. in security aspects ?

1 Answers

when i decouple front end and back end . In these three steps what are all i should do in front end and in back-end. in security aspects ?

In the front-end:
you should get the authorization code and pass the authorization code to the back-end.

In the back-end:
Exchange authorization code + secret to access token/refresh token (the secret is never exposed to the client).
Use the access token to consume endpoints like get user info and pass the information back to the front-end.

This is authorization code flow which is recommended.

If you don't have a server you can do Implicit flow which means you don't have a secret so no refresh token. and you get the access token directly in the client - this is less secure.

Related