React google login stay signed in even after closing all tabs - reactjs

Question

I'm using https://github.com/anthonyjgrove/react-google-login for auth in my React app. Everything's working except when I close all my tabs and return to my site (within seconds, not even that long), I have to sign in again... How can I persist the login for some amount of time?
Here's my current setup:
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID}
buttonText='Continue with Google'
onSuccess={handleGoogleOAuthResponse}
onFailure={handleError}
isSignedIn={true}
prompt='consent'
accessType='offline'
redirectUri={process.env.REACT_APP_FRONT_END_BASE_URL}
/>
const handleGoogleOAuthResponse = ({ accessToken, profileObj }) => {
postRequest('rest-auth/google/', null, { 'access_token': accessToken }) // backend in Django
.then(({ access_token, refresh_token, user }) => {
setAccessToken(access_token); // these are just local states
setRefreshToken(refresh_token);
setProfile(profileObj);
setError(null);
})
.catch(error => {
setError(error);
});
};
const handleError = (error, details) => {
setError(`${error}: ${details}`);
}

Answer 1

The issue is using just the ephemeral state, which gets lost on page reload (and even every time component unmounts) as it is in-memory only. One quick solution would be to also store your token in a localStorage:
.then(({ access_token, refresh_token, user }) => {
setAccessToken(access_token); // these are just local states
setRefreshToken(refresh_token);
setProfile(profileObj);
setError(null);
// in addition to existing code above, add this part to persist the tokens
localStorage.setItem('accessTokenKey', access_token);
localStorage.setItem('refreshTokenKey', refresh_token);
})
With tokens stored, we need to load them as well upon next start of the app, which can be done like this:
useEffect(() => {
const access_token = localStorage.getItem('accessTokenKey');
const refresh_token = localStorage.setItem('refreshTokenKey');
setAccessToken(access_token);
setRefreshToken(refresh_token);
}, []);
or used as initial state in the useState hooks:
const [refreshToken, setRefreshToken] = useState(localStorage.getItem('refreshTokenKey'));
const [accessToken, setAccessToken] = useState(localStorage.getItem('accessTokenKey'));