Google Sign-in not working in Next.js with Firebase due to Cross-Origin-Opener-Policy error

Question

I'm developing a web application using Next.js and Firebase. I have successfully implemented Google Sign-in in my application, but I'm running into an issue that prevents the sign-in process from completing as expected.

When I try to log in, a popup appears as expected. However, in the console I see the following error:

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

Due to this error, the login process cannot be completed and the user cannot log in correctly.

Some further context: I'm testing this functionality in a development environment on localhost. This issue exists on Chrome but not Firefox.

Is this error caused by a misconfiguration of Cross-Origin-Opener-Policy? If so, how do I properly configure this policy in my Next.js application for Google Sign-in with Firebase?

Answer 1

Yes, this may have something to do with the COOP configuration of your pages, login pages, and how they interact. When two pages do not have the same COOP, they end up in separate browsing context groups, which may prevent certain interactions, such as the window.close method.

It's hard to give an exact solution without seeing your code and implementation, but you can try modifying your COOP so that it matches the COOP of the login page. This can be same-origin or same-origin-allow-popups.

These headers can be set in the NextJS configuration: 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"
          },
        ],
      },
    ];
  },
};

Answer 2

This seems to be a problem that has not been solved for a long time. However, please try the following

1. Please check the scope - https://stackoverflow.com/a/76574604/9640177
2. If you use the Google API, make sure you have set the correct authorized domain or URI on Firebase and GCP - https:// stackoverflow.com/a/76547658/9640177

You can also refer to the Cross-Origin Isolation Guide- https://web.dev /cross-origin-isolation-guide/ and MDN Documentation to learn more about Cross-Origin- More information on Opener-Policy

If you are using the Google API, make sure to also add the URI with the port, such as localhost:3000. You can check out my live website - https://radheshyamdas.com/ I am using firebase auth .js built with Next