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?
2
Answers
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.
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.