Google OAuth2 + react-google-login: "redirect_uri_mismatch" when trying to retrieve a refresh token

Question

how are you doing?

I'm using react-google-login to make the login flow in the frontend.

This is my login button setup:

<GoogleLogin
    accessType="offline"
    clientId={google.client_id}
    cookiePolicy="single_host_origin"
    onSuccess={handleLogin}
    onFailure={handleLoginFail}
    prompt="consent"
    responseType="code"
    scope="email profile https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/calendar.events.readonly openid"
    render={(_props) => (
        <Button className="google-login-btn" onClick={_props.onClick}>
            {props.buttonText} <GoogleIcon className="google-icon" height="20px" width="20px" />
        </Button>
    )}>
</GoogleLogin>

This is working fine and I'm successfully receiving an authorization_code from Google. The problem is when I try to grab a refresh token for the user.

This is the code I'm using to retrieve the refresh token:

const { client_id, client_secret, redirect_uri } = require('../config').google;

export async function GetRefreshToken(code) {
    try {
        const data = new URLSearchParams({
            code,
            client_id,
            client_secret,
            grant_type: 'authorization_code',
            redirect_uri
        });

        const headers = {
            'Content-Type': 'application/x-www-form-urlencoded'
        };

        const response = await axios.post('https://oauth2.googleapis.com/token', data, { headers });
        const parsedResponse = JSON.parse(response.data);

        if (parsedResponse.refresh_token) return parsedResponse;
        else return null;
    } catch (err) {
        console.error(err);
        throw err;
    }
}

And this is the error I'm receiving:

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

My redirect_uri is set as http://localhost:3000/ , and I have confirmed that it is configured correctly in my Google project.

What am I missing here?

Answer 1

Okay, I finally found a workaround.

Setting the redirect_uri as postmessage did the trick.

Why? I'm still wondering... But it works!

Answer 2

after compiling my app as a standalone apk and regenerating new keytool password i started recieving error 400 uri_mismatch i even went to add accounts.google.com in my authorized uri in the developer google console