Updates to Facebook Login | Enforcing HTTPS

Facebook recently enforced the use of HTTPS URLs for all apps, even while in development
mode. This comes at a time when Facebook is strengthening its infrastructure and data
access policies to prevent data theft and scenarios like the Cambridge Analytica situation.

This also means that we’ll have to make some changes to ChatCat to ensure it works as
expected. You may have encountered an ‘Invalid Login’ error at the end of the last lecture.
To avoid that, just follow the instructions below.

1. When we deploy ChatCat to Heroku, later in this section, you will get an HTTPS URL,
but while we’re in development, you’ll need your app to be accessible via a valid
HTTPS URL for Facebook to accept it as a valid OAuth Redirect URI. To quickly get an
HTTPS URL, we’ll use a utility called ngrok. So, go to https://ngrok.com and signup
for a free account.

2. Once logged in, go to https://ngrok.com/download and download and unarchive

ngrok for your operating system. Place the ngrok executable in a folder from where
you can access it.

3. On your ngrok.com dashboard (once you register and sign in, go to

https://dashboard.ngrok.com/auth), you’ll get your Tunnel Authtoken. Copy this and
run ./ngrok authtoken <your authtoken> on the command line. This will add your
account’s authtoken to the ngrok.yml file for later use.

4. With ChatCat running on port 3000 as usual, run ./ngrok http 3000
The above command opens a tunnel between the outside world and your app
running locally on port 3000.

5. Notice the https URL (Forwarding). This is a free to use publicly accessible HTTPS URL
that we can use on Facebook. But before that, you should note here that everytime
you exit/restart the ngrok utility (free account), it will generate a new random
http/https forwarding URI. This is important because you’ll have to change this URI
wherever you’re using it. Ngrok also offers a $5/mo paid service where you can
 reserve URIs so they don’t change at every instance.

Now, in your app/config/development.json file, set your callbackURL property to

reflect this new ngrok URL as shown below. Note that your URL will be unique.

You’ll also notice a new property called “enableProof”: true . This causes Passport to
add the appsecret_proof parameter in requests to Facebook. In a nutshell, this
prevents malicious entities from using your tokens and getting access to data from
Facebook.

6. On the Facebook developer dashboard, for your app, you’ll have to key in the ngrok
generated https uri in the following places:
a. Settings > Basic : In the App Domains box, key in your ngrok https uri such as
https://f9e0daaf.ngrok.io/

b. Settings > Basic : Under the Website section, for Site URL, key in your ngrok
https uri such as https://f9e0daaf.ngrok.io/

c. Facebook Login > Settings : In the Valid OAuth Redirect URIs box, key in the
complete https redirect URI such as
https://f9e0daaf.ngrok.io/auth/facebook/callback

7. This should get your app up and running. Do remember, ngrok generates a unique
URI if you have a free account and every time you run ngrok, you’ll have to update
the URI in all the above places for your app to work correctly.

I hope you found the above process useful in getting ChatCat working. If you run into any
problems, please write to me directly on mailme@sachinbhatnagar.com