CODEWITHSUNDEEP
reactjsauthenticationgoogle-authenticationgoogle-api-js-clientgoogleauthr
Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

I got this issue when, I am trying to run this code (gapi.auth2.getAuthInstance().signIn();) "idpiframe_initialization_failed"

error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'} details: "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. See the Migration Guide for more information." error: "idpiframe_initialization_failed" enter image description here

Upvotes: 12

Views: 33920

Answers (5)

Shivam Mishra
Shivam Mishra

Reputation: 1

There are three step to resolved this issue

1. Give google Login Options

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'sample_login' 
};

2. Import SocialLoginModule into imports array

imports:[SocialLoginModule]

3. step register into provider like that

providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              CLIENT_ID,
              googleLoginOptions
            )
          }
        
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }

Upvotes: 0

Suraj
Suraj

Reputation: 894

This is how I solved it in my React Application.

  1. npm i gapi-script
  2. in your auth or login file import it. import { gapi } from "gapi-script";
  3. use this useEffect code in your file.
 useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: process.env.REACT_PUBLIC_GOOGLE_CLIENT_ID,
        scope: 'email',
      });
    }

    gapi.load('client:auth2', start);
  }, []);

it will solve the problem

Upvotes: 4

Mo'men Sherif
Mo'men Sherif

Reputation: 335

you can use @react-oauth/google it uses the new google service identity SDK

Upvotes: 5

Rian yunandar
Rian yunandar

Reputation: 54

check these blog https://github.com/anthonyjgrove/react-google-login/issues/502

or try these

Here is what I am using.

First I have a general hook called useScript that can load any tag into the HTML head and has a callback function for when the script fully loads:

import { useEffect } from "react";

const useScript = (url, onload) => {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script.onload = onload;

    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [url, onload]);
};

export default useScript;

Then I have created a GoogleLogin component that loads Google's button.

import { useRef } from "react";
import useScript from "hooks/useScript";

export default function GoogleLogin({
  onGoogleSignIn = () => {},
  text = "signin_with",
  // feel free to add more options here
}) {
  const googleSignInButton = useRef(null);

  useScript("https://accounts.google.com/gsi/client", () => {
    window.google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: onGoogleSignIn,
    });
    window.google.accounts.id.renderButton(
      googleSignInButton.current,
      { theme: "outline", size: "large", text, width: "250" } // customization attributes
    );
  });

  return <div className="test" ref={googleSignInButton}></div>;
}

Pretty straightforward!

Upvotes: 2

Sina Ghadimi
Sina Ghadimi

Reputation: 181

Gapi sign-in method will be deprecated by March 2023 and it will be not used.so you must go with the new method mentioned here

Update: Also you can add plugin_name to your code to bypass error like this:

window.gapi.client
        .init({
          clientId:'Your Client ID',
          scope: "email",
          plugin_name:'App Name that you used in google developer console API'
        })

Upvotes: 18

Related Questions