Question 302058 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React google login using react-oauth

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

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

    enter image description here


  2. 0

    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);
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search