Google Login React with TypeScript
I'm new with typescript and I'm trying to implement a google login system in react with typescript. I'm having a hard time trying to understand how to set it correctly.
Here is my code:
import { GoogleLogin, GoogleLoginResponse, GoogleLoginResponseOffline } from 'react-google-login';
interface googleAuthInt {
profileObj: Object;
tokenId: string;
googleLoginResponse: GoogleLoginResponse | GoogleLoginResponseOffline;
}
const googleSuccess = async (response: googleAuthInt): Promise<void> => {
const result = response?.profileObj;
const token = response?.tokenId;
try {
dispatch(Actions.googleAuthAction({ result, token }));
myHistory.push('/');
} catch (err) {
console.log(err);
}
};
<GoogleLogin
clientId={globalConfig.GOOGLE_ID}
render={(renderProps) => (
<Button className='google-button' onClick={renderProps.onClick}
disabled={renderProps.disabled} startIcon={<AiFillGoogleCircle />}
variant='contained'>
Continuer avec google
</Button>
)}
onSuccess={googleSuccess}
onFailure={googleFailure}
cookiePolicy='single_host_origin'
/>
The error I have right now is that the argument in the googleSuccess function needs to be response: googleAuthIn['googleLoginResponse']
in order to don't have an error on onSuccess props in the googleLogin component. But then I Have an error trying to access the profileObj and tokenId property in my googleSuccess function.
I don't find the solution to fix this, any help will be appreciated.
Try this
const googleSuccess = async (res: GoogleLoginResponse | GoogleLoginResponseOffline) => {
let result, token;
if ("profileObj" in res) { result = res.profileObj; }
if ("tokenId" in res) { token = res.tokenId; }
}