I've implemented login with google functionality for my login page and I've used @react-oauth/google
package. And in my app to dispatch the login action I need 4 things - name, email, token & googleId.
Previously I had used react-google-login
package and there I was getting all these items. But from current package docs I found...
import { GoogleLogin } from '@react-oauth/google';
<GoogleLogin
onSuccess={credentialResponse => {
console.log(credentialResponse);
}}
onError={() => {
console.log('Login Failed');
}}
/>;
From the response I'm getting name and email but there's no googleID or token which is required. Below is my dispatch function
const googleSuccess = (resp) => {
let decoded = jwt_decode(resp?.credential);
const email = decoded?.email;
const name = decoded?.name;
const token = resp?.tokenId;
const googleId = resp?.googleId;
const result = { email, name, token, googleId };
dispatch(googleLogin({ result, navigate, toast }));
console.log(result);
};
I had to use jwt-decode
as the response I was getting was a JWT token.
And this is the Button component
<GoogleLogin
onSuccess={(resp)=>googleSuccess(resp)}
onError={() => {
console.log("Login Failed");
}}
/>
I checked other ways like
import { useGoogleLogin } from '@react-oauth/google';
const login = useGoogleLogin({
onSuccess: tokenResponse => console.log(tokenResponse),
});
<MyCustomButton onClick={() => login()}>
Sign in with Google 🚀{' '}
</MyCustomButton>;
but here I'm not getting name, email and googleID.
So Any suggestions?
flow: "auth-code",
in onsuccess handler...but didn't get the expected output