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.