Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://

Question

I am implementing Passport Facebook Authentication by linking the Facebook Authentication API route to a button using href like:

<a href="auth/facebook">Facebook Login</a>

When I click on the button, it redirects to the Facebook Authentication page. But on the page, an error message is displayed saying something like "Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://"

How can I fix this issue?

if you have created your facebook app after March 2018, now you are forced to use Https only, however, I'm still unclear about localhost. Anyway, it should fairly easy to generate an SSL for your localhost. — Majid, Mar 21 '18 at 20:19
this may help you: https://stackoverflow.com/questions/49358800/insecure-login-error-while-login-with-facebook-php — Hetal Chauhan, Apr 06 '18 at 11:57
If you are on localhost you can use ngrok to foward your localhost to https on the web — ricks, Jun 27 '18 at 00:42

score 20 · Answer 1 · edited Mar 27 '18 at 10:14

20

Amazingly I just started trying to do the same thing like an hour ago and have been having the same issue. If you go into the FB developer portal and go to Settings under Facebook Login there's an option to Enforce HTTPS.

Further Investigation Showed:

"Enforce HTTPS. This setting requires HTTPS for OAuth Redirects and pages getting access tokens with the JavaScript SDK. 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 March 2019. 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."

Reference: Login Security

edited Mar 27 '18 at 10:14

Turnip

35,836
15
89
111

answered Mar 22 '18 at 02:27

Christopher

209
1
3

2

Here is the page provided by Let's Encrypt regarding certificates for a localhost: https://letsencrypt.org/docs/certificates-for-localhost/ – Christopher Mar 22 '18 at 02:39
19

How can I use facebook login in localhost – PranavPinarayi Mar 29 '18 at 07:08
2

And the button is disabled (March 2018). You're forced to use HTTPS under any circumstances. [My answer](https://stackoverflow.com/questions/49553138/how-to-make-browser-trust-localhost-ssl-certificate/49553299#49553299) will help you set up SSL certificate for localhost. Or your custom domain. – x-yuri Mar 29 '18 at 11:40
@PranavPinarayi have you solved this problem about using facebook login in localhost? – trungducng Jun 15 '18 at 11:13

Kurt Van den Branden · Answer 2 · 2018-11-20T18:32:55.687

Since you're using passport, also check your auth.js settings, or where ever you keep these settings. Even if your website has a certificate, the following code will still fail:

'facebookAuth' : {
  'clientID'      : '.............', // App ID
  'clientSecret'  : '............................', // App Secret
  'callbackURL'   : 'localhost:9999/auth/facebook/callback',
  'profileURL'    : 'https://graph.facebook.com/v2.5/me?fields=first_name,last_name,email',
  'profileFields' : ['id', 'email', 'name'] 
},

The problem lies with the callbackUrl.

'callbackURL'   : '/auth/facebook/callback'
'callbackURL'   : 'http://localhost:9999/auth/facebook/callback'

The statements above will both fail. The callbackUrl needs to start with https. The first one will try to load http://localhost and append the callbackUrl. The second one obiviously loads the full url with http, and both fail to connect with FB. So try one of the following. If your site has a certificate, provide the full url. If you're testing this on a localhost, create your own certificate and access it by https like:

'callbackURL'   : 'https://example.com/auth/facebook/callback'
'callbackURL'   : 'https://localhost:9999/auth/facebook/callback'

score 3 · Answer 3 · answered Apr 03 '18 at 17:40

3

Since Facebook have been requiring usage of HTTPS for our redirect URIs we can use ngrok at localhost for start up a local secure HTTP tunnel. It is a clean and fast suggested alternative for now.

Get official ngrok package
Unzip to your preferred directory unzip /opt/ngrok.zip;
Make your first HTTP tunnel: /opt/ngrok http 3000

See more great use cases in ngrok docs.

answered Apr 03 '18 at 17:40

Lindoélio Lázaro

909
7
7

Thanks Lindoélio. I like this solution, but couldn't get it to work. I created a tunnel to http 3001, and then took the URL that ngrok produced, https://c5c35cb6.ngrok.io and put it in my redirect uri's, but I'm still getting the same error. Any other ideas? – Karim Varela Dec 12 '18 at 20:56
EDIT: Okay, it works if I go to the ngrok url (e.g. https://c5c35cb6.ngrok.io). However, my site is so slow it's barely usable ... – Karim Varela Dec 12 '18 at 21:06

score 3 · Answer 4 · answered Sep 27 '18 at 16:00

There are 2 ways you can solve that: First: You can go to your google Passport strategy and add proxy: true

    passport.use(
  new FacebookStrategy(
    {
      clientID: facebookID,
      clientSecret: facebookSecret,
      callbackURL: "/auth/facebook/callback",
      proxy: true
    }
  )
);

What happens most of the time is that, when you deploy or app through Heroku, for example, they have a Proxy that allows Heroku to direct the requests to your specific server and Passport assumes that if your request goes through a proxy it might not be safe (So... No https). The second way you can solve that is by using a specific path for your callbackURL. For example, instead of using:

callbackURL: "/auth/facebook/callback"

you would use:

callbackURL: https://mydomain/auth/facebook/callback

Keep in mind that if you are going to use this approach you might need to create environment variables to hold the values of your specific redirectURL for development as well as for production.

Thanks. This saved a lot of headache, still working in 2023, I was deploying on fly.io — r_dmr, Aug 08 '23 at 01:50

score 1 · Answer 5 · answered Apr 16 '18 at 05:26

To fix, for local development, generate ssl certs on your machine. Run the commands below(tested on Mac High Sierra, you will need the openssl lib installed on your os) to create a cert.pem and a key.pem file in your working directory.

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

openssl rsa -in keytmp.pem -out key.pem

Change your node http server to use https. You will need to import the https module in place of the http module.

const https = require('https')
const path = require('path')
const fs = require('fs')
const options = {
  cert: fs.readFileSync(path.resolve(__dirname, '<path_to_your_cert.pem>')),
  key: fs.readFileSync(path.resolve(__dirname, '<path_to_your_key.pem>'))
}
const server = https.createServer(options, <your_handler_or_app_eg_express>)
server.listen(<your_prefered_port_number>)

Go to the app on your facebook developer console and set the Valid OAuth Redirect URIs to the https version of your localhost domain. Do same for the app domain and site url.

score 0 · Answer 6 · edited Mar 30 '18 at 22:24

0

In my case, I modified my package.json file.

"start": "node scripts/start.js" => 
"start": "set HTTPS=true&&node scripts/start.js"

I hope help you.

edited Mar 30 '18 at 22:24

amin saffar

1,953
3
22
34

answered Mar 30 '18 at 15:31

joe1220

1
1

score 0 · Answer 7 · answered Apr 11 '18 at 15:06

This for php sdk reference

Now https is required for the web-application to login via Facebook.

Following procedure is required get valid authentication from Facebook.

Basic Seetings

set App Domains as your root domain (www.example.com)
Privacy Policy URL (https://www.example.com/privacy-demo/)
Terms of Service URL (https://www.example.com/terms-demo/)
Set Category
Site URL (https://www.example.com/facebook-login/) facebook-login this folder contain my all facebook login files

Advanced
Server IP Whitelist (your host ip address 124.25.48.36)

Products below Facebook login settings

Valid OAuth Redirect URIs (https://www.example.com/facebook-login/fb-callback.php)

Quick start

Select website put site url (https://www.example.com/facebook-login/)

Save all changes and live your app (ie: on your app) Now your app status will live.

You can refer this code https://github.com/facebook/php-graph-sdk

What would you suggest for http? – Rasna Shakya Jul 19 '18 at 09:56 — Rasna Shakya, Jul 19 '18 at 09:56

score 0 · Answer 8 · answered May 04 '18 at 03:40

0

use a vpn worked for me cyber ghost is free try it

answered May 04 '18 at 03:40

Scott Seiber

1

score 0 · Answer 9 · answered May 12 '18 at 11:54

0

In your passport setting change your redirect url to some https://someUrl 'https' is important

answered May 12 '18 at 11:54

Anand Sharma

53
10

Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://

9 Answers9

Linked

Related