Connect your app to Facebook
This article describes how to add login with Facebook to your app. It also discusses how you can get an Access Token in order to access the Facebook API.
First you need to connect your Auth0 application to Facebook. This is summarized in the following steps:
- Setup a Facebook app
- Get your Facebook App ID and App Secret
- Copy these keys into your Auth0 settings
- Enable the Facebook social connection in Auth0
1. Login to Facebook Developers
Go to Facebook Developers and login with your account. Select Add a New App from the dropdown in the upper right:
2. Name your application
Provide a Display Name and Contact Email.
Next you will need to complete the Security Check.
3. Setup Facebook Login
On the Product Setup page that follows, click Set Up under Facebook Login:
Next choose the type of application, for this tutorial we have selected Web.
The Quickstart for Facebook Login will appear. Under the Facebook Login menu on the left, click on Settings to open the Application OAuth Settings page:
Enter the following URL in the Valid OAuth redirect URIs field:
https://YOUR_AUTH0_DOMAIN/login/callback
Find your Auth0 domain name
If your Auth0 domain name is not shown above, login to the dashboard to find your Tenant Name in the top right corner. Your Auth0 domain is this name (for example exampleco-enterprises) plus .auth0.com. So for this example the Valid OAuth redirect URI would be: https://exampleco-enterprises.auth0.com/login/callback.
Note that if you are using the custom domains feature, your Redirect URI will instead be in the following format: https://<YOUR CUSTOM DOMAIN>/login/callback.
Click Save Changes.
4. Make your App Public
Next, click on App Review on the left navigation bar. Near the top of the page under Make (Your App Name) App public? click to move the slider to Yes.
5. Get your App ID and App Secret
Click Settings in the left nav. On this page you can retrieve your App ID and App Secret.
Click Show to reveal the App Secret (you may be required to re-enter your Facebook password).
In a separate tab or window, go to the Connections > Social section of the Auth0 dashboard.
Click on the box with the Facebook logo.
This will bring up the Facebook connection settings.
Copy the App ID and App Secret from the Settings of your app on Facebook:
Select all the Attributes and Permissions you want to enable.
Then click the Applications tab and select the applications you wish to enable this connection for.
When finished click Save.
6. Test the Connection
In the Connections > Social section of the Auth0 dashboard a TRY icon will now be displayed next to the Facebook logo:
Click TRY.
The Facebook allow access dialog will appear.
Click continue and if configured correctly, you will see the It works!!! page:
7. Access Facebook API
Once you successfully authenticate a user, Facebook includes an Access Token in the user profile it returns to Auth0.
You can then use this token to call their API.
In order to get a Facebook Access Token, you have to retrieve the full user's profile, using the Auth0 Management API, and extract the Access Token from the response. For detailed steps refer to Call an Identity Provider API.
Once you have the token you can call the API, following Facebook's documentation.
Additional Info
You can find additional information at Facebook docs: Add Facebook Login to Your App or Website.
Create a Test App
Facebook now allows you to test your application by creating a copy of it to use for testing purposes. If you create a test application it will have it's own separate App ID and App Secret. Auth0 only allows one Facebook connection to be configured per tenant. One option for testing is that create the connection to the test connection and then change the values when you are ready to connect to the production application.
Another option is to create another Auth0 tenant used for testing purposes. A new tenant can be created in the Dashboard by clicking on your tenant name in the top right corner and selecting + Create Tenant from the dropdown. See the Setting Up Multiple Environments for more information on multiple environments.
On the Facebook Login Client OAuth Settings page, you can also set a Deauthorize Callback URL to be called when a user deauthorizes your app.
Facebook Re-Authentication
To force Facebook to prompt the user to re-authenticate, you can set the prompt='login' value in Lock's auth.param object.