Need Help: Cross-Origin-Opener-Policy Blocking Google Login Window.Closed Call
Tags: react, cors, reactgoogle
Published: 2023-12-26 02:24:31

Hello community!

I'm encountering a persistent issue with Cross-Origin-Opener-Policy (COOP) while implementing Google Login in my React app. The specific error message is:

mathematicaCopy code

Cross-Origin-Opener-Policy policy would block the window.closed call.

Description:

Problem:

The error occurs when attempting a window.closed

call related to Google Login.

It's specifically related to Cross-Origin-Opener-Policy (COOP) enforcement.

Context:

The app uses React and incorporates the Google Login functionality.

The error suggests that the COOP policy is preventing the window.closed

call from executing successfully.

What I've Tried:

Checked the initialization of the Google API library.

Explored potential workarounds for COOP-related issues.

Verified that the Google API library is loaded synchronously.

Code Snippet:

/* eslint-disable no-undef */ // Add this line at the top of your file

import './App.css';

import GoogleLogin from 'react-google-login';

import { useState, useEffect } from 'react';

function App() {

const [loginData, setLoginData] = useState(

localStorage.getItem('loginData')

? JSON.parse(localStorage.getItem('loginData'))

: null

);

const handleFailure = (result) => {

alert(result);

};

useEffect(() => {

const initGoogleLogin = async () => {

try {

await new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = 'https://apis.google.com/js/platform.js';

script.async = false;

script.onload = resolve;

script.onerror = reject;

document.head.appendChild(script);

});

// Check if gapi.auth2 is already initialized

if (!gapi.auth2.getAuthInstance()) {

// Initialize gapi.auth2

gapi.load('auth2', function () {

gapi.auth2.init({

client_id: '',

});

});

}

} catch (error) {

console.error('Error initializing Google API:', error);

}

};

initGoogleLogin();

}, []);

const handleLogin = async (googleData) => {

try {

const res = await fetch('/api/google-login', {

method: 'POST',

body: JSON.stringify({

token: googleData.tokenId,

}),

headers: {

'Content-Type': 'application/json',

},

});

const data = await res.json();

setLoginData(data);

localStorage.setItem('loginData', JSON.stringify(data));

} catch (error) {

console.error('Error during login:', error);

}

};

const handleLogout = () => {

localStorage.removeItem('loginData');

setLoginData(null);

};

return (

<div className="App"> <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="" buttonText="Log in with Google" onSuccess={handleLogin} onFailure={handleFailure} cookiePolicy={'single\\\_host\\\_origin'} /> )} </div> </header> </div> ); } export default App; \*\*Environment:\*\*

Browser: Chrome

Request for Help: If anyone has experience dealing with Cross-Origin-Opener-Policy issues, particularly related to Google Login, I'd greatly appreciate your insights or suggestions. How can I resolve or work around the COOP policy blocking the window.closed

call in this context?

Thank you in advance for your assistance!