Issues with Google OAuth 2.0 Libraries and Cross-Origin-Opener-Policy Error

Question

I am currently using Google's OAuth 2.0 authorization and authentication libraries in my project, specifically for the frontend with the Google login component. Recently, I've encountered two issues:

Upon starting my server, I receive the error: "You have created a new client application that uses libraries for user authentication or authorization that are deprecated. New clients must use the new libraries instead. See the Migration Guide."

When clicking the Google Sign In button, I encounter the error: "cb=gapi.loaded_0?le=scs:175 Cross-Origin-Opener-Policy policy would block the window.closed call."

JSX Code:

<GoogleLogin
     clientId={env.GOOGLE_CLIENTID}
     render={(renderProps) => (
          <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained">
             Google Sign In
         </Button>
         )}
         onSuccess={googleSuccess}
         onFailure={googleFailure}
         cookiePolicy="single_host_origin"
/>

I've extensively searched on Stack Overflow, GitHub, and Google's documentation, but none of the solutions seem to work. After further investigation, I learned that Google's OAuth 2.0 libraries are deprecated and no longer supported. I would like to gather more information on whether these authorization and authentication libraries are officially deprecated and if migration to the new Google Identity Services library is necessary.

Has anyone else faced similar issues, and if so, what steps did you take to resolve them? Additionally, is there any guidance on migrating from the deprecated Google OAuth 2.0 libraries to the new Google Identity Services library?

Thank you in advance for any insights or assistance you can provide!

Answer 1

use new version Google Outh 2.0 exactly in this link https://www.npmjs.com/package/@react-oauth/google

// index.js here configure this 

import { GoogleOAuthProvider } from '@react-oauth/google';

ReactDom.render(
    <GoogleOAuthProvider clientId='client id here'>
    <Provider store = {store}>
        <App />
    </Provider>
    </GoogleOAuthProvider>,
document.getElementById('root'))

// in auth.js
import { GoogleLogin } from '@react-oauth/google';

and futher if you encounter blank popup "[GSI_LOGGER]: The given origin is not allowed for the given client ID" this error, check out this https://youtu.be/SODClEHLeCA?si=6_0se_y70kaSLv-z it worked for me