CODEWITHSUNDEEP
javascriptfirebasefacebookvue.jsfirebase-authentication
SeriousLee
SeriousLee

Reputation: 1371

Firebase Facebook authentication on localhost

I have a Vue.js app that uses Firebase for authentication and I'm trying to wire up the Facebook provider. I believe I have all my Firebase related code and configuration correct, but when I test my implementation from http://localhost:8080), I keep getting the Can't load URL: The domain of this URL isn't included in the app's domains. Facebook error.

enter image description here

The problem, from what I can tell, is that I need to provide a valid "callback" URL that returns the authentication response to my application. This is what Firebase tells you to do when setting up Facebook authentication, and what my research of the error confirmed, but the Valid OAuth Redirect URIs field in the Facebook App Settings page (which is where I surmised I need to put my return URL) rejects URLs containing localhost. I even tried to add the URL to any of the other fields in the Settings pages that look like they want URLs but they all respond the same. Here's a screenshot demonstrating this:

enter image description here

So my questions are 1) how do I configure my Facebook App to allow localhost testing, and 2) how do I fix the Can't load URL Facebook error?

Let me know if I need to include my pre-login Vue code. FWIW, I use Firebase's linkWithRedirect(); and signInWithRedirect() methods for logging in (as opposed to linkWithPopup() and signInWithPopup()).

Upvotes: 0

Views: 971

Answers (1)

SeriousLee
SeriousLee

Reputation: 1371

Turns out you're supposed to paste the exact .../__/auth/handler URL that Firebase gives you into the Facebook Valid OAuth Redirect URIs field, even while still developing locally. I was under the impression that the URL should be adapted to the environment - i.e. http://localhost:8080/__/auth/handler for development and https://my-app.firebaseapp.com/__/auth/handler for production.

But nope, use the production URL even in development.

Upvotes: 1

Related Questions