Cross-Origin-Opener-Policy policy would block the window.postMessage call error with Sign in with Google

Question

I have implemented Sign in with Google using popup UX mode for a React site hosted on Firebase. I am able to sign in, however, each time I sign in on localhost:3000 or on a deployed version of my site, I get this error:

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

I have attempted to set Cross Origin Opener Policy as detailed here. In setting this up, my firebase.json file looks like this:

{
    "database": {
        "rules": "database.rules.json"
    },
    "functions": {
        "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],
        "source": "functions"
    },
    "hosting": [
        {
            "target": "sandbox",
            "public": "build",
            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
            "rewrites": [
                {
                    "source": "**",
                    "destination": "/index.html",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ],
            "headers": [
                {
                    "source": "**",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ]
        },
        {
            "target": "production",
            "public": "build",
            "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
            "rewrites": [
                {
                    "source": "**",
                    "destination": "/index.html",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ],
            "headers": [
                {
                    "source": "**",
                    "headers": [
                        {
                            "key": "Cross-Origin-Opener-Policy",
                            "value": "same-origin-allow-popups"
                        }
                    ]
                }
            ]
        }
    ],
    "storage": {
        "rules": "storage.rules"
    },
    "emulators": {
        "auth": {
            "port": 9099
        },
        "functions": {
            "port": 5001
        },
        "database": {
            "port": 9000
        },
        "hosting": {
            "port": 5000
        },
        "storage": {
            "port": 9199
        },
        "ui": {
            "enabled": true
        },
        "singleProjectMode": true
    }
}

In trying to troubleshoot this further, I've also added this line to my index.html file in the header element:

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">

Unfortunately, I continue to get the same error when signing in whether I am on localhost:3000 or deployed to my sandbox target. Any suggestions on what I may be missing?

Answer 1

I've also encountered this issue, from what I was able to debug it originates from the popup iframe trying to communicate with the parent window. From my understanding its not possible to do if it implements "same-origin" COOP header server wide (based on other requests made). There is related topic open on github here

I was not able to determine what's the actual message that OAuth iframe is trying to post, it doesn't break my login flow either.

Answer 2

I had the same problem and it turned out that I had the wrong URIs inside my 'Authorized JavaScript origins' and 'Authorized redirect URIs' in google cloud. I had them set to http://localhost:5000 when I was suppose to be using:

http://localhost:3000, http://localhost:3000/login, http://localhost:3000/register.

Answer 3

I may be late but I wanted to reply because it took me a long time to find the solution to this problem. By the way, on the react side, it's possible with this package: https://www.npmjs.com/package/react-google-login However, you need to load the google api scripts in before using it.

here's how to proceed:

1- Install the gapi-script package as follows :

npm instal gapi-script

2- load and initialize google api script in your ReactJs app as follows:

import { gapi } from "gapi-script";
import React, {useEffect} from 'react'

function App(){

 const initializeGapi = () => {
    gapi.client.init({
      clientId: GAP_CLIENT_ID,
      scope: "",
    });
  };
  
  useEffect(() =>{
    // load and init google api scripts
    gapi.load("client:auth2", initializeGapi);
  })
  
  return (
    React.Fragment>
      <AppRoutes />
    <React.Fragment>
  ); 
}

export default App;

3- You can now continue using your react-google-login package. You may get warning corns on your console, but the feature will work just fine.