Authorization Error while using react-google-login as package

Viewed 19

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
Code:

import React from 'react'
import GoogleLogin from 'react-google-login'
import { useNavigate } from 'react-router-dom'
import { FcGoogle } from 'react-icons/fc'
import shareVedio from '../assets/share.mp4'
const Login = () => {
    const responseGoogle = (response)=>{
        console.log(response);
    }
    return (
        <div className='flex justify-start items-center flex-col h-screen'>
            <div className='relative w-full h-full'>
                <video
                    src={shareVedio}
                    type='vedio/mp4'
                    loop
                    controls={false}
                    muted
                    autoPlay
                    className='h-full w-full object-cover'
                />
                <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
                    <div className='p-5'>
                        <h3 className='text-xl font-bold text-white'>SHARE_HERE</h3>
                    </div>
                    <div className='shadow-2xl'>
                        <GoogleLogin
                            clientId={process.env.REACT_APP_GOOGLE_API_TOKEN}
                            render={(renderProps) => (
                                <button 
                                type='button' 
                                onClick={renderProps.onClick} 
                                className='bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none'
                                disabled={renderProps.disabled}
                                >
                                    <FcGoogle className='mr-4'/> Sign in with Google
                                </button>
                            )}
                            onSuccess={responseGoogle}
                            onFailure={responseGoogle}
                            cookiePolicy='single_host_origin'
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login`
```


I am trying to get authorized through google OAuth by using the react-google-login package but end up getting an error. I also try to clear up the cache but this didn't work for me.
1 Answers

Problem solved: Import this package

import { gapi } from 'gapi-script';
useEffect(() => {
   const initClient = () => {
         gapi.client.init({
         clientId: clientId,
         scope: ''
       });
    };
    gapi.load('client:auth2', initClient);
},[]);

To initialize our client, we will call the gapi function in our useEffect hook so that it gets called when our page loads or on every render

Related