How to get a REFRESH_TOKEN with react-google-login

Question

I am using react-google-login plugin for React which provides me a Google oAUth Sign-in / Log-in component for React. This is my component:

const LogIn = ({ artist_id }) => { 
  const responseGoogle = (response) => {
    let {accessToken} = response;
    console.log(response);
  };
  return (
    <GoogleLogin
      clientId="***MY CLIENT ID ***"
      buttonText="Connect with Google"
      accessType="offline"
      prompt='consent'
      scope="https://www.googleapis.com/auth/yt-analytics.readonly"
      onSuccess={responseGoogle}
      onFailure={responseGoogle}   
    />
  );
};

By inserting accessType='offline' and prompt='consent' I expect GoogleLogin to return,together with the other values, a REFRESH_TOKEN but it does not.

I also tried to insert responseType='code' to GoogleLogin props, in this case I expect to get an AUTHORIZATION CODE that should be used to get an ACCESS_TOKEN and a REFRESH_TOKEN by making a POST call:

(taken from documentation provided by Google: https://developers.google.com/identity/protocols/oauth2/web-server#exchange-authorization-code)

POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
client_id=your_client_id&
client_secret=your_client_secret&
redirect_uri=https%3A//oauth2.example.com/code&
grant_type=authorization_code

So, after getting an AUTHORIZATION_CODE, I tried to make this post call but I always get the following error:

{
    "error": "invalid_grant",
    "error_description": "Bad Request"
}

The question is:

1. Should I get REFRESH_TOKEN from GoogleLogin component ? Maybe I missed to enter some props...
2. Should I get an AUTHORIZATION_CODE and then try to exchange it with REFRESH_TOKEN by issuing a POST call to https://www.googleapis.com/oauth2/v4/token ?

Answer 1

I was searching for a way of getting refresh token from google everytime a user tries to login with google OAuth in my website. I am using GoogleLogin button from react-google-login. I came across this question here and realized we need to add prompt='consent' for getting refrest token. Because as per oAuth docs we can get refresh token only when a users see the consent screen while logging in through google and prompt='consent' redirects the user to consent screen which gives us the refresh token again. so by just adding prompt='consent' to google we can get refresh token. I would recommend try your best to save the refresh token in the beginning but if your requirements forces you to get refresh token again and again go ahead.

As per your questions -

1. No, you shouldn't get refresh token from GoogleLogin Component ,make sure you follow the steps of getting a Autherization Code and then use it on the server side to get access token and refresh token, this is the secure way of doing it.
2. Yes Get an Authentication code and then try to exchange it with refresh token and access token on server side.

I would need more information to understand what's going wrong with your code. All of your props are right and prompt='consent' should have given you refresh token.

Could you please describe the steps of you UI flow that you went through when you ran above code. like what exactly happens when you click on the button and at which step does that error occur.

Answer 2

you can use @react-oauth/google it uses the new google service identity SDK, with useGoogleLogin() with authorization code flow will get you a code which you will exchange with your backend and will return you access token & refresh token.

It's the new way of google service identity SDK https://developers.google.com/identity/oauth2/web/guides/use-code-model