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?

Answer 1

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

Answer 2

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'