What's the Nodejs backend routine for "Register / Signin with Google"?

Question

I'm using a Express Nodejs backend + React frontend set up and tried to implement a "Register / Signin with Google" function, but I do not understand what to store in the database after the user is authenticated. In the ordinary register with email approach, I send the email + password to the backend when I register and check if both the email & password match when the user login.

However, I don't know what to store in the db if one is registered with Google. I have already implement part of the google auth with google by following this tutorial in the frontend side, here's my code:

import * as queryString from 'query-string';

const stringifiedParams = queryString.stringify({
  client_id: 'MY_CLIENT_ID'
  redirect_uri: 'http://localhost:8000/protected_home',
  scope: [
    'https://www.googleapis.com/auth/userinfo.email',
    'https://www.googleapis.com/auth/userinfo.profile'
  ].join(' '), // space seperated string
  response_type: 'code',
  access_type: 'offline',
  prompt: 'consent'
});

const googleLoginUrl = `https://accounts.google.com/o/oauth2/v2/auth?${stringifiedParams}`;

return (
  <a href={googleLoginUrl}>Login with Google</a>
)

But then what's next? I've successfully pass through the auth process and redirected back to the protected_home page. But this only means that this user is a google user, what kind of information should I store their information in backend so that it indicated that the user has registered an account in my backend with this google account?

Also, is is possible to move the logic above to backend? Since google will redirect back to my redirect_urilike this http://localhost:8000/protected_home?code=CODE_IS_HERE, I need to browser to extract the information in CODE_IS_HERE. So it seems impossible to move the login logic to backend, any solution?

Answer 1

Basically you should not write it from scratch as there are libraries that deal with Oauth2: PassportJS, openid-client, Grant, OAuth2-client-js. Those should handle all the below steps except storing actual details in your own database.

In general there are some basic steps when implementing third party oauth2 authentication:

1. Understand well how Oauth2 works https://www.rfc-editor.org/rfc/rfc6749
2. Redirect to your server from client (react)
3. Request authorization by redirecting to Google
4. Get authorization code which will be added to a url in a redirect from google back to your server
5. Exchange code for an access token (POST)
6. Use access token to get user profile details from Google (POST)
7. Save user details if they do not exist yet in your database - in theory you could skip this part
8. Create session/token and send it back to client (React) - it is another redirect.

You could also not store any user details on your server and just pass back the token obtained from Google to your React app (client), but then you'd need to check if it is valid on every request to your server. Which is why it is simpler to create your own session token and send it to the client.

There are more details as this is quite a topic to start with but RFC6749 should fill in the gaps.