Winchan.js:150 Cross-Origin-Opener-Policy policy would block the window.closed call

[chithra.sahadev]

Hi All, I am creating OwnUI with Auth0.js and getting below error on webAuth.popup.authorize(
winchan.js:150 Cross-Origin-Opener-Policy policy would block the window.closed call.
winchan.js:195 Cross-Origin-Opener-Policy policy would block the window.postMessage call.

Please help on this issue

webAuth.popup.authorize({
responseType: ‘token’,
connection: ‘google-oauth2’,
redirect_uri: ‘https://localhost:44335/createaccount.aspx’,
prompt: ‘login’,
owp: true,
scope: “profile email openid”,
}, (err, authResult) => {

                if (err != null) {

                    console.log(err);
                    return false;

                }

                webAuth.client.userInfo(authResult.accessToken, function (err, user) {


                    if (err != null) {
                        return false;
                    }
                    if (user != null) {

                        //doing something

                    }
                });
               
            });

[nik.baleca]

Hi @chithra.sahadev

Welcome to the Auth0 Community!

I am sorry regarding the late reply to your inquiry.
If you still have issues with this problem, do not hesitate to leave a reply or post again on the community page.

As far as I have researched the error that you are receiving, it appears to be an error thrown by the firebaseui npm package. Currently, there does not appear to be a definitive fix to the issue at hand, however I was able to identify some possible workarounds or causes which trigger the respective 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.
• Since you are experiencing issues with google authentication in your implementation, you can attempt using same-origin-allow-popups header instead of same origin for Cross-Origin-Opener-Policy on pages where you use google sign in button.
• If you are using any kind of API in your implementation, please double check the scopes since that might trigger the error.
• If you are using NextJS, you can attempt to add the following code inside the next.config.js:

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

If you do not have such a file, add it in the root directory.

• If your code uses signInFlow: 'popup', attempt to remove it from the code.
• Attempt adding the following meta tags in the head of 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/; />

• You can attempt to provide a prompt when signing in with google as follows:

const signInWithGoogle = async () => {
const provider = new GoogleAuthProvider(); // 
provider.setCustomParameters({ prompt: 'select_account' });
try {
await signInWithPopup(auth, provider); // 
} catch (error) {
alert(error.message);
}
};

• You can attempt to remove the COOP/COEP headers that you have added in your application as per this github post related to the same issue that you are experiencing.

In conclusion, the COOP errors appears to be triggered by the browser’s policies, the error may vary from browser to browser and a definitive fix may vary depending on your application/implementation.

If you have any additional questions regarding the matter, feel free to leave a reply or post again on the community page!

Kind Regards,
Nik