oAuth on the front end or server side?

Question

I have a MERN app (react on the front end and node, express, and Mongo on the back end)

I'm looking to implement oAuth login for the users to login.

So far I am using the Google api to do the auto on the front end and then sending the token to the server where I get the Google user and check the database if the user ID exists or create a new user and return a jwt for future authentication.

Now I'm looking into using passportjs as my oauth Middleware (mainly because I need to have more Auth providers like Facebook etc.) but is it a good idea to only do the Auth one the server?

I am also looking into using auth0 which has both front end and server side options but also unsure which strategy is better.

Any help is greatly appreciated.

Answer 1

I've spent some nights with this recently. This one helped me a lot .

Generally:

• Client loads and starts google gapi script.
• User consent is requested
• Google sends token
• This token you send from server to Google and confirm user

const loginGoogle = async () => {
  const loadGapi = () =>
    new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://apis.google.com/js/api.js';  //loading gapi Script
      console.log('SCRIPT: ', script);
      script.onload = () => {
        console.log('GAPIS SCRIPT LOADED');
        gapi.load('auth2', () => {
          const auth2 = gapi.auth2.init(options);
          console.log('AUTH2: ', auth2);
          resolve(auth2);
        });
      };
      document.body.appendChild(script);
    });
  const ath2 = await loadGapi();
  const code = await ath2.grantOfflineAccess();
  return PostApi('auth/getgoogletoken', code); // sending to server for further processing
};

Let me know, if I can provide you with further info, I have implemented it with nginx/node/passport and react in frontend.