Facebook App: localhost no longer works as app domain

I've been writing a game for Facebook using Rails and jQuery. Since I started using the Facebook Javascript SDK, using localhost as an app domain seemed to work just fine. I was able to test my game both locally and on Heroku.

In the past day, it seems that Facebook has made a big update to their developer UI. Now if I add localhost as an app domain, it gives me the following error:

This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains: localhost

My game also now doesn't work locally and I get an error when the Javascript SDK logs in the user:

API Error Code: 191 API Error Description: The specified URL is not owned by the application Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.

This doesn't happen when I deploy my game, since herokuapp.com is considered a valid app domain.

How am I supposed to develop and test my game if I can no longer use localhost or 127.0.0.1?

The protocol seems to keep changing, and the accepted answer didn't work for me today. In case it helps other searchers, this is what did work for me:

• All changes were made on the Settings page under the Basic tab

1.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)

2.) In the box that comes up for the website you just added: Site URL: http://localhost:3000/

3.) In the box above that (Settings => Basic): App Domain: localhost

4.) At the bottom right - click "Save Changes"

5.) Make sure you have the app ID copied and pasted correctly into your code. (The ID is in the first box on that page if you need it again.)

1. Go to your App's settings page in http://developers.facebook.com
2. Click on the dropdown arrow on the top left (next to the name of your app) and click "Create Test App" and give it a name
3. In the Settings > Basic of that new Test App set the App Domains as "localhost"
4. Also set the Website Site URL as "http://localhost:8888" (or whatever port you are using).
5. IMPORTANT: this app has different App ID and App Secret from your online application. So, last step: make sure that you update the code that sits in your localhost with the Test App's App ID and App Secret. On the contrary, the code that sits in the live server should be using the main App's ID and Secret.

You can still test your app without deploying it on a remote sever like heroku. The trick is to update the etc/hosts file this way:

127.0.0.1 mydomain.com

Then on the Facebook App's settings, type [http://] mydomain.com, without the "[" and "]"

It worked for me this way

For everybody who is fidgeting with this in 2017. The interface changed again. I wanted to comment this to the answer but I don't have enough reputation. The localhost url of your app now has to be copied to three places. Currently, (October 26th, 2017) the sequence is:

1.) Click "Settings" in the left menu.

2.) In the center under the first box of options, click "+ Add Platform" and choose "Website" (or whatever is appropriate for your app.)

3.) In the box that comes up for the website you just added copy your localhost site url (f.e. http://localhost:3000/)

4.) In the box above that "App Domain" copy the same URL

5.) At the bottom right - click "Save Changes"

6.) In the left menu under "Products" click "Facebook Login" (or add it via "+ Add Products" if it is not available)

7.) You are now in the Facebook Login settings. Copy the same url to the field "Valid OAuth redirect URIs"

This should work.

Just add localhost as your canvas url or mobile site url, this will allow you to have both localhost and herokuapp.com in your App Domain setting. Then once your app is in production, just remove it.