Localhost Firebase authentication with Facebook integration

I am currently working on a Vue.js app that integrates Firebase for authentication, specifically with the Facebook provider. Despite configuring my Firebase code correctly, I continue to encounter the "Can't load URL: The domain of this URL isn't included in the app's domains." error message every time I test my implementation on http://localhost:8080.

https://i.sstatic.net/w3QUh.png

After some investigation, it appears that the issue lies in providing a valid "callback" URL to handle the authentication response from Facebook. While Firebase guidelines and my own research confirmed this, attempting to enter the required URL in the Valid OAuth Redirect URIs field within the Facebook App Settings page resulted in rejection, particularly if containing localhost. Even trying other fields within the Settings page led to the same outcome. A screenshot illustrating this problem can be found here:

https://i.sstatic.net/oOrQd.png

Thus, my inquiries are as follows: 1) How can I configure my Facebook App to permit localhost testing, and 2) How do I overcome the "Can't load URL" Facebook error? If necessary, I am willing to share my pre-login Vue code, noting that I utilize Firebase's linkWithRedirect(); and signInWithRedirect() methods for logging in (instead of linkWithPopup() and signInWithPopup()).

javascriptfirebasefacebookvue.jsfirebase-authentication

Answer №1

It turns out that when setting up Facebook Valid OAuth Redirect URIs in Firebase, you should actually use the exact .../__/auth/handler URL provided by Firebase, even during local development. I mistakenly thought that the URL needed to be modified based on the environment - such as using 

http://localhost:8080/__/auth/handler
for development and 
https://my-app.firebaseapp.com/__/auth/handler
for production.

Surprisingly, it is recommended to use the production URL even while working in a development environment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message related to the callback type issue in Node.js with the http.createServer

Having recently embarked on my journey with node.js, I delved into various tutorials and encountered a stumbling block while attempting to refactor some code. The tutorial that caught my attention and led me to this hiccup can be found here: http://www.tu ...

javascriptnode.js

Error: Attempting to access 'defer' property of an undefined object in Angular JS WebSocket

I am relatively new to the world of web technologies, piecing together code snippets from various sources to create this code. My task involves retrieving data for a web application built on angularjs from a websocket using APIs. Below is the code snippe ...

javascriptangularjswebsocket

Struggling to display Firebase Auth information resulting in 'undefined' value within React web application

When loading a user's profile page, I am trying to display their displayName and email information retrieved from Firebase Auth. I have implemented this logic within the 'componentDidMount' method by updating the state with the response dat ...

javascriptreactjsfirebasefirebase-authentication

What is the proper way to utilize useRef with HTMLInputElements?

Dealing with React and hooks: In my code, there is a MainComponent that has its own operations and content which refreshes whenever the value of props.someData changes. Additionally, I have designed a customized InputFieldComponent. This component generat ...

javascriptreactjsreact-hooks

Ways to permit https://* within a content security policy (CSP) configuration

I'm currently incorporating CSP into my website but encountering an issue with the img-src header. I'm using NodeJS and Express to develop the site for my Discord Bot, and I want to revamp it but I've hit a roadblock. ====== This is the co ...

javascriptnode.jsexpresscontent-security-policy

Connect various models together, or create synchronized computed properties

At times, the model abstraction may fall short, leading to the necessity of synchronizing two different models. For instance, I have two lists linked by an angular sortable, which requires a model structure like this: left = [{name:"one"}, {name:"two"}]; ...

javascriptangularjs

Is your Angular2 form page experiencing reloading issues?

I am currently incorporating Angular2 into my project. I am facing an issue where the page keeps refreshing, and I'm unable to determine the cause. Below is a snippet of my form: <form> <div class="form-group"> ...

javascripttypescriptangular2-forms

Differences Between Using WebDriver click() and JavaScript click()

The Scenario: Within the realms of StackOverflow, instances have been observed wherein users encounter difficulties clicking on an element through selenium WebDriver's "click" command. As a solution, they resort to using a JavaScript click by executi ...

javascriptpythonseleniumselenium-webdriverprotractor

The anticipated reply was supposed to consist of an array, however it ended up being an

I'm brand new to Angular and I've been searching for a solution to my issue with no luck. My app is supposed to retrieve data from a MongoDB database and display it to the user. However, I keep getting this error message: Error: [$resource:bad ...

javascriptangularjsnode.jsmongodbsingle-page-application

Combine two or more Firebase Observables

Currently, I am working on creating an Observable using FirebaseObjectObservable. However, before I can accomplish this, I need to query a Firebase list to obtain the key IDs required for the FirebaseObjectObservable. The structure of my data is as follow ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

What is the best way to determine the width of a div within a window that has been rendered using React?

I'm working on a task where I need to determine the size of a div (with CSS width set to 100%) and adjust the zoom factor of a component based on this size. The challenge arises during the initial run of the application when the div has not yet been c ...

javascriptreactjs

Efficiently refresh several DIV elements with a single JSON request

After extensive searching, I've come to the conclusion that due to my limited proficiency in javascript, I need some help. The issue at hand is with a json format output produced by an ASP page on a separate webserver, which looks something like this: ...

javascriptjqueryjson

Enhancing vanilla HTML elements with custom props using React

const handleSelectChange = (e) => { console.log(e.target.getAttribute('id')); }; return ( <div> <select onChange={(e) => handleSelectChange(e)}> <option value="1-10" id=&qu ...

javascriptreactjs

A distinct handler function designed for a dynamically generated form

I have 3 MaterialUI TextFields that are rendered n number of times based on user input (stored in a variable named groupMembersCount) in a functional ReactJS component using the useState hook: const [groupDetails, setGroupDetails] = React.useState([ { ...

javascriptreactjsmaterial-uireact-hooksreact-functional-component

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

javascriptreactjsgatsbybulma

Managing simultaneous access to a variable in NodeJS: Best practices

For instance: var i = 0; while(true) http.request('a url', callback_f); function **callback_f**(){ **i++**; } In this straightforward scenario, multiple requests could unintentionally increase the value of i simultaneously. How can I creat ...

javascriptnode.jsconcurrencythread-safety

When you click anywhere on the page, JavaScript's method __dopostback is triggered

I'm encountering an issue in my asp.net application where I have an html table. Specifically, when a user clicks on a td element within the table, I use JavaScript to store the id of that td element in a hidden field. Afterwards, I trigger __dopostbac ...

javascriptjqueryhtmlcssasp.net

Column on the far right of the grid with a frozen position

I need to design an Angular grid where the last column remains frozen. This frozen column should display the summation of all row values, and the last row should be editable. I am able to create the Angular grid itself, but I am struggling with how to stru ...

javascriptangularjshtmlcss

Forcing the Empty Table message in jQuery DataTables post an AJAX request

My configuration for jquery-datatables includes a custom search filter that acts as both the standard keyword filter and a specific Item ID search using an ajax call to retrieve a value from the back end, which is then used to search a particular column in ...

javascriptjqueryajaxdatatable

Error encountered when importing components in VueJS due to module not found

Currently, I am facing an issue with my app where I'm loading components using <router-view/>. The specific problem arises when importing the components in router.js, as it consistently gives me this error: These relative modules were not foun ...

vue.jsvue-componentvue-router