Question 197718 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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"
          },
        ],
      },
    ];
  },
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search