What's the Nodejs backend routine for "Register / Signin with Google"? - node.js

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

What you need to save is user's unique id, his email or phone, and some other user data for your project.
This is just to know if the user already registered or to know the current user in backend.
From backend, you can just set a middleware to verify the token assigned from google.
Then you will get the user's id and you can find a user from your database, if exists, the user is authenticated.
Signin with google.
Get redirected with CODE
Send CODE to backend
Backend will get user id and email with the CODE using google api.
Save user and generate token.
Send the token back to your frontend.
Then the login or signup process is finished.

Answer 2

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:
Understand well how Oauth2 works https://www.rfc-editor.org/rfc/rfc6749
Redirect to your server from client (react)
Request authorization by redirecting to Google
Get authorization code which will be added to a url in a redirect from google back to your server
Exchange code for an access token (POST)
Use access token to get user profile details from Google (POST)
Save user details if they do not exist yet in your database - in theory you could skip this part
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.