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 (
React Google Login App
{loginData ? (You logged in as {loginData.email}
Logout ) : ( )} ); } 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!
Top comments (0)