Facebook login on localhost - connection not secure

Question

I am adding a Facebook login to our React project, using Facebook Javascript SDK. I followed this tutorial.

When I click the login button which I added to the page, following error is shown:

Facebook has detected X isn't using a secure connection to transfer information. Until X updates its security settings, you won't be able to use Facebook to log into it.

My app is in development mode, which should mean (according Facebook docs) that localhost redirects are allowed, but it isn't so.

I have also tried adding localhost to Valid OAuth Redirect URIs in Facebook developers page, but it didn't solve the problem.

I have managed to solve the problem partially by using ngrok following this tutorial, but it is very buggy (sometimes doesn't work) and impractical to work with, as I often have to restart whole server and everything.

did you try devcert instead of ngrok? – andyrandy Jul 23 '19 at 06:14 — andyrandy, Jul 23 '19 at 06:14
I tried to implement it unsuccessfully. – druskacik Jul 23 '19 at 11:58 — druskacik, Jul 23 '19 at 11:58

score 14 · Answer 1 · answered Dec 14 '20 at 09:05

14

You should use the 'Create Test App' which will create an test app for an existing live account. The just use the test app's ID on your development.

answered Dec 14 '20 at 09:05

vladCovaliov

4,333
2
43
58

Seems my old test app didn't work, creating a new test app under a live app now works. Not sure if it was a question of creating a new test app, or the way I created it, but this works - thanks! – Janne Enberg Jul 04 '21 at 07:34
as of dec 25th, 2021, this still works (creating new test app under a live app) - maybe should be accepted answer! – Sticky Dec 26 '21 at 00:08

score 5 · Answer 2 · edited Feb 21 '20 at 12:21

5

In case of angular: try to serve your app in secured socket layer true mode facebook is detecting insecure connection

Use the following command: ng serve --ssl true

edited Feb 21 '20 at 12:21

Victor York

1,621
4
20
55

answered Feb 21 '20 at 10:27

Prakash Khadka

153
2
7

Okkano · Answer 3 · 2021-11-17T14:21:55.407

First you need to use a domain name, you can do this in your hosts file

/etc/hosts :

127.0.0.1   test.example.com
255.255.255.255 broadcasthost
::1             localhost

and then you need to update your start script like

package.json:

...
"start": "HTTPS=true react-scripts start"
...

and start your reactjs app with :

npm run start

then you will see your app is running on https://test.example.com and of course you have to add this domain to your facebook app as trusted url

score 2 · Answer 4 · answered Oct 01 '20 at 16:56

2

In React Just do HTTPS=true npm start and it will take care of https on the localhost. The boolean HTTPS=true will be used to tell npm that it needs to start the https connection.

answered Oct 01 '20 at 16:56

SimpleMath

47
5

score 2 · Answer 5 · answered May 21 '21 at 17:06

2

As of today you can't use just http://localhost. I'll suggest to consider services like https://ngrok.com/.

answered May 21 '21 at 17:06

Krasimir

13,306
3
40
55

Source of your statement ? – Cyril Duchon-Doris Jun 19 '21 at 20:46
2

Experience. I spent half a day trying to use localhost and it doesn't worth battling the same problem. – Krasimir Jul 01 '21 at 15:18

score 1 · Answer 6 · answered Oct 23 '19 at 14:09

1

Due security changes on facebook you can only log in from simple HTTP if you disable the https and are in development model on your facebook app, here is an explanatory image

answered Oct 23 '19 at 14:09

Camilo Casadiego

907
3
9
33

10

If we could turn off **Enforce HTTPS** we would just do so! The problem is we can't. Not anymore at least. So therein lies the problem. – Bryan Dimas Oct 26 '19 at 00:24
I think we should be talking about different stuff, because this is the dev flow I usually follow (set my app as development, work locally, the publish again, I just did it this morning), one thing, just disabling enforce does not do the trick, you need to switch to dev mode on facebook, and why you say you CANT disable it? – Camilo Casadiego Oct 29 '19 at 15:22
Because It's forced to "on" and cannot be changed. It is explicitly stated in the doc: 'On October 6, 2018, all apps will be required to use HTTPS.' (https://developers.facebook.com/docs/facebook-login/security/#surfacearea) – Dominik Nov 02 '19 at 14:50
yes, when it's in production, that's why you need to switch to dev mode to be able to run from nonsecure site like localhost, can you show how is your face app configured? – Camilo Casadiego Nov 03 '19 at 01:10
3

Even in dev mode it's forced to "on" and cannot be changed. But btw, the problem for me was a weird Ruby gem-specific problem: I was supposed to set the complete callback URL instead of just the path portion like (`/callback`). – Bryan Dimas Nov 07 '19 at 23:21
This is still an issue - even in Development mode, **Enforce HTTPS** cannot be disabled – kano Jun 08 '21 at 09:04

score 0 · Answer 7 · answered Feb 23 '20 at 11:41

0

I confirm you can use callback http://localhost without SSL when your app is in status "In Development".

I came here because my callback was http://localhost.localdomain, a hack I made in pre-2018 for Facebook auth actually, and it was not working on Chome 78.

answered Feb 23 '20 at 11:41

FredG

712
7
10

Problem is most people cannot turn off 'In Development' – Oliver Dixon Mar 01 '20 at 06:02
1

Well, this "In Development' mode was not designed upfront to be switched back, the same way once your app is in prod, you cannot take it off for test. I've always used two Facebook apps ID, with one purposefully for dev. And my database works well with both. – FredG Mar 02 '20 at 14:42

score 0 · Answer 8 · answered Mar 18 '21 at 06:26

0

I had the same issue, I was using the url http://127.0.0.1 but facebook requires you to use http://localhost instead and this will solve the issue.

answered Mar 18 '21 at 06:26

dexbyte

65
11

score 0 · Answer 9 · answered Oct 13 '21 at 10:42

The only solution that was quick and worked for me is to download the ngrok from here: https://dashboard.ngrok.com/get-started/setup,

Unzip it inside the project. I have a laravel project, so before opening the ngrok, try running php artisan serve command. now open ngrok and type the command ngrok http [http:127.0.01:8000] you will get the output:

Forwarding   http://1cb0-163-47-148-175.ngrok.io ->  http://127.0.0.1:8000                              Forwarding                    
             https://1cb0-163-47-148-175.ngrok.io -> http://127.0.0.1:8000

now change the redirect url of facebook login with https in Valid OAuth Redirect URIs and your service class.

'redirect' => 'https://1cb0-163-47-148-175.ngrok.io/auth/facebook/callback

ps: I have used test app version in a development mode

score -1 · Answer 10 · answered Oct 22 '19 at 20:54

No need to use ngrok or the likes.

Make sure you've specified your development mode Facebook application's app-id in

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{app-id}',
        cookie     : true,                     // Enable cookies to allow the server to access the session.
        xfbml      : true,                     // Parse social plugins on this webpage.
        version    : '{api-version}'           // Use this Graph API version for this call.
    });
...

And restart the server after this update.

Facebook login on localhost - connection not secure

10 Answers10

Linked