Overview
Adding a Login with Facebook button to FusionAuth is simple, and this guide will walk you through the steps necessary to collect the credentials from Facebook in order to enable this Social login.
Once you have completed this configuration you will be able to enable the Facebook login button for one or more FusionAuth Applications. Below is an example login page with the Facebook Identity Provider enabled.
Create a Facebook Account
If you do not yet have a Facebook account, go ahead and do that first. If you need help with this step, ask your kids.
Add a Facebook Application
In order to enable the Login with Facebook option in FusionAuth we’ll need to add a Facebook application. Follow the provided link or navigate to your Facebook developer account to continue.
Create a new App Id
Click on the Add a new App button to create a new Facebook application. The application Display Name will be shown to users when they log into FusionAuth using Facebook. Complete this form and click the Create App ID button.
Configure Facebook Login
In order to enable Facebook login for this newly created Application, add the Facebook Login product to this application. The Add a Product is likely the first page you’ll see after creating the Application, but if not find the Products + or Add Product section and find the Facebook Login tile and click Set Up.
You’ll now have the Facebook Login product listed under the Products section of your application. Click on the Settings sub-menu of the Facebook Login section in the left navigation. Review this page to ensure it meets your security requirements, however the default Client OAuth Settings should be sufficient.
Collect App ID and App Secret
To complete the configuration you will need to collect the App ID and the App Secret to use in the FusionAuth configuration. To find these values, navigate to in the left navigation.
You can either record these values now, or keep this page open so you can copy and paste these values during the next step in FusionAuth.
Add the top level domain of your application in the App Domains field, in this example I have added piedpiper.com because my application login will originate from https://login.piedpiper.com.
Note that status of this application shows OFF, to make this application public you will need to change the status which will require a few other settings that Facebook will prompt you to complete. However you may use this application to login while in this state.
Create a Facebook Identity Provider
The last step will be to create a Facebook Identity Provider in FusionAuth. To create an Identity Provider navigate to and click Add provider and select Facebook from the dialog.
This will take you to the Add Facebook panel, and you’ll fill out the App Id and App Secret required fields using the values from the Facebook console. The button text is also required but it will be defaulted to Login with Facebook, you may optionally modify this default value.
To enable this identity provider for an application, find your application name in the Applications configuration section at the bottom of this panel. You will always see the FusionAuth application, this application represents the FusionAuth user interface. If you wish to be able to log into FusionAuth with this provider you may enable this application.
In the following screenshot you will see that we have enabled this login provider for the Piped Piper application and enabled Create registration. Enabling create registration means that a user does not need to be manually registered for the application prior to using this login provider.
For example, when a new user attempts to log into Piped Piper using Facebook, if their user does not exist in FusionAuth it will be created dynamically, and if the Create registration toggle has been enabled, the user will also be registered for Piped Piper and assigned any default roles assigned by the application.
If you do not wish to automatically provision a user for this Application when logging in with Facebook, leave Create registration off and you will need to manually register a user for this application before they may complete login with Facebook.
That’s it, now the Login with Facebook button will show up on the login page for Pied Piper.
App Id Required |
The Facebook App ID found in your Facebook application settings in the |
App secret Required |
The Facebook App Secret found in your Facebook application settings in the |
Button text Required |
The text to be displayed in the button on the login form. This value is defaulted to |
Fields Optional defaults to |
This optional field defines the fields you’re requesting from the user during login. See the Facebook login documentation for further information.
If this field is omitted it will be defaulted to
You may want to request additional fields such as name and birthday. Here is an example to request multiple fields: |
Permissions Optional |
This optional field defines the permissions you’re requesting from the user during login. See the Facebook login documentation for further information. |