Cross-Origin-Opener-Policy policy would block the window.closed call error while using google auth

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: signInFlow="redirect" 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. If Auth does not work 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..." }; Trying get rid of the console error 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. Local development: Below are React examples but similarly should work other frameworks. For create-react-app and craco modify craco.config.js as: module.exports = { devServer: { headers: { 'Cross-Origin-Embedder-Policy': 'unsafe-none' } } } For Next.js modify next.config.js: module.exports = { async headers() { return [ { source: "/login", headers: [ { key: "Cross-Origin-Embedder-Policy", value: "unsafe-none", }, ], }, ]; }, }; Firebase hosting 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.