I am using firebase and its google auth tool , everything works fine the user data is getting saved in the database but i get a error every time the popup window appears (Cross-Origin-Opener-Policy policy would block the window.closed call)
i am using next js and do help me resolve the error thank you
This error appears in the firebaseui npm package.
The first important thing to understand is that sign-in problem might not be related to the displayed console error:
The easiest way to check that your code is working without the error is to switch temporarily from signInFlow="popup" to signInFlow="redirect", which is the default value in Firebase UI Auth.
Check the code on:
Missed JS Context, for example, <AuthProvider/> in React.
Subscribe to firebase/auth events and check that the user object is returned (React example):
import { getAuth, onAuthStateChanged } from 'firebase/auth';
const StyledFirebaseAuth = () => {
useEffect(() => {
const unregisterAuthObserver = onAuthStateChanged(
getAuth(),
async (user) => {
console.log('user', user);
},
);
// the rest of code
}
Check Firebase Sign-in method settings to allow specific providers
Check Firebase Authentication allowed domains
Check your Firebase configuration for the web application:
const firebaseConfig = {
apiKey: "ABCDEF...",
authDomain: "your-project-domain",
projectId: "you-project",
appId: "1:abcdef..."
};
Chrome blog suggests to use Cross-Origin-Opener-Policy: restrict-properties with Cross-Origin-Embedder-Policy: require-corp. Sadly, it will not work with Firebase UI.
The problem is with Cross-Origin-Embedder-Policy header, which is by default should be set to unsafe-none.
This header should be returned with the html page or omitted (the implicit default value). It is possible to set it up manually.
Please notice that to correctly test it, a server should be restarted and browser cache cleared or a new incognito window used.
Below are React examples but similarly should work other frameworks.
create-react-app and craco modify craco.config.js as:
module.exports = {
devServer: {
headers: {
'Cross-Origin-Embedder-Policy': 'unsafe-none'
}
}
}
next.config.js:
module.exports = {
async headers() {
return [
{
source: "/login",
headers: [
{
key: "Cross-Origin-Embedder-Policy",
value: "unsafe-none",
},
],
},
];
},
};
Firebase allows to specify headers that are passed for the hosted files, including .html, .js. Modify firebase.json file, for example, for a Single Page Application (SPA):
{
"hosting": [
{
"target": "web",
"public": "web/build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Cross-Origin-Embedder-Policy",
"value": "unsafe-none"
}
]
}
]
}
]
}
Although after my attempts to change Cross-Origin-Opener-Policy, Cross-Origin-Resource-Policy and Cross-Origin-Embedder-Policy to different values still the error log appears in the Chrome browser but the sign-in method is working.
For more strict security settings and the unsafe-none value please refer to the documentation.
unsafe-none for npm create vite@latest my-project -- --template react? –
Singe defineConfig for vite, similar to github.com/vitejs/vite/issues/11862 –
Stearn export default defineConfig({plugins: [react()], server: { headers: {"Cross-Origin-Embedder-Policy": "unsafe-none",},},}); But still getting the console error. –
Singe This header helps you to stay away from malicious websites. It allows you to control how you open your tabs or windows from your website and restrict interactions with other sources.
please refer to this Google auth setup article regarding the cross-origin opener policy
It recommends using same-origin-allow-popups header instead of same origin for Cross-Origin-Opener-Policy on pages where you use google sign in button.
Check your SCOPES for the API.
Ran into this issue authorizing the Google Calendar API. For some reason it was working with my dev account but any other account would throw the "cross origin opener policy policy would block the window" error.
Turns out I accidentally had "const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly'. All I had to do was update the SCOPES to "https://www.googleapis.com/auth/calendar" and everything worked.
Please check your firebaseConfig, you can find it in Project Settings/ General on your Firebase, if you have made some changes to the project name or so, it might have conflicts between your firebaseConfig and the updated one on Firebase
I had the same issue, and I changed the method from "signInWithPopup" to "signInWithRedirect". But with this method, you need to handle this redirect with "useEffect" hook. I would paste my code here just for the reference.
import { getRedirectResult, signInWithRedirect } from 'firebase/auth';
import { useEffect, useState } from 'react';
import { auth, provider } from '../../services/auth';
const Login = () => {
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
setIsLoading(true)
getRedirectResult(auth).then(response => {
if (!response) return
// Your code here
}).catch(error => {
console.error(error);
}).finally(() => setIsLoading(false))
}, []);
const onClick = async () =>
signInWithRedirect(auth, provider).catch(error => {
console.error(error);
})
return <button onClick={onClick} disabled={isLoading}> {isLoading ? "Loading. Please wait!" : "Sign In With Google"} </button>
}
export default Login;
If you look in the console you should see an error saying that the domain doesn't have permission to do google sign in. What you need to do is go to the firebase console -> authentication -> settings and click on "authorized domains" and add your domain
Switching from Chrome to Firefox, worked for me. Maybe, It is an issue with Chrome.
© 2022 - 2024 — McMap. All rights reserved.