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?
Okay, I finally found a workaround.
Setting the redirect_uri
as postmessage
did the trick.
Why? I'm still wondering... But it works!