Setup Facebook app to test authentication locally (aka, setting up App Domain)

steps.md

Note: I had issues with setting up my Facebook app so authentication would work. I'd receive the error at the bottom, and it took me a while to figure out what was wrong

Here are the steps I took:

• Go to http://developers.facebook.com/, create, and setup your app
• When inside the dashboard, click "Settings"
• Click "Add Platform"
• Choose website (for authentication via the web app)
• Add http://localhost:3000/ as "Site URL" (and "Mobile URL" if necessary)
• Add localhost to "App Domains" above
• Click Save

This fixed the error I kept receiving:

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

Thankyou.

It didn't work for me :(

@vinnyamp, maybe try http://localhost without the portnumber (3000)?

Thank you, this worked for me.

Well I am not able to set up localhost to use Facebook Login today. Sounds like it was common to use localhost in past (maybe still is). Error message says App Domains must match Site URL. App Domain would only permit me to enter "localhost", while Site URL would only accept "http://localhost" and "http://localhost:8000". Please see my 9/3/17 comment below!

@ck9sky Let me know if you have any luck, I have been struggling with this same issue.

kevinforrestkeyes maybe you figured out how to fix. I am able to use a Facebook test app for my localhost. It turns out my real problem was a failed migration in my Django project that made my db unstable. I rebuilt my Django project, redid all migrations, then my Facebook Login worked correctly for localhost. Maybe other Django developers need to consider project rebuilds sometimes.

By the way, here is my my SOCIALACCOUNT_PROVIDERS. The django-allauth docs say 'reauthenticate', but you need to use 'rerequest' to have an automatic login.

SOCIALACCOUNT_PROVIDERS = {
    'facebook': {
        'METHOD': 'oauth2',
        'SCOPE': ['email', 'public_profile'],  # user need not share user_friends     
        'AUTH_PARAMS': {'auth_type': 'rerequest'},  # automatic login after oauth signup done
        'INIT_PARAMS': {'cookie': True},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
        ],
        'EXCHANGE_TOKEN': True,
        'LOCALE_FUNC': lambda request: 'en_US',
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.10',        
    },
    'github':{}
}

This worked for me. Thanks!

I've stuck with enforcing HTTPS enable. No way to disable it. Therefore I can't use https://localhost. Have any ideas how to solve it?

@tuykin let me know if you find a solution, I am having the same problem

Had the same problem,this issue is coming up because facebook recently changed there method .
From now on it is necessary to have https to make the authentication secure.The solution is to add a self signed certifiacte(ssl) to your localhost . I added the cretifiacte but still the connection is refused
[https://stackoverflow.com/questions/49554791/so-i-have-made-a-ssl-certificate-for-my-localhost-but-the-connection-is-refused/49557156#49557156] with this link you can see how i created the ssl certificate and the error i am facing.
If you guys find any other solution do share.

I've used ngrok now, works for my symfony project.

@silenzium can you please explain further how you acomplished this? plz! I've been stuck in this for DAYS now...

./ngronk http 3000 take the generated https url (like 'http://d75ebac2.ngrok.io') and add it in the oauth-url("Valid OAuth Redirect URIs").

I'm having the same problem to use https in local. Ngrok domains don't work for Facebook unless you pay for it and get a subdomain with the app name.

@SiroDiaz it's working fine ngrok. You can use the free tier account of ngrok. The only thing you need to care about is sub-domain which is changed every time you run ./ngrok http 3000.

A BIG NOTE FOR YOU GUYS: MUST MAKE YOUR FB APP IN DEVELOPMENT MODE, so you can test with your localhost domain :)
Just enter your FB password and check ;) - That's all

Are you sure about that ? It is HTTPS even if I put localhost on Facebook login > Settings > Valid URI redirect OAuth...

I simply put https://localhost:8000/ on Facebook login > Settings > Valid URI redirect OAuth and turn my FB APP in development mode and it works.

@akhelij so how did you get https for your localhost??
@vituocgia when I change app to a development mode I can't even run app because I didn't start, Is it really work for you?

Very curious about a solution here! Enforcement of HTTPS makes it hard to work with locally :(

thank you for sharing this

Thank you! You saved me.

so do we need to convert our localhost into https?

This solution worked for me. Trying to add localhost as a "Website" (Platform) in the app settings was being rejected because it didn't match my production domains, which I didn't want to remove.

Even though the message was saying it needed to be among my app domains, it turned out that in

Products -> Facebook Login -> Settings

with Strict Mode enabled, simply adding https://localhost:8000/auth/facebook/callback to the Valid OAuth Redirect URIs allowed me to test the authentication with ssl, locally.

I should probably also note that localhost was already in my "App Domains" in the basic settings (while "https://" and port were being removed when I tried to enter them)

Hi I am still stuck with this issue, Can anyone please help me with this
I have added https://localhost:3000/auth/facebook/secrets to valid OAuth REdirect URIs and undeer app domain i have added link of my localhost http://localhost:3000/auth/facebook/secrets..
But still I am getting error as

This site can’t provide a secure connectionlocalhost sent an invalid response.
Try running Windows Network Diagnostics.
ERR_SSL_PROTOCOL_ERROR

Thank you man

This solution worked for me. Trying to add localhost as a "Website" (Platform) in the app settings was being rejected because it didn't match my production domains, which I didn't want to remove.

Even though the message was saying it needed to be among my app domains, it turned out that in

Products -> Facebook Login -> Settings

with Strict Mode enabled, simply adding https://localhost:8000/auth/facebook/callback to the Valid OAuth Redirect URIs allowed me to test the authentication with ssl, locally.

I should probably also note that localhost was already in my "App Domains" in the basic settings (while "https://" and port were being removed when I tried to enter them)

You Save my life <3