React-google-login: Response type "code" keeps sending the wrong redirect uri

[tameem92]

Hi, I am using the library for a simple use-case as shown below. But the redirect URI always gets tagged with a weird storagerelay:// even though I specify the URI as "https://localhost:3000` it turns into the following. This in turn causes a redirect_uri mismatch when a code is returned.

https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?redirect_uri=storagerelay%3A%2F%2Fhttp%2Flocalhost%3A3000%3Fid%3Dauth81586&response_type=code%20permission%20id_token&scope=openid%20profile%20email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar&openid.realm&client_id=******&ss_domain=http%3A%2F%2Flocalhost%3A3000&access_type=offline&include_granted_scopes=true&prompt=consent&origin=http%3A%2F%2Flocalhost%3A3000&gsiwebsdk=2&flowName=GeneralOAuthFlow

Here is the full usage of the library:

            <GoogleLogin
              className={classes.googleButton}
              clientId="***"
              buttonText="Connect"
              scope="https://www.googleapis.com/auth/calendar"
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              responseType="code"
              prompt="consent"
              accessType="offline"
              redirect_uri="http://localhost:3000"
              render={(renderProps) => (
                <Button
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.googleButton}
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  Connect
                </Button>
              )}
            />

Does anyone have any idea why it keeps changing the redirect URI? It seems like it's happening in this library or the gapi library from google. Any help would be appreciated - thank you.

[mym0404]

How did you solve it?

[filipkowal]

Providing the redirectUri prop with postmessage and changing the same property on the server solved the problem. Found the solution here thanks to jedashford

Example props:

<StyledGoogleButton
    clientId={CLIENT_ID}
    onSuccess={onGoogleSSOResponse}
    onFailure={onGoogleSSOResponse}
    cookiePolicy={'single_host_origin'}
    buttonText="Log in with Google"
    responseType="code"
    prompt="consent"
    accessType="offline"
    redirectUri="postmessage"
  />

[mym0404]

@filipkowal 's answer is correct. Thank you 👍