Working with Facebook login from localhost

Question

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

Answer 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

Answer 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.

Answer 3

Disclaimer: This answer was written in 2019 and I have not been able to keep up with the latest changes introduced by Facebook, this is here for reference purposes.

---

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

1. Make sure your application is in development mode

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

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

4. Make sure you have entered localhost in your site url

Answer 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.