error: 'idpiframe_initialization_failed' React App trying implement google login-CodePudding

I'm trying to implement google login with react-google-login. I setup de credentials with http://localhost:3000 and https://localhost:3000. and the error: 'idpiframe_initialization_failed'still showing in the console.

This the error

{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](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error: "idpiframe_initialization_failed"
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

This is the code

<GoogleLogin 
                    clientId="CLIENT_ID.apps.googleusercontent.com"
                    render={(renderProps) => (
                        <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained"
                        >Google Sing in</Button>
                    )}
                    onSuccess={googleSuccess}
                    onFailure={googleFailure}
                    cookiePolicy="single_host_origin"
                />

CodePudding user response：

Works for me:

Try it in an incognito tab,

Try to re-create your credentials,

Make sure you're not using https by accident,

Note:

It may take 5 minutes to a few hours for settings to take effect

Try this:

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.

So, in my case the solution was:

window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: '******.apps.googleusercontent.com',
                plugin_name: "chat"
            })

CodePudding user response：

I found the solution am i pretty new in REACT JS but there is a solution in React app.

First you need to install gapi-script npm i gapi-script then create the following useEffect

 useEffect(() => {
        function start() {
          gapi.client.init({
            clientId: '**YOUR_CLIENT_ID**.apps.googleusercontent.com',
            scope: 'email',
          });
        }
    
        gapi.load('client:auth2', start);
      }, []);

and this is the full code or at least the subject we are working on it

import React, { useState, useEffect } from 'react';
import { Avatar, Button, Paper, Grid, Typography, Container} from "@material-ui/core";
import { GoogleLogin } from "react-google-login";
import { gapi } from "gapi-script"

import Icon from "./icon";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
import Input from './Input';
import useStyles from "./styles";

function Auth() {

useEffect(() => {
        function start() {
          gapi.client.init({
            clientId: '**YOUR_CLIENT_ID**.apps.googleusercontent.com',
            scope: 'email',
          });
        }
    
        gapi.load('client:auth2', start);
      }, []);
      
       const googleSuccess = async (res) => {
        console.log(res);
    };

    const googleFailure = (error) => {
        console.log(error);
        console.log("Google Sing In ha fracasado intentelo denuevo mas tarde");
    };
      
 return (
 
 <GoogleLogin 
                    clientId="**YOUR_CLIENT_ID**.apps.googleusercontent.com"
                    render={(renderProps) => (
                        <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained"
                        >Google Sing in</Button>
                    )}
                    onSuccess={googleSuccess}
                    onFailure={googleFailure}
                    cookiePolicy="single_host_origin"
                />
 
 )