Using ngrok to test your Facebook oAuth callbacks
I'm working on an Angular app that uses AWS Cognito for Federated Identity. Federated Identity has many other names such as "single sign-on" or "oAuth" and one of the strategies I'm working on is integration with Facebook.
In order to use Facebook's product Facebook Login, you will need to complete an application form that also requires your oAuth redirects to be secure HTTPS. If you don't, you'll see an error like this.
Creating an SSL certificate for your local machine is doable and I provide two links below on how to do it but today I want to show another great tool called ngrok. Ngrok can make it easy for you, Mr/Ms/Mrs. Angular developer, to continue working on your app but also provide an HTTPS URL for Facebook development.
Step 1 - Register Online
Create an account by visiting https://ngrok.com/.
Step 2 - Download and Install
Option A - Manual Download
You can download the app and place the executable wherever.
Option B - Homebrew
If you're not familiar with Homebrew package manager, here is a quick tutorial.
brew cask install ngrok
Step 3 - Configure Ngrok
Your next step is to provide ngrok with your personalized AuthToken. You can find your personal AuthToken here => https://dashboard.ngrok.com/auth.
./ngrok authtoken <Visit https://dashboard.ngrok.com/auth>
This command will store your auth token in
Step 4 - Start Ngrok
This is probably the trickiest part of the entire process.
ngrok http -bind-tls=true --host-header="localhost:80" 4200
-bind-tls=true will force Ngrok to only give you an HTTPS version.
Since Angular apps are typically developed on port 4200, this parameter
--host-header="localhost:80" 4200 creates a port forward which essentially masks the port. I mostly do this for aesthetic reasons.
- Pretty URL:
- Ugly URL:
If you're curious about
/auth/facebook/callback. I simply made this up. I borrowed this naming convention from my old days working with PassportJS.
Step 5 - Done
If your terminal console looks something like this, then you're done. You can now visit your dashboard.
- Dashboard http://localhost:4040/inspect/http.