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.

[mr-chandan]

Did you find any solutions ? Do share it

[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

[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

[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.

[andre7000]

@kevinfry, are you using Firebase v9? Or did you use the compat code?

[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" />

[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.

[ZeenatFirdosh]

it worked!! thanks

[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/; />

[skrzemien-git]

Both this and @kevinfry's proposed solutions solve the hypothetical login flow issues, but they do not affect the COOP errors related to the popup trying to communicate with its parent window while using "same-origin" header.

[jimmyff]

This is not supported by the meta tag source: MDN

[VuTan115]

Hey @mr-chandan,

I just figured out that I had disabled third-party cookies. After enabling them, everything finally worked for me.

Before disable 3th-party cookies:

After enable 3th-party cookies:

Here's my Google Client ID configuration:

You guys can try out my live demo.

And here is my google-one-tap.tsx file:

'use client';
import { parseJwt } from '@/utils/jwt-parser';
import Script from 'next/script';
import { useEffect, useRef, useState } from 'react';

export default function GoogleOneTap() {
  const [scriptLoaded, setScriptLoaded] = useState(false);
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (typeof window === 'undefined' || !window.google || !divRef.current) {
      return;
    }
    const { google } = window;

    google.accounts.id.initialize({
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      prompt_parent_id: 'google-one-tap',
      ux_mode: 'popup',
      callback: async (res) => {
        console.log(parseJwt(res.credential));
      },
    });

    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed()) {
        console.log('getNotDisplayedReaseon: ', notification.getNotDisplayedReason());
      }
      if (notification.isSkippedMoment()) {
        console.log('isSkippedMoment: ', notification.getSkippedReason());
      }
      if (notification.isDismissedMoment()) {
        console.log('isDismissedMoment: ', notification.getDismissedReason());
      }
      if (notification.isNotDisplayed() || !notification.isDisplayed()) {
        google.accounts.id.renderButton(divRef.current, {
          type: 'standard',
          size: 'large',
          theme: 'outline',
          text: 'continue_with',
          locale: 'vi-VN',
        });
        document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
      }
    });
    return () => {
      google.accounts.id.cancel();
    };
  }, [process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, divRef.current, scriptLoaded]);

  return (
    <>
      <div ref={divRef} />
      <Script
        onLoad={() => {
          setScriptLoaded(true);
        }}
        id="google-login-btn"
        strategy="afterInteractive"
        src="https://accounts.google.com/gsi/client"
      />
    </>
  );
}

Hope this helps!

[cavoixanh26]

I tried your solution, but I'm still encountering that error.
So, I resolved it by adding a meta tag:
<meta name="Cross-Origin-Opener-Policy" content="same-origin"> in head tag

[anvipul]

Has anyone solved this issue for msal login flow?

[Albedo-13]

As a half measure you can replace your signInWithPopup method with signInWithRedirect. It seems to work since you dont need permission to show popup

[kawana77b]

I agree. Wise approach!
It would be great if there was a solution, but due to my own lack of knowledge, I have decided that it is best not to dwell on this issue.

This problem occurs in Chromium, and at least the main problem is not specific to Next.js. I guess this is a story that can be focused on Google's authentication mechanism, Firebase SDK and Chromium.

[Samy-glitch]

it worked for me

[developerdesigner18]

I have solved this issue by selecting the first option rather that the second one. It is working for me. I don't sure about the solution but it is working for me.

Thank you.

[ivanandresdiaz]

This worked for me https://stackoverflow.com/a/77297872/15132274.

Using nextjs and Firebase

[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

[ViniciusPilati2005]

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));

[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/