How can I maintain accessToken from Google OAuth? - reactjs

Question

I am trying to implement Google OAuth with MERN Stack.
There was a nice blog about this like as below.
https://medium.com/#alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa
I used react-google-login for the front-end and passport, passport-google-token, and jsonwebtoken for the back-end.
It was all good until express js got the accessToken and created a User document, but I actually don't know what is the next step to keep login and authenticate it. This question is mentioned in the above article, but he hasn't implemented it.
Is there any information to solve this?
"Step 7: Return a JWT token to the frontend. What you do with that token is out of scope for this tutorial, but it should probably be used to authenticate each of the logged-in user’s actions."
My react side code is as below
import React from 'react';
import GoogleLogin from 'react-google-login';
import api from '../config/api';
import { useGlobalState } from '../config/globalState';
import { AUTH_SIGN_IN, SET_USER } from '../config/types';
const Navbar = () => {
const { state, dispatch } = useGlobalState();
const { isLoggedIn } = state;
const responseGoogle = async (data) => {
try {
const { accessToken } = data;
const res = await api.post('/api/auth/signin', {
access_token: accessToken
});
console.log('res.data:', res.data);
dispatch({ type: AUTH_SIGN_IN });
} catch (err) {
console.log('err: ', err.message);
}
};
return (
<div>
This is the title
{
!isLoggedIn &&
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText="Login with Google"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
}
</div>
)
}
export default Navbar
This is passport.js
const passport = require('passport');
const GooglePlusTokenStrategy = require('passport-google-token').Strategy;
const User = require('../models/user');
module.exports = passport => {
passport.use('googleToken', new GooglePlusTokenStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}, async (accessToken, refreshToken, profile, done) => {
console.log('accessToken:', accessToken);
console.log('refreshToken:', refreshToken);
console.log('profile:', profile);
try {
const foundUser = await User.findOne({ googleId: profile.id})
if (foundUser) {
console.log('User already exists');
return done(null, foundUser);
} else {
const newUser = await User.create({
googleId: profile.id,
displayName: profile.displayName,
email: profile.emails[0].value,
photo: profile.photos[0].value
});
await newUser.save();
return done(null, newUser);
}
} catch(error) {
done(error, false, error.message);
}
}));
}
This is the /api/auth/signin route handling part.
const JWT = require('jsonwebtoken');
const User = require('../models/user');
const signToken = user => {
return JWT.sign({
iss: 'AnySecret',
sub: user.id,
iat: new Date().getTime(),
exp: new Date().setDate(new Date().getDate() + 1)
}, process.env.JWT_SECRET);
}
module.exports = {
signIn: async (req, res) => {
console.log('signIn called');
const token = signToken(req.user);
res.cookie('access_token', token, {
httpOnly: true
});
res.status(200).send({
user: req.user,
token
});
}
}