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

[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

[shadan-arif]

I have tried all the methods seriously. I tried Google Identity Service with popups and without popups (redirect). I used different npm packages that support Google Sign-In and also used Firebase Authentication. Nothing works. 😢

I thought the popup sign-in window resulted in an error and even tried redirecting to the URL, but still, it says CORS error. While redirecting, it says that the frontend URL can't connect to the backend URL due to a CORS error. To use any other button, say even contact us in the footer, I can't send any request. For that, I need to refresh the page again. Also, the interesting thing is that in my localhost:3000, there is no problem with either of the methods, though I don't use any CORS extension, proxy, etc. to bypass CORS error. I only face this error once I host the application (Render and Vercel).

Do you guys think that somewhere or the other hosting on Vercel is creating a problem? I haven't tried hosting on another platform.

I have found a temporary solution, using Auth0 authentication for the time being, as they allow 7000 free registered users (no credit card is required for registration). Though the demerit is that you can't use any other authentication apart from Google Sign-in unless you pay for their service or keep creating a new account every 14 days 😂 One more demerit is that you won't be able to record the phone number of the user if you are using MFA via Twilio.

If someone has overcome the error, do share the solution for this.

[amexcompliance]

I receive the same error even on the local:3000

[MauroSerrano-dev]

I solve this adding this in the next.config.js file.

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

[eklavyaisabird]

is there something like this i could use for vite?

[mr-chandan]

This doesn't work,it removes the error but for me it takes the popup to close for ever,and new error pop in to

[3amprogrammer]

It's not solving the issue. By specifying same-origin you basically disable the popup.

[rahulwilful]

where exactly should we disable this pop?

[MauroSerrano-dev]

I recently noticed that this doesn't solve the problem as it causes FirebaseError:
Firebase: Error (auth/popup-closed-by-user).
When the user does not choose the email quickly.

[lucalemboure1]

i had the same problem with a project with next.js 12 and the firebase signInWithPopup.
nothing solve the problem exept doing a page reload at the end of my "handleSignUpWithGoogle()" function.

it's ugly, but it worked ....

[SofiuzzamanSofi]

Read the whole page but still stuck on this.
Not solved. 😭😭😭

Error: Cross-Origin-Opener-Policy policy would block the window.close call.

[ivanandresdiaz]

x2

[araf7053]

did you find any solution yet??

[Romanovskyi2137]

i think i find solution.
Chat GPT sad, is a browser Cross Origin feature, main reason is NO HTTPS type of connection.
Anyway, code will work, but we have this error message.
So when we use google auth feature in real project, where we have https, all gonna be ok.

[kalpeshel]

I added origin without port to fix this issue.

Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.

[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

[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