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

[mr-chandan]

Summary

I am using next, 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)

Additional information

No response

Example

No response

[andre7000]

Have this same problem too. Thanks for opening mr-chandan.

[shantanuSakpal]

i think i know what the issue is. In my case, the problem was i was trying to login even when i had already logged in. i had a login button, which called the googlelogin function. But i had not ye added the function to route to home after login. so when i pressed the login again , it gave me this error. however when i logged out and tried login again, it worked fine.

[K0shal]

thankx

[roushan-code]

i think i know what the issue is. In my case, the problem was i was trying to login even when i had already logged in. i had a login button, which called the googlelogin function. But i had not ye added the function to route to home after login. so when i pressed the login again , it gave me this error. however when i logged out and tried login again, it worked fine.

thanks

[andri-creative]

In my case, I solved it by adding a redirect to the homepage after successful login.
Just wanted to share in case it helps someone else!

[behruz-dev-01]

i think i know what the issue is. In my case, the problem was i was trying to login even when i had already logged in. i had a login button, which called the googlelogin function. But i had not ye added the function to route to home after login. so when i pressed the login again , it gave me this error. however when i logged out and tried login again, it worked fine.

thanks

[andre7000]

Haven't found a solution yet. If I do, I will be sure to post.

…

On Mon, Jun 12, 2023 at 7:52 AM Chandan H ***@***.***> wrote: Did you find any solutions ? Do share it — Reply to this email directly, view it on GitHub <#51135 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYRHNHFAMC5EZZABVQJU2DXK4UMXANCNFSM6AAAAAAZCOVSVI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[AbGalib]

Did you find the solution?

[jschoi-96]

stuck in same prob :(

[Mashsquare]

I got this while running it locally, is this your case as well?

[mr-chandan]

Yep, I tried hosting using vercel and tried but the same error pops up everytime , let's upvote and bring this to notice !

[anvipul]

are you getting this error in local only?

[skrzemien-git]

I have also encountered this issue, followed by another one, also appearing twice:

Cross-Origin-Opener-Policy policy would block the window.postMessage call. client:256

From what I was able to debug, it originates from the pop-up's iframe,

Cross-Origin-Opener-Policy policy would block the window[i] call. m=credential_page_library:203

Apparently the iframe is trying to make contact with the parent window for some reason I was unable to determine.
It doesn't break my login flow, only thing it does is reporting the behaviour to the console.

In my case, errors are beeing thrown exactly after the execution of this line, with a.i set to true.
"picker_popup" === a.i ? window.opener.postMessage(b, a.da) : window.parent.postMessage(b, a.da)

Only suggested solutions i have come across suggested adding appropriate headers on my side, but including them in my nginx server configuration didn't help at all. I don't quite understand how would it be possibble for the OAuth iframe to communicate with its parent window while it most likely implements server-wide "same-origin" header for COOP (at least with all the other requests I was able to notice).

[mr-chandan]

The problem is with next or firebase ? I see my old react apps working fine without any error

[skrzemien-git]

Im not sure, actually im quite confused about it. For example there is no error when I open it in firefox what could suggest its somehow related to chromium. On the other hand im not using neither firebase nor next - in my case its angular gui with .net backend, found this thread accidentally looking for a solution. Sorry if im contributing a bit of offtopic

[anvipul]

@Szymek962 , are you able to resolve this?

[ashutosh887]

Same issue... Please help @ijjk @tianenpang @Timer @huozhi @shibe23

[drave-coding]

Did anyone found the solution??

[ashutosh887]

@everyone on the thread

I've solved
It was mainly because a wrong API call that I was doing to my Backend

inspect your code flow once and if you still face any issues, I'll be happy to help
Thanks

[drave-coding]

@mr-chandan yes, this was the exact problem I faced but still no answer to this is available 🙂

[tamago01]

@ashutosh887 Could you please share what changes solved your problem?
I'm experiencing this issue while building my MERN app

[AbGalib]

Did anyone find out how to solve this?

[RatheeshDev]

I'm facing the same issue on my React app when I try to login........Didn't face this issue last month

[shantanuSakpal]

i think i know what the issue is. In my case, the problem was i was trying to login even when i had already logged in. i had a login button, which called the googlelogin function. But i had not ye added the function to route to home after login. so when i pressed the login again , it gave me this error. however when i logged out and tried login again, it worked fine.

[osaidfaisal12]

Having the same issue and after some searches this code works for me. Write the code in next.config.js. Also, if I am opening the dev server on opera, I am not getting any errors.
async headers() { return [ { source: '/(.*)', headers: [ { key: 'Cross-Origin-Opener-Policy', value: 'same-origin', }, ], }, ]; },

but still getting another error.
FirebaseError: Firebase: Error (auth/popup-closed-by-user).

[osaidfaisal12]

No, still didn't find exact reason. Must restart the app after editing code.

[drave-coding]

@osaidfaisal12 i don't have next config.js file bro where should I add it

[andre7000]

@drave-coding I put it in the root directory.

The below in my next.config.js results in the pop up working (ie. opening and closing) yet get errors "Cross-Origin-Opener-Policy policy would block the window.closed call.".

My next.config.js...

module.exports = {
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "Cross-Origin-Opener-Policy",
value: "same-origin allow-popups",
},
],
},
];
},
};

[drave-coding]

@osaidfaisal12 u r still getting that error?

[osaidfaisal12]

Yes, I am getting auth/popup-closed-by-user error. Cross-orgin-opener-policy error disappeared after adding code to next.config.js

[DOWSCZ]

Also problem... here :/

[lucazsunion]

me too

[andre7000]

Yes I get the errors yet it is not blocking the sign up flow. Before the errors were blocking the flow. Yet still want to find a fix.

…

On Wed, Jun 14, 2023 at 9:33 PM Abhishek Das ***@***.***> wrote: @osaidfaisal12 <https://github.com/osaidfaisal12> u r still getting that error? — Reply to this email directly, view it on GitHub <#51135 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYRHNCCEZ4JPAWJ7NDMETLXLKGBHANCNFSM6AAAAAAZCOVSVI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[rajiss-ctrl]

hi,
has any one able to solve this issue? please I need help here

[Okly2023]

i has that issue too. anyone know the solution?

[Lukonii]

This is a solution
https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy

Or just copy this into your html
<meta Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src
https://accounts.google.com/gsi/; />

[Okly2023]

where to put this in reactjs: <meta Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src
https://accounts.google.com/gsi/; />
i tried to read information of that first link but not see the solution for my react app

[karanjain71]

Inside your index.html file

[shadan-arif]

@Lukonii Are you missing quotes or angular brackets (though the google dev also mentions the same code) while using this meta code? This code snippet shows an error while pasting it in public/index.html file

[kevinfry]

Just started happening to me using JavaScript, my solution was to remove the popup flow and worked like a charm:

        var uiConfig = {
            autoUpgradeAnonymousUsers: true,
            signInSuccessUrl: '',
            callbacks: {
                signInFailure: function(error) {
                    if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
                        return Promise.resolve();
                    }
                    var cred = error.credential;
                    return firebase.auth().signInWithCredential(cred);
                }
            },
            //signInFlow: 'popup',
            signInOptions: [
                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                firebase.auth.GithubAuthProvider.PROVIDER_ID,
            ],
            privacyPolicyUrl: '',
            tosUrl: ''
        };

also in Firebase ui documentation.

[kevinfry]

    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

[Okly2023]

how to use those script links in reactjs

[andre7000]

@Okly2023 I'm not sure yet if I'll use v9 compat option yet looks like there is info here... https://firebase.google.com/docs/web/modular-upgrade. Will first try to use the nextjs.config.js updates and test.

[Okly2023]

andre7000 Thank you i see some info i am gonna read and try to use it and see.

[ZeenatFirdosh]

it worked!! thanks

[Asharalikhan4]

Guy's try to lookup for the URL. In my case i trying to call a different url.

[Navid-gh]

        auth2 = gapi.auth2.init({
            client_id: 'CLIENT_ID',
            cookiepolicy: 'single_host_origin',
            plugin_name: 'App Name that you used in google developer console API'
        });
        
        adding plugin_name solved my problem 
        see this link
        https://stackoverflow.com/questions/72192576/i-got-this-issue-when-i-am-trying-to-run-this-code-gapi-auth2-getauthinstance

[PhanHuuLan]

const provider = new GoogleAuthProvider(); // Use 'GoogleAuthProvider' directly
provider.setCustomParameters({ prompt: 'select_account' }); it helped me solve the problem

[ViniciusPilati]

Pra mim só mostrou o popup e as opções de escolher a conta, para completar a autenticação, ainda falha

[Harsh-007-max]

I tried all of the above mentioned solutions one by one and also combining them also doesn't work. for context I am using Angular 17 and the authentication signinWithPopup and for firebase i am using @angular/fire packages

[thundermatrix10]

Hey, I faced the same issue while working with React and Google Auth.

Here's how I resolved it :

1. Install gapi-script :-
   npm install gapi-script
2. In your file, add :-

import { gapi } from 'gapi-script';

const App = () => {
const gci = YOUR_GOOGLE_CLIENT_ID;
const igapi = () => {
      gapi.client.init({
        clientId: gci,
        scope:"",
      });
    }

useEffect(() => {
      gapi.load("client:auth2", igapi);
    })

return (
    //Your code
    )
}

export default App

I still get the Cross-Origin error at times but the sign-in goes through.

[andre7000]

I'm assuming it's export default "App" or? Thanks for sharing...

[thundermatrix10]

Yes, it is 'App'. My bad. I will rectify my mistake.
Did this solution work?

[mr-chandan]

Could you try this #51135 (comment)

[thundermatrix10]

Could you try this #51135 (comment)

I'm sorry, I haven't used Firebase yet. I'm working with MongoDB.

[mr-chandan]

Docs link which you can refer https://firebase.google.com/docs/auth/web/redirect-best-practices?hl=en&authuser=0

[Mithsah1325]

Summary

I am using next, 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)

Additional information

No response

Example

No response

The issue with the Cross-Origin-Opener-Policy policy would block the window.closed call warning is likely due to browser security policies when handling pop-up windows for authentication.

[isaniovitor]

Hi, my solution: in my next.config.mjs add:

const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
        ],
      },
    ];
  },
};

this solve the Cross-Origin-Opener-Policy error. If your start to receive the Firebase: Error (auth/popup-closed-by-user) remember to involve the signInWithPopup with a catch:

await signInWithPopup(auth, provider)
      .then(async (data) => {
        // some code
      })
      .catch((error) => console.log(error));

[CarrettaRiccardo]

This always triggers the auth/popup-closed-by-user error.

The issue is value: "same-origin" which needs to be value: "same-origin allow-popups", as mentioned above

[Callerstudios]

I think i have found the solution, i saw a comment that suggested what might be wrong. So, if a user is logged in already, you wont be able to login there. i am not sure, but I think this happens if only one google account is available. I logged another account to my device and it works now. And to be sure, I checked if a user is logged in with onAuthStateChanged and it shows someone is logged in already. I'm certain someone will need this. You're welcome

[Callerstudios]

While this is true, it might not entirely solve your problem. This behavior occurs because when you use signInWithPopup in Firebase, it immediately initiates the sign-in process with the currently logged-in Google account in the browser. If a user is already signed in with a Google account, the popup may bypass the account selection screen and automatically sign in the user.
To allow the user to select a Google account each time, you can force the account chooser to appear by setting the prompt parameter to "select_account".

provider.setCustomParameters({
prompt: "select_account"
});
Add this after you initialise your provider

[Mahima-Sanketh-Git]

Yes , You are right , It worked for me

[johndunderhill]

If signin is not working, I recommend you remove any COOP/COEP headers you may have added (these may actually make the problem worse), and then carefully review this document:

https://firebase.google.com/docs/auth/web/redirect-best-practices

The latest browsers prevent access to cookies and shared storage from outside the current origin. The document explains how to work around that so the Firebase signInWithRedirect routine will work. The document states that starting June 24, 2024, one of the work-arounds must be implemented in order for signin to continue to work on the latest browsers, including Chrome.

Once you've done this, signInWithPopup should also work, however you will receive a warning in the console:

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

We believe this is being caused by a report-only Cross-Origin-Opener-Policy header that is currently sent back by accounts.google.com:

This collects data on the issue and logs the error. It appears to be safe to ignore for the time being. There is no actual solution to this problem at the present time. A very good discussion with figures covering this use-case can be found here:

https://github.com/hemeryar/coi-with-popups

In short, I recommend:

• Remove any headers you've added (you can't get process isolation with the Firebase login helpers at the present time)
• Implement one of the work-arounds in the Google document on redirect best practices
• Use signInWithRedirect on mobile (the workflow is cleaner for mobile users)
• Use signInWithPopup on desktop browsers, if you want (preserves context, saves loading your app twice)

How to detect if you're on mobile:

/**
 * Is this a mobile device?
 *
 * Background:
 *
 * - https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
 * - https://stackdiary.com/detect-mobile-browser-javascript/
 *
 * You can test this in Chrome Dev Tools (or on a real device).
 */
export function isMobile(): boolean {
	return /Mobi/i.test(window.navigator.userAgent);
}

These procedures work in our environment. You do also have to be sure to put the URL where your page is hosted into the Firebase authorized domains list in the Firebase console, and set the auth domain correctly in your Firebase configuration object. These steps are covered in the Google document.

I do not believe this error message has anything to do with attempting to sign in while already signed in. I can do that any time. The issue doesn't have anything to do with account linking.

If the the signin popup hangs (you get a timeout error), then it's not working correctly. Communication between the Google signin code and the Firebase auth helper that called it may be blocked, possibly by sending an inappropriate Cross-Origin-Opener-Policy header from your hosting environment. If you haven't configured your signin code to pause to prompt for the user account to use, this may be difficult to see. This code forces display of the account chooser:

/**
 * Sign in with a provider.
 *
 * @returns A Promise that will resolve to "Success" or an error message suitable for display to the user.
 */
async function signinWithProvider(provider: OAuthProvider): Promise<string> {
	console.info('authentication/signinWithProvider: Starting signin...');
	if (!isInitialized()) {
		console.error('authentication/signinWithProvider: Authentication not initialized');
		return 'Authentication not initialized';
	}

	try {
		provider.addScope('profile');
		provider.addScope('email');
		provider.setCustomParameters({
			prompt: 'select_account'
		});

		let result: UserCredential;
		if (isMobile()) {
			result = await signInWithRedirect(authConfigInstance, provider); // This never returns.
		} else {
			result = await signInWithPopup(authConfigInstance, provider); // This does return.
		}

		setItem('ExpectedUserId', result.user.uid);
		return 'Success';
	} catch (error) {
		console.error('authentication/signinWithProvider:', (error as Error).message);
		return (error as Error).message.replace('Firebase: ', '');
	}
}

/end of comment/

[AhmeDseses]

Everything is working well by me, despite the error is still out there!
Is it okay if I just ignored this and kept going?

[johndunderhill]

I believe it's okay to ignore the error. As of now, it's a 'report only' error--it doesn't actually block anything. That may change in the future.

[MeharPro]

Okay, so this usually happens when you're not using the same-origin-allow-popups, here is an article that describes it well. https://andrewlock.net/understanding-security-headers-part-1-cross-origin-opener-policy-preventing-attacks-from-popups/
The gist is that you should set Cross-Origin-Opener-Policy to same-origin-allow-popups to allow auth popups.

[johndunderhill]

Based on our testing, the message originates from a page loaded from accounts.google.com. How do you plan on changing the headers sent back by accounts.google.com?

[LiviuSosu]

you may add this :
data-use_fedcm_for_prompt="true"
data-use_fedcm_for_button="true"

like this:

    <div>
        <div id="g_id_onload"
            data-client_id=":-)"
            data-context="signin"
            data-ux_mode="redirect"
            data-login_uri="https://localhost:7133/ExternalLogin/googleLogin"
            **data-auto_select="true"**
            **data-itp_support="true"**>
        </div>

        <div className="g_id_signin"
            data-type="icon"
            data-shape="square"
            data-theme="outline"
            data-text="signin_with"
            data-size="large">
        </div>
    </div>

however you may want to use package, for react the best one at this point would be @react-oauth/google. If you decided to use the indicated package, the erros will presists, but it will work anyway

[MeharPro]

I mean if it works, it works ig.

…

On Mon, Apr 21, 2025 at 10:39 AM Liviu Şoşu ***@***.***> wrote: you may add this : data-use_fedcm_for_prompt="true" data-use_fedcm_for_button="true" like this: <div> <div id="g_id_onload" data-client_id=":-)" data-context="signin" data-ux_mode="redirect" data-login_uri="https://localhost:7133/ExternalLogin/googleLogin" **data-auto_select="true"** **data-itp_support="true"**> </div> <div className="g_id_signin" data-type="icon" data-shape="square" data-theme="outline" data-text="signin_with" data-size="large"> </div> </div> however you may want to *use package*, for react the best one at this point would be ***@***.***/google*. If you decided to use the indicated package, the erros will presists, but it will work anyway — Reply to this email directly, view it on GitHub <#51135 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQSJHI7N5L2Z7CMXIEK6BNT22T7KJAVCNFSM6AAAAAAZCOVSVKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOBZHE2DAMY> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[LiviuSosu]

If you need any support, please let me know.

[kaicianflone]

I have this error but it doesn't cause any issues in my flow using pkg: @capacitor-firebase/authentication (Capacitor + NextJS + Firebase Auth).

I am reading these comments when Google was having outages and causing issues with sign in - where accounts selection was lagging or timing out big time.