31

I know there are about a hundred questions of this on SO, but none of them are maybe up-to-date with what seems to be happening on facebook platform right now. It seems the switch that turns off SSL is disabled:

enter image description here

It may be hard to see, but the "Enforce HTTPS" toggle is greyed out and can't be toggled. I'm all for enforcing HTTPS in production, but is everyone who is building against facebook API really setting up an SSL certificate on their local server just for this?

quinn
  • 5,508
  • 10
  • 34
  • 54
  • 2
    For anyone still looking, creating a Test App is the solution, as described here https://stackoverflow.com/a/57607570/238864 – absk Feb 08 '21 at 05:05

5 Answers5

16

You will still be able to use HTTP with “localhost” addresses, but only while your app is still in development mode.

You can change the App mode to Development Mode from App Dashboard:

enter image description here

In this mode you can only test your application with Facebook test user accounts. You can obtain the test accounts login credentials from your app dashboard.

Please note, http://localhost redirects are automatically allowed while in development mode only and do NOT need to be added in Valid OAuth Redirect URIs section.

Read more about it in this Facebook Blog.

Iman Sedighi
  • 7,624
  • 4
  • 48
  • 55
  • 2
    I'm fairly certain I tried this. I am using localhost, but I had to create a fake certificate and add it to my OS's trusted certs, because it would not work without https on localhost. – quinn Jan 18 '19 at 14:44
  • @quinn I tested it and it works without need of any certificate. – Iman Sedighi Jan 18 '19 at 19:43
  • Did you have any different settings than the one in my screenshot? – quinn Jan 27 '19 at 02:25
  • When it is in development mode I could turn off Enforce HTTPS option. Then I could add HTTP URLs to the valid URI section – Iman Sedighi Jan 27 '19 at 17:30
  • @quinn how did you solve this, i'm dealing with the same issue? – james emanon Feb 21 '19 at 23:57
  • @jamesemanon I edited my answer to make it clear to how to use Facebook APP with localhost. Also add a Facebook blog link which says the same! – Iman Sedighi Feb 22 '19 at 02:04
  • 7
    my website is using the app in development mode, but it is still not working. I am getting this error: "FB.getLoginStatus will soon stop working when called from http pages." – james emanon Feb 22 '19 at 02:46
  • Also, I am using an alias for my domain. so its not localhost:3000, but rather: showcase.james.com (I have redirects in my apache2 files), whould that cause issue? – james emanon Feb 22 '19 at 02:50
  • @ImanSedighi i am also trying FB login in my localhost and also set app mode to development...but getting this error "cannot load URL: The domain of this URL isn't included in the app domains.To be able to load this URL, add all domains and sub-domains of your app to the app Domains field in your app settings." – arunoday singh Jun 22 '20 at 08:08
  • @ImanSedighi:sir status:Development Mode option not showing.can you tell me why its not showing? – Kapil Soni Sep 28 '20 at 10:33
  • 4
    this answer needs an update, facebook will ONLY allow https, regardless if its localhost and in development mode. – Bas Oct 30 '20 at 18:24
13

2021 update: Facebook do not allow localhost over HTTP any more. You will need to get your site working locally over HTTPS for testing. This is despite their blog post and the literal Facebook developer console assuring you that they allow localhost over HTTP by default.

jonsploder
  • 307
  • 2
  • 8
  • 4
    Oh my god. 2hr+ of my life wasted thanks Facebook. – iuliu.net Jun 29 '22 at 18:01
  • 2
    Is there any post or documentation about this? As you mention, the settings still say that localhost "works" in development mode. – ericgio Aug 26 '22 at 20:04
  • Yup, at least more than half a day wasted here. Their documentation doesn't make this clear at all and plenty of the tutorials are not up to date with this. – wobbily_col Jul 11 '23 at 08:11
  • @ergico it isn't clear at all. The main hint is that the "Client OAuth settings" has "enforce https" set to true and you can't unset it. – wobbily_col Jul 11 '23 at 08:14
6

paste this in your client json
"start": "set HTTPS=true&&react-scripts start",

next copy and enter this in your url bar .
chrome://flags/#allow-insecure-localhost,
and set Allow invalid certificates for resources loaded from localhost to enabled

bigbounty
  • 16,526
  • 5
  • 37
  • 65
Dawid Łychoński
  • 61
  • 1
  • 2
6

The most simple way to test your facebook login, since you cannot dissable anymore "Enforce HTTPS" option, is to use ngrok:

ngrok.com

Im linux user. After installing it just type at your terminal:

ngrok http 80

and automaticly will be created a new https domain just for your local project. You will see an ui interface in your terminal and your secure domain will be that who starts with https://

Copy the domain and use it in developers.facebook.com in your app to see if you code is good or not.

If is good its ok keep going until you will host your project on a secure domain.

For more info and docs about ngrok.com see: ngrok docs

Marinario Agalliu
  • 989
  • 10
  • 25
-3

This setting requires HTTPS for OAuth Redirects, and it requires and Facebook JavaScript SDK calls that return or require an access token are only from HTTPS pages. All new apps created as of March 2018 have this setting on by default, and you should plan to migrate any existing apps to use only HTTPS URLs by October 6, 2018.

Most major cloud application hosts provide free and automatic configuration of TLS certificates for your applications. If you self-host your app or your hosting service doesn't offer HTTPS by default, you can obtain a free certificate for your domain(s) from Let's Encrypt.

https://developers.facebook.com/docs/facebook-login/security

Landa
  • 34
  • 7
  • 6
    I am aware of how to use a vps provider and certbot. The question clearly says “localhost”. I ended up generating a self-signed cert for “localhost”, adding that to nginx locally, reverse proxying to my app, and finally adding that certificate to my OS X keychain. It works, but that process seems rediculous to me for local development. – quinn Oct 11 '18 at 13:03
  • 2
    if it solved the original problem you could add it as a self answer and mark it as answered so it will help others. – Landa Oct 11 '18 at 13:12
  • 2
    I was feeling this same pain, I ended up using https://ngrok.com to tunnel my localhost to an https public endpoint – delux247 Jan 05 '19 at 04:31