'Working with Facebook login from localhost

I have a React/Horizon app with facebook login. I am wondering if there is any option to work with facebook login from localhost?

facebook facebook-login

Solution 1:^[1]

There are some other good answers here. However I want to add information about how to create a Test app (as recommended by Facebook).

Go to the page to manage Facebook apps (you, the admin must be logged in): https://developers.facebook.com/apps/

Hover over the block containing your live Facebook app and click on the three dots button that appears on the bottom right corner. Then select Create Test App from the menu.

The test app will be created with a snapshot of your production app's settings. After this, you can independently edit the settings of your test app without affecting your production app.

See the documentation here: https://developers.facebook.com/docs/apps/test-apps/

Regarding the rest of the setup:

keep your app in Development mode
go to Settings -> Basic (left hand menu) and
- enter "localhost" for the App Domain
- change your Site URL to the localhost version (e.g. http://localhost:3000/users/auth/facebook)

Here are some (Jan 2022) screenshots of my test app settings, which I just use for Facebook login.

Settings -> Basic

Settings -> Advanced

Facebook Login -> Settings

Solution 2:^[2]

You need to register as facebook developer and create you app there. Once you have your web app registered you can go to your app and click on add product.

Add Facebook Login. Then enable Web OAuth Login and add your localhost in the textfield below and save, you should be able to access it. Attaching a sample screenshot of my facebook app.

Solution 3:^[3]

So in my case doing the following things worked for me.

Make sure your application is in development mode

Make sure you don't have anything in Valid OAuth Redirect URIs when working from localhost

Make sure you don't have anything in App Domains also

Make sure you have entered localhost in your site url

Solution 4:^[4]

I would like to add an update: July 2019

Facebook now allow localhost automatically in development mode and it is blocked in production mode. All you have to do is turn on development mode in your app settings and you are good to go.

You do not need to add localhost as a redirect URL anymore.

Here you can see the error at the Redirect URLs when I'm trying to add localhost.

Solution 5:^[5]

You can use a tunneling tool like https://ngrok.com/ which is free for at least one instance. Then you can create a test App as already suggested and use the ngrok generated urls in this test app.

Solution 6:^[6]

After test I see that we don't need to setup anything in facebook app (even Site URL don't need to be localhost)

Just need to use https://localhost instead of http://localhost. Then login work and we able to receive response.

Note: If you see SSL warning after you enter https://localhost to browser. Just click on Advance -> Process to ... (unsafe)

Solution 7:^[7]

The method FB.login can no longer be called from http pages.localhost, I get: App domains must match the domain of the Facebook Web Games URL (https), Mobile Site URL, Unity Binary URL, Site URL or Secure Page Tab URL. Please correct at least one of these domains: localhost

Solution 8:^[8]

Using something like local-ssl-proxy is an easy way to solve this.

Solution 9:^[9]

So I also have problem with working with Facebook Login from localhost in React and Express and I got this info: "The method FB.login can no longer be called from http pages". After click login button, app just crashed. My solution to fix this mess, was delete Facebook cookie from this localhost page. After this, I still have this error about http, but I can proceed and test login options.

Other solution is working in incognito mode.

Solution 10:^[10]

I'm using Firebase to log into Facebook and honestly, the easiest thing was to just get your localhost served over HTTPS. I used ssl-serve for it, since I was working on a very basic ESM app with no build tools. But most build pipelines (e.g. Vue's vue-cli, React, etc.) have a CLI option for SSL as well.

What I used:

cd src && npx ssl-serve --ssl --clipless --port 5000 --silent

Then you just accept the self-signed cert ("Advanced" > "Continue" in Chrome/Brave) and you won't need to mess around with swapping the redirect URIs or domains under your Facebook app's config, nor the Facebook App IDs on Firebase.

Solution 11:^[11]

If you're using react and your local server is on http and still getting the error run this in the terminal to start up an https localhost

Windows:
set HTTPS=true&&npm start

Windows Powershel:
($env:HTTPS = "true") -and (npm start)

Linux and macOS (Bash):
HTTPS=true npm start

when it opens in the browser click Advanced and proceed

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Harkirat Saluja
Solution 3	Hamza Khanzada
Solution 4	Bishwajyoti Roy
Solution 5	Jim Bantanis-Kapirnas
Solution 6	Linh
Solution 7	Nahid
Solution 8	Adrian Gonzalez
Solution 9
Solution 10	kano
Solution 11	Andrew Pinon

'Working with Facebook login from localhost

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]