Firebase and VueJS: Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000"

user_2420614 0
Viewed 546

I am following the official firebase auth tutorials and I keep getting this error for the following code:

const provider = new firebase.auth.GoogleAuthProvider()
      firebase.auth()
        .signInWithPopup(provider)
        .catch((error) => alert(error.message))
        .then((data) => console.log(data.user, data.credential.accessToken))

here's my console error:

backend.js:12632 Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

I do have localhost as whitelisted domain in auth console

Do I need to add the port too? assuming that would help...but any advice would be appreciated. thank you

FYI, I'm using Nuxt (Vue)

vuejs2 nuxt.js firebase-authentication javascript
1 Answers

I think it may be because signInWithPopup loads an <iframe> for the auth provider.

I can't tell from the code posted alone, but I'm guessing you might be using a google or facebook auth provide, and you'd need to whitelist localhost with the auth provider, which you wouldn't be able to do.

If that's the case, the simplest way may be to use a proxy like ngrok to get a web-accessible temporary server (sing https may also help)

user_1975460
Related