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

Redux can really help with achieving this and this follows the same logic as Nick B already explained...

1. You set up oauth on the server side and provide an endpoint that makes that call
2. You set up the button on you react frontend and wire that through an action to the endpoint you already setup
3. The endpoint supplies a token back which you can dispatch via a reducer to the central redux store.
4. That token can now be used to set a user to authenticated

There you have it.

Answer 2

I faced the same issue. This article is Gold link

1.In auth route File I had following code

 const CLIENT_HOME_PAGE_URL = "http://localhost:3000";

  // GET  /auth/google
  // called to authenticate using Google-oauth2.0
  router.get('/google', passport.authenticate('google',{scope : ['email','profile']}));


  // GET  /auth/google/callback
  // Callback route (same as from google console)
   router.get(
    '/google/callback',  
    passport.authenticate("google", {
    successRedirect: CLIENT_HOME_PAGE_URL,
    failureRedirect: "/auth/login/failed"
   })); 

   // GET  /auth/google/callback
  // Rest Point for React to call for user object From google APi
   router.get('/login/success', (req,res)=>{
     if (req.user) {
         res.json({
          message : "User Authenticated",
         user : req.user
        })
     }
     else res.status(400).json({
       message : "User Not Authenticated",
      user : null
    })
  });

2.On React Side After when user click on button which call the above /auth/google api

  loginWithGoogle = (ev) => {
    ev.preventDefault();
    window.open("http://localhost:5000/auth/google", "_self");
  }

3.This will redirect to Google authentication screen and redirect to /auth/google/callback which again redirect to react app home page CLIENT_HOME_PAGE_URL

4.On home page call rest end point for user object

(async () => {
  const request = await fetch("http://localhost:5000/auth/login/success", {
   method: "GET",
   credentials: "include",
   headers: {
    Accept: "application/json",
     "Content-Type": "application/json",
    "Access-Control-Allow-Credentials": true,
  },
});

const res = await request.json();
   //In my case I stored user object in redux store
   if(request.status == 200){
     //Set User in Store
    store.dispatch({
      type: LOGIN_USER,
      payload : {
        user : res.user
     }
    });
  }

})();

5.last thing add cors package and following code in server.js/index.js in node module

// Cors
app.use(
  cors({
    origin: "http://localhost:3000", // allow to server to accept request from different origin
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true // allow session cookie from browser to pass through
   })
);

Answer 3

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