DEV Community

Kamal Hossain
Kamal Hossain

Posted on • Updated on

Refresh token problem in react-google-login (Solved 🧯)

I was trying to retrieve a refresh_token in react-google-login. So, the process is very straight forward but the are some little things, for this many peoples failed to do this.

In this issue most of them is explained.

Inside the GoogleLogin component, we need to pass
accessType and responseType

<GoogleLogin
   clientId={process.env.REACT_APP_CLIENT_ID_2}
   accessType="offline"
   responseType="code"
...
/>
Enter fullscreen mode Exit fullscreen mode

With what we will the a response like that:

{
    "code": "4/0AX4XfWhkrHVIhev2zNJRcL_uV9YfrqYCvmNkhTk3i3AeT8SzcZcwBntC9FUcx7RbPZEwEJ"
}
Enter fullscreen mode Exit fullscreen mode

With this above code we can retrieve the refresh_token.

But 🚩

If the user is already authenticated this app from google console before then with this code it is not possible to retrieve the refresh_token. This is the reason for many developers they failed to retrieve refresh_token from a valid code.
Image description

To check wheather your app is already authenticated or not with the gmail your are testing with, then go to this link and if you found the app the just revoke the permissions for the app.
Learn more

Now send the code to your backend to retrive the refresh_token. Sample

Don't try to generate it on client side, because for that you have to make your client secrect public.

Note 🚩

If you somehow failed to retrive the refresh_token with the code then generate new code and send it to backend for another try. If one request is failed with the code somehow, then this code will not work again.

Finally from now with the refesh_token you can generate as much as access_token you want. Because access_token only available for one hour.

Discussion (0)