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?

I found this https://create-react-app.dev/docs/using-https-in-development/ I manage to run https:localhost:3000 and it works with a Facebook app in Live mode — SAndriy, May 22 '20 at 16:20

Dagmar · Answer 1 · 2022-01-28T08:10:58.900

74

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

edited Jan 28 '22 at 08:10

answered Aug 22 '19 at 10:44

Dagmar

2,968
23
27

2

hen entering `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` Facebook is an absolute pain to set up, when it took me 10 minutes for the Google login button. – Jeremy Thille May 05 '20 at 14:43
@JeremyThille I see there is a separate stackoverflow for this problem. See https://stackoverflow.com/questions/44505276/app-domains-must-match-the-domain-of-the-facebook-web-games-url-https-mobile ... I'm unsure how you'd get this error if you followed my instructions (creating your test app from the main app) and changing both the app domain and the site URL. Please check you have done all those – Dagmar May 06 '20 at 07:06
1

I have checked and tried all answers in the link you pointed at. Nothing works. I can save `localhost` both in App domains and website URL, but I'm still getting `The method FB.login can no longer be called from http pages` in my localhost console. There's no way to develop a Facebook login locally, I'll do it directly from the HTTPS production server (thanks Facebook) – Jeremy Thille May 06 '20 at 08:35
1

That sounds frustrating! BTW, it's not "localhost" for the site URL. it should be something like http://localhost:3000/users/auth/facebook - I will change my answer to be more clear in that regard. – Dagmar May 06 '20 at 12:02
Worked like a charm! For those who have issues, make sure that you update the App ID and App Secret in your settings to match those of the test app. – Vlad Oct 08 '20 at 21:51
After trying with loads of other solutions (change site URL, create test app, change callback URL, ...) I finally had to use ngrok to do this. So disappointed to see big tech companies treat developers as second class users. – Mahdi Oct 17 '20 at 08:29
3

@mahdix my experience is that integration with any of the big tech megaliths is a challenge. From outdated documentation to inexplicable processes (caused by various upgrades over time), it's generally a nightmare. I am sorry my answer didn't work for you, but I am glad you found a way in the end with ngrok. – Dagmar Oct 29 '20 at 09:34
@Vlad I would imagine the app ID and secret would only be different if you created the test app manually - not using the steps in my answer, or you manually changed them. Thanks though for commenting and letting us all know about this requirement – Dagmar Oct 29 '20 at 09:38
@Dagmar Actually I followed your steps. Then I noticed that the app ID and secret of the test app were different from those of the live app, so I used them in the test configuration of my Spring Boot app. This way, my app would connect to the test Facebook app in test mode and to the live one in production mode. – Vlad Oct 30 '20 at 19:45
@Dagmar Does it work the same way for Instagram's basic display API on localhost? I would really appreciate your suggestion on this **https://stackoverflow.com/questions/59984334/instagram-basic-display-api-error-invalid-scope-basic-or-invalid-redirect** – Mohit Rane Jan 01 '21 at 07:22
3

I get the error: _"URL Blocked - This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings..."_ (on the FB login page). But I can't add any URL with _localhost_ under "Valid OAuth Redirect URIs" (Facebook Login > Settings) because then it says _"http://localhost redirects are automatically allowed while in development mode only and do not need to be added here."_ Apparently, that's not true, though, so it won't work for me. (Yes, I'm using a FB test app in development mode). – bass-t Jan 26 '22 at 16:19
@bass-t I checked my app's settings (and will add some new screenshots to my answer shortly). I see there is another setting on Facebook login -> Settings called "Redirect URI Validator". Also I do have a URL for "Valid OAuth Redirect URIs" -> https://localhost:3000/users/auth/facebook/callback – Dagmar Jan 28 '22 at 07:53
It seems like the method does not work anymore in 2023, and tunelling is one of the alternatives – chygo May 21 '23 at 07:51
@chygo Thanks for your comment. I just tested my dev (http localhost) environment and I can still log in via Facebook using this same setup – Dagmar May 22 '23 at 08:30
@Dagmar The problem now is, in the "Valid Oauth Request URIs", Facebook does not even allow setting up a localhost url (it will show an error, and "Save changes" button keeps disabled), I am not sure how you could set it up – chygo Jun 01 '23 at 11:41
@chygo I see - I went into my app settings and when I try save I get an error for the "Valid OAuth Redirect URIs" that says "http://localhost redirects are automatically allowed while in development mode only and do not need to be added here.". I created a new test app for my production app and even though I never entered an OAuth Redirect URIs the login worked. I think it just accepts any localhost URI when you're in "Development" mode (a toggle at the top of the dashboard) – Dagmar Jun 02 '23 at 14:43

score 27 · Answer 2 · answered Sep 30 '16 at 21:23

27

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.

answered Sep 30 '16 at 21:23

Harkirat Saluja

7,768
5
47
73

70

Not working for me - it's only accepting HTTPS URLs. – Stefan Falk May 05 '18 at 10:22
5

Then you need to activate HTTPS on your localhost. Here's one guide if you're on macOS or Linux: https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec – Design by Adrian May 20 '18 at 20:18
@DesignbyAdrian even with https on localhost, it still doesn't work. – franckstifler May 21 '18 at 21:39
Login with facebook for my local setup has successfully supported `https` (`https://development.local`) and it is working (via nginx). But the beta version of it that is only using `http` is not working. Still struggling how to make it work. Seems to me facebook login is not possible with http even i did not enforce https on the developer console. – josevoid May 30 '18 at 02:54
For enabling https on localhost (for nginx server only), check this forked gist https://gist.github.com/josephdicdican/c4a9401b11522f07802959305583491c – josevoid May 30 '18 at 03:18
on Facebook developer blog they say `You will still be able to use HTTP with “localhost” addresses, but only while your app is still in development mode. ` https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/ I guess they mean `localhost` not `localhost:3000` or any port – equivalent8 May 20 '19 at 11:33

Hamza Khanzada · Answer 3 · 2022-08-15T15:50:44.650

21

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.

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

edited Aug 15 '22 at 15:50

answered May 01 '19 at 15:50

Hamza Khanzada

1,439
1
22
39

7

Done all that, still getting `The method FB.login can no longer be called from http pages.` What an absolute pain to set up :( – Jeremy Thille May 05 '20 at 14:55
Your site must have SSL configured even locally – Hamza Khanzada May 05 '20 at 14:59
@JeremyThille Did you find a solution to this? I'm facing the exact same issue that you have described. – Nikitha Nadig May 12 '22 at 07:11

score 16 · Answer 4 · answered Jul 14 '19 at 13:13

16

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.

answered Jul 14 '19 at 13:13

Bishwajyoti Roy

1,091
1
14
19

1

What page is this/where is it located? – Andrew Koper May 14 '21 at 19:02
Local host gets added with https after you click save. – Adrian Gonzalez Dec 20 '21 at 17:47
1

Now it fails when I request the FB `access_token`, saying the domain of this URL is not in the domains of the app -- although I whitelisted `localhost` as app domain (in Settings > Basic) - January 2022. – bass-t Jan 26 '22 at 16:47

score 5 · Answer 5 · answered Aug 12 '20 at 07:34

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.

answered Aug 12 '20 at 07:34

Jim Bantanis-Kapirnas

500
8
20

I can't add the ngrok domain to the app domains, I receive this message: https://ibb.co/Z8mmsnv – Dante Calderón Oct 29 '22 at 20:50

score 2 · Answer 6 · answered Nov 20 '19 at 09:40

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)

score 2 · Answer 7 · answered Sep 20 '20 at 05:01

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

score 2 · Answer 8 · answered Dec 20 '21 at 18:01

2

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

answered Dec 20 '21 at 18:01

Adrian Gonzalez

737
1
7
20

Kamil Naja · Answer 9 · 2019-11-03T19:30:44.127

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.

score 0 · Answer 10 · answered Jun 08 '21 at 09:40

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.

score 0 · Answer 11 · answered Oct 01 '22 at 10:02

0

Facebook provide Test App for your current app to get access to localhost environment. Create a test app on facebook https://developers.facebook.com/docs/development/build-and-test/test-apps/

and use the API and Secret to get testing on localhost.

answered Oct 01 '22 at 10:02

Aamir Usmani

53
5

score 0 · Answer 12 · answered Dec 16 '22 at 07:58

I would like to share my experience for anyone who use firebase authentication combine with facebook login. Below solution work for me:

First, set your App Mode is development at https://developers.facebook.com.

Next, when you enable facebook login in Firebase Authentication, firebase will give you a link call OAuth redirect URI, you will have to add this link to the Valid OAuth Redirect URIs field in the setting page of your facebook app (inside tab Facebook Login). This is the most important step.

Finally, you don't need to do anything else. Good luck.

score -2 · Answer 13 · answered Jun 16 '20 at 00:42

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

Working with Facebook login from localhost

13 Answers13

Linked