React google login return error "idpiframe_initialization_failed"

Question

I have tried implementing google login using react-google-login package. I have put the client Id also put the URL correct http://localhost:3000 and https://localhost:3000. But I have been getting the issue with error message "idpiframe_initialization_failed" and detail like this: You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. I am really confused. Please take your time to help me on this one. Thank you.

            <header className="App-header">
                <h1>React Google Login App</h1>
                <div>
                    {loginData ? (
                        <div>
                            <h3>You logged in as {loginData.email}</h3>
                            <button onClick={handleLogout}>Logout</button>
                        </div>
                    ) : (
                        <GoogleLogin
                            clientId={"846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com"}
                            buttonText="Log in with Google"
                            onSuccess={handleLogin}
                            onFailure={handleFailure}
                            cookiePolicy={'single_host_origin'}
                        ></GoogleLogin>
                    )}
                    <GoogleLogout clientId='846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com' buttonText='logout' onLogoutSuccess={handleoutSuccess}></GoogleLogout>

                </div>
            </header>
        </div>```

Answer 1

Google sign-in is migration to new google service identity SDK, you can implement it on your on https://developers.google.com/identity/gsi/web

or you can use @react-oauth/google it's using the new SDK

Answer 2

React google login is using the old version of google which will be deprecated in March 31, 2023. Detail here. Check the implementation here

You can move to use the new library which support the newer version as comment above like https://www.npmjs.com/package/@react-oauth/google.

You can also implement by yourself: First you need to load script from google. Detail link:

https://developers.google.com/identity/gsi/web/guides/client-library

Then you need to do some setup and render the google button:

export function GoogleLoginButton({
  onSuccess,
  onError,
  type = 'standard',
  theme = 'outline',
  size = 'large',
  text,
  shape,
  logoAlignment,
  width,
  locale,
  ...props
}: GoogleLoginProps): React.ReactElement {
    const [isOAuthClientLoaded, setIsOAuthClientLoaded] = React.useState(false);

  const btnContainerRef = useRef<HTMLDivElement>(null);

  const onSuccessRef = useRef(onSuccess);
  onSuccessRef.current = onSuccess;

  const onErrorRef = useRef(onError);
  onErrorRef.current = onError;

  useEffect(() => {
    const scriptTag = document.createElement('script');

    scriptTag.src = 'https://accounts.google.com/gsi/client';
    scriptTag.async = true;
    scriptTag.defer = true;

    scriptTag.onload = () => {
      setIsOAuthClientLoaded(true);
    };

    scriptTag.onerror = () => {
      setIsOAuthClientLoaded(false);
    };

    document.body.appendChild(scriptTag);

    return () => {
      document.body.removeChild(scriptTag);
    };
  }, []);

  useEffect(() => {
    if (!isOAuthClientLoaded) {
      return;
    }

    window.google?.accounts.id.initialize({
      client_id: clientId,
      callback: (credentialResponse: OAuthCredentialResponse): void => {
        if (!credentialResponse.clientId || !credentialResponse.credential) {
          onErrorRef.current?.(
            new Error('Client id is invalid when initializing')
          );

          return;
        }

        onSuccessRef.current(credentialResponse);
      },
      ...props
    });

    window.google?.accounts.id.renderButton(btnContainerRef.current!, {
      type,
      theme,
      size,
      text,
      shape,
      logo_alignment: logoAlignment,
      width,
      locale
    });
  }, [
    onSuccess,
    onError,
    clientId,
    type,
    theme,
    size,
    text,
    shape,
    logoAlignment,
    width,
    locale,
    props,
    isOAuthClientLoaded
  ]);

  return <div ref={btnContainerRef} />;
}

Answer 3

I tried many solutions but they did not work for me. So I have an easy solution that helps me fix it.

1. Install gapi-script (https://www.npmjs.com/package/gapi-script).

   npm install --save gapi-script

2. Use it in component.

     import { loadGapiInsideDOM } from "gapi-script";
     ...
     useEffect(() => {
       (async () => {
         await loadGapiInsideDOM();
       })();
     });
   

Answer 4

We are discontinuing the Google Sign-In JavaScript Platform Library for web. The library will be unavailable for download after the March 31, 2023 deprecation date. Instead, use the new Google Identity Services for Web. By default, newly created Client IDs are now blocked from using the older Platform Library, existing Client IDs are unaffected. New Client IDs created before July 29th, 2022 can set plugin_name to enable use of the Google Platform Library.

Google Sign-In JavaScript client reference