Testing "Facebook Login" locally

Question

I am trying to locally test my "Continue With Facebook" button. I get this error telling me the URL is invalid. Below is how I have configured my app's OAuth settings. Based on all my research this is configured correctly but something is still wrong.

I am using npm http-server to run a local instance of my site. It is running on localhost:8080

As per the last image, it wont let me add domain such as "http://localhost:8080". It only lets me add "localhost"

Answer 1

If your actual production URL is domain.com then in FB > Settings > App Domains, add the additional URL local.domain.com. Then on your local machine in the /etc/hosts file (or Windows equivalent) add the entry:

127.0.0.1 local.domain.com

In a browser, navigate to local.domain.com and that URL will be served up by your local machine (i.e. localhost). This will keep Facebook Login happy while running a test / development version.

You'll also need to whitelist your machine's IP (in FB > Settings > Advanced > Security > Server IP Whitelist) and add an additional http://local.domain.com/callback (in FB > Facebook login > Settings > Valid OAuth redirect URIs).