What is the best practice to use Oauth2, React, Node.js and Passport.js to authenticate user with Google sign on button?

Question

I want to have a login button in my website so when a user clicks on it, the user can use their Google credentials. I\'d like to ideally perform the authentication server si

Answer 1

Your authentication should be done server side. Here is how it works.

1. You make a fetch or axios call to your authentication route.
2. Your authentication route sends a request to Google's Authentication servers. This is important to have on the backend because you will need to provide your clientSecret. If you were to store this on the frontend, it would make it really easy for someone to find that value and compromise your website.
3. Google authenticates the user and then sends you a set of tokens to your callback url to use for that user (refresh, auth, etc...). Then you would use the auth token for any additional authorization until it expires.
4. Once that expires, you would use the refresh token to get a new authorization token for that client. That is a whole other process though.

Here is an example of what that looks like with Passport.js: https://github.com/jaredhanson/passport-google-oauth2

EDIT #1:

Here is an example with comments of the process in use with Facebook, which is the same OAuth codebase: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js