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; }
}