28

I am working on a Rails 4 app. On my laptop, development is done at localhost:3000. The actual domain of the site is roomidex.com.

How can I set up a Facebook app so it works on production and development?

Here is the current configuration:

App Domains: roomidex.com

Website With Facebook Login: 
Site URL: http://www.roomidex.com

When I try to do a Facebook login on localhost:3000, I get this not surprising error:

{
   "error": {
      "message": "Invalid redirect_uri: Given URL is not allowed by the Application configuration.",
      "type": "OAuthException",
      "code": 191
   }
}
JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Don P
  • 60,113
  • 114
  • 300
  • 432

8 Answers8

58

On the Facebook App page, click "edit App" then click "Advanced" in the left-hand navigation. Then for "Valid OAuth redirect URIs" add http://localhost:3000... or whatever you want the accepted redirect to be.

Don P
  • 60,113
  • 114
  • 300
  • 432
  • 7
    Facebook recently changed their UI so this answer doesn't seem valid anymore. Do you know what to do for the new UI? – Thinking Sites May 12 '14 at 13:57
  • Worked for me: create new app -> go to Advanced and paste http://localhost:3000 under "Valid OAuth redirect URIs" – pastullo Jun 16 '14 at 12:11
  • 5
    FYI - just wanted to add that Facebook has Test App support now, so you can have one production app, create a test app from that, and individually manage OAuth redirect URIs (don't forget to use the test app credentials, of course). This gives you better control and does not open localhost to your production App – Michael Oct 29 '14 at 22:09
  • 4
    New layout location to get here is under the Settings (left nav) then Advanced (top, middle of page) – AaronM Jun 11 '15 at 10:23
  • 3
    For me it was under the "Facebook Login" in the left-hand menu, under the "Products" heading. – Julian K Mar 03 '17 at 22:57
8

You can create a test app that's connected to your main app. On the Dashboard or Settings page for your main app. scroll down and you'll see "Test Apps" in the menu that runs down the left side of the page. The test app will inherit settings from the main app, but it will permanently be in development mode, and it will have its own ID.

More info on test apps here: https://developers.facebook.com/docs/apps/test-apps/

The protocol for setting up an app to work on localhost has changed. After you get your test app set up, this explains the steps for setting it up to work on localhost:

https://stackoverflow.com/a/24253054/2803458

Community
  • 1
  • 1
Taylor714
  • 2,876
  • 1
  • 15
  • 16
4

Your error is saying

localhost URL is not allowed in the application

I know, FB does not give a s**t about explaining, what do to in those moments, however, as far as I am concerned, I have found workaround.

Basically, you need to "whitelist" locahost url in your app

Here is what you are going to do

  1. Go to the app edit/summary page
  2. In the fourth field App Domains, you should already have roomidex.com, so add another address localhost
  3. The urls mentioned above are only valid, if each one of them is put into tabs, where you set, how you app integrates with Facebook (website with facebook login, App on facebook, Mobile web, …)
  4. I do this: I put my working URL, in your case roomidex.com into Website with facebook login, and my test, localhost URL, either into App on facebook or Page tab
Ivan Hanák
  • 2,214
  • 1
  • 16
  • 25
1

June 2015

Go to My Apps > Settings > Basic

App Domains

  • localhost

Site Web

It didn't work with port 80 or without any port unfortunately.

Cadene
  • 57
  • 1
  • 9
0

Adding localhost to the Valid OAuth redirect URIs in the test app did not work for me but adding 127.0.0.1 did.

user937284
  • 2,454
  • 6
  • 25
  • 29
0

Facebook now requires "Valid OAuth redirect URIs" to be https.

To use https locally (localhost:3000), I used [ngrok][1] which allows you to use https by providing a tunnel. To do this:

  1. I went to their website and downloaded their program
  2. I extracted the file for the program
  3. In my console, I went into the directory where ngrok was extracted to and entered 'grok http 3000' on my Windows machine, others may use './grok http 3000'
  4. After entering that, ngrok provided a https address which I put into the Valid OAuth Redirect URIs field in Facebook
  5. Then I started my server and was able to access it using that https address instead of localhost:3000
yellowreign
  • 3,528
  • 8
  • 43
  • 80
-1

Just create two applications.

One for testing and one for release. You cannot supply the app with separate URL configurations.

phwd
  • 19,975
  • 5
  • 50
  • 78
  • Isn't that a lot of extra work? Is there a good reason FB does not allow you to add localhost in the same app? – Don P Jan 03 '14 at 19:22
  • 1
    Facebook allows "Test Apps." First create a production/release app, and then create a child of that app for testing and other purposes. https://developers.facebook.com/docs/apps/test-apps/ – jkdev Jul 09 '14 at 02:14
-4

Just edit your hosts file with your domain that pointing to localhost and it should work fine.

Yaniv Vova Alterman
  • 1,660
  • 1
  • 13
  • 11