Google Sign-In Not Working in Next.js with Firebase due to Cross-Origin-Opener-Policy Error

I am developing a web application using Next.js and Firebase. I have successfully implemented Google sign-in in my application, but I've encountered an issue which is preventing the sign-in process from completing as expected.

When I attempt to sign in, a popup window appears as intended. However, in the console, I see the following error:

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

Because of this error, the sign-in process doesn't complete and the user is not properly signed in.

Some further context: I'm testing this functionality in a development environment, on localhost. The issue is active on Chrome, but not on Firefox.

Could this error be due to a misconfiguration of the Cross-Origin-Opener-Policy? If so, how can I correctly configure this policy for Google Sign-in with Firebase in a Next.js application?

Yes, it has likely to do with the COOP configurations of your page, the Login page, and how they interact.
When two pages don't have the same COOP, they end up in separate browsing context groups, which may block some interactions like the window.closed method.

It's difficult to give an exact solution without seeing your code and implementation, however you could try to modify your COOP so that it matches the Login page's COOP.
This could be same-origin or same-origin-allow-popups.

Those headers can be set in the NextJS Config: https://nextjs.org/docs/pages/api-reference/next-config-js/headers

in your case:

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

This seems to be an unsolved issue for a long time. However, please try following

1. Please check the scope - https://stackoverflow.com/a/76574604/9640177
2. Make sure you have set proper authorized Domains or URIs set up on firebase and GCP if you are using Google APIs - https://stackoverflow.com/a/76547658/9640177

You can also refer to cross-origin isolation guide - https://web.dev/cross-origin-isolation-guide/ and MDN docs for more info on Cross-Origin-Opener-Policy

If you are using google APIs, make sure you also add the URIs with port as well, e.g., localhost:3000. You can check out my live website - https://radheshyamdas.com/ I am using firebase auth, built with Next.js

I believe your problem has to do with your environment setup and the reason is because the error you showing is under a javascript file which should be located on your dev env without violating the CROS policy.

The questions that should be answer are:

• How did you setup your environment? Did you follow Next.js doc ?
• How did you install Firebase SDK?

I would suggest to answered those questions and if that's true (you follow doc correctly) then show more details regarding the error. (like network under dev tools) also a good idea is to debug your app at the point of the authentication, otherwise if false then follow the documents because currently issue is not clear

I think you should allow the firebase url in the nextjs config file. It seems to me similar like when you use pictures with urls.

Other tip, if you not hosting to Vercel you have to provide the baseUrl of the page in the environment variables, as I remember. It also could be a problem.