React google login using react-oauth

Question

I have a react app ( typescript ) and want to integrate google authentication.

The authentication test works, but needs to extend the functionality

It just logs info to console

const responseMessage = (response: any) => {
    console.log(response);
};
const errorMessage = (error) => { //this is commented in typescript
    console.log(error);
};

Because the example is javascript, it does not fit in typescript model

https://blog.logrocket.com/guide-adding-google-login-react-app/

I had to sacrifice onError={errorMessage} from the below, as the function expects type to be specified for "error" and not accepting ? ( not specifying type or specifying :any both are error )

< GoogleLogin onSuccess={responseMessage} />

Question:

How can I write real onSuccess to navigate to a proper page (or same page with signin changing to logout ) and also fix my onError

Edit: Initially I have login button, and after login I am still having that button. I am new to react and typescript, so struggling to beautify my page to give the feel to the user that the login task is complete, and remove/hide that button (Sign in as... after success login). I thought it will be out of the box, but looks like I have use localStorage and toggle

Answer 1

The type declaration of GoogleLogin are as following:

onSuccess: (credentialResponse: CredentialResponse) => void;
onError?: () => void;

This means that onError method does not take any parameter. Try writing errorMessage as follows:

const errorMessage = () => {
    // Your steps
};

You can write responseMessage as follows:

import { CredentialResponse } from '@react-oauth/google';

const responseMessage = (response: CredentialResponse) => {
    console.log(response);
};

Answer 2

This is how I updated my code

import { jwtDecode } from "jwt-decode";

import { dataCredential } from "../../common/dataCredentials";

  const responseMessage = (response: any) => {
    const userObject: dataCredential = jwtDecode(response.credential);
    
    localStorage.setItem("user", JSON.stringify(userObject));

    setProfile(userObject);
//I initially wanted to navigate, but decided to stay on the same page
    // client.createIfNotExists(doc).then(() => {
    //   navigate("/", { replace: true });
    // });
  };

  const errorMessage = () => {
    console.log("Login error");
  };

  const logOut = () => {        
    setProfile(undefined); //I am not expert, so setting undefined
    localStorage.removeItem("user");
    googleLogout();
  };

Usage

  {localStorage.getItem("user") ? (
    <Span>
      <Button onClick={logOut}>
        {t("Logout")}
      </Button>
    </Span>
  ) : (
    <GoogleLogin onSuccess={responseMessage} onError={errorMessage} />
  )}

Only sad part is google login button alignment, which is a different problem