Hey everyone, in this blog we will be setting up the "Sign in with Facebook" option using Keycloak. We will be using a self-hosted Keycloak instance deployed on Elestio. So, to get started head over to Elestio Dashboard and deploy and login into the Keycloak instance to get started.
Creating New Realm
According to the Keycloak documentation
A realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.
Once you are logged in, head over to the drop-down menu on the top left hand. It is important to notice that there is a realm "Keycloak master" already available. This realm has higher privileges hence it is recommended to create a new realm. Click on "Create realm".
Now add the realm information such as the Realm name. For eg: Here I have given it the name "Social". Click on "Create" to create a new realm. Next, navigate to the Identity Providers section as shown below.
From the Social section menu, select Facebook to create a new Facebook identity provider integration.
This selection opens the configuration page for Facebook as an identity provider. Here, Keycloak will provide fields to input your Client ID and Client Secret, which you will obtain from Facebook shortly. You’ll also see a Redirect URI on this page – copy it, as it’s required when registering Keycloak with Facebook. Having this Redirect URI is essential; it allows Facebook to redirect users back to Keycloak after a successful login attempt, enabling a smooth login experience. This Redirect URI will need to be provided to Facebook when configuring the app settings in the developer console.
Register a New App on the Facebook Developer Console
To allow Facebook login, you’ll need to create a new app on the Facebook Developer Console. Once logged in, find the My Apps menu in the top right, and choose Create App. Facebook frequently updates the Developer Console’s interface, so if the exact steps differ, look for options related to creating a new application.
When adding a new app, select Authenticate and request data from users with Facebook Login as the platform and skip any additional optional steps, and submit to proceed. Once completed, you’ll land on the app’s dashboard, which serves as the primary management hub for all Facebook app settings.
Add a Platform and Configure the Redirect URI
Now, within the app dashboard, select Settings from the left-side menu. Scroll to the end of the page and click on + Add Platform. Choose Website again, as Keycloak will serve as the primary access portal through which users authenticate. In the Site URL field of Facebook’s Website settings, paste the Redirect URI you copied from Keycloak’s Add Identity Provider page. This step ensures that the Facebook app correctly redirects users back to Keycloak after login, finalizing the authentication flow.
Additionally, under Use Case > Settings, confirm that the required fields are filled and that your app category is accurate. This helps ensure that Facebook’s permissions align with the intended use of the app, preventing access issues when Keycloak requests authentication from Facebook.
Make the App Public
Next, you must make the Facebook app public to allow all users to access it. In the left-side menu, select App Review and switch the visibility toggle to Yes. This step is critical without making the app public, only users with developer access can use Facebook to log in, limiting the functionality for end users. Setting the app to public also means that Facebook will enforce any app-specific permissions or guidelines, so ensure that the app settings align with the privacy and data-sharing expectations of your user base.
Retrieve and Add Client Credentials in Keycloak
To finalize the setup, return to the Dashboard in the Facebook Developer Console. Here, you’ll find both the App ID and App Secret. Click Show next to App Secret to make it visible. Copy both the App ID and App Secret.
Then navigate back to Keycloak’s Facebook configuration page and paste them into the respective fields. These credentials allow Keycloak to securely communicate with Facebook and request user information as needed.
Checking Your New Sign-In Option
In the Default Scopes field on Keycloak’s Facebook provider setup page, you can specify any additional permissions (or scopes) that you want Facebook to ask users to approve when logging in. For example, adding permissions like public_profile and email allows access to basic profile information and the user’s email address. By default, Keycloak includes the email scope. For more complex use cases, consult the Facebook Graph API documentation for a comprehensive list of scopes to add based on your app’s needs.
As you do all these above steps correctly you will see Facebook as a login option under your sign in box. Now you can use it to quickly login into your application!
Thanks for reading ❤️
Thank you so much for reading and do check out the resources provided to learn more about the Keycloak. You can click the button below to create your service on Elestio and implement this authentication method. See you in the next one👋