Setting up Sign in with Twitter using Keycloak

Kaiwalya Koparkar -

Hey everyone, in this blog we will be setting up the "Sign in with Twitter" 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 "Twitter-Auth". Click on "Create" to create a new realm. Next, navigate to the Identity Providers section as shown below.

From the Social section menu, select Twitter to create a new Facebook identity provider integration.

This selection opens the configuration page for Twitter as an identity provider. Here, Keycloak will provide fields to input your Client ID and Client Secret, which you will obtain from Twitter shortly. You’ll also see a Redirect URI on this page – copy it, as it’s required when registering Keycloak with Twitter.

Having this Redirect URI is essential; it allows Twitter 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 Twitter when configuring the app settings in the developer console.

Register a New App on Twitter

To enable Twitter login, you’ll need to register Keycloak as an OAuth application on the Twitter Developer Portal.

  • Sign in to the Twitter Developer Portal and create a new app and head over and click on Set up to use this app for authentication purposes.
  • In the App settings, provide details like the App Name and Website URL.
  • Under Authentication Settings > App info, add the Redirect URI you copied from Keycloak’s setup page. This will be used to redirect users back to Keycloak upon successful login through Twitter.
  • Choose the necessary Permissions for your app, such as Read access to public information.

Once you complete the setup, click Create to register the application.

Obtain API Key and API Secret Key

After the app is registered, Twitter will generate an API Key and an API Secret Key for your new application. These credentials are essential for Keycloak to securely communicate with Twitter’s authentication system. Copy both the API Key and API Secret Key, as you’ll need them in the next step.

Enter Twitter Credentials in Keycloak

Return to Keycloak and paste the API Key and API Secret Key into the respective fields on the Twitter identity provider configuration page. Save the changes to finalize the integration. Once saved, Keycloak will recognize Twitter as a valid identity provider, allowing users to authenticate using their Twitter accounts.

Additional Configuration: Setting the First Login Flow

To make the first login experience smoother, scroll down in the Twitter provider settings until you find the First Login Flow option. If it’s not set to First Broker Login by default, switch it to this option. This ensures that users logging in for the first time with Twitter go through the appropriate login and account linking process.

Checking Your New Sign-In Option

With everything configured, go to the login URL specific to your new realm. You should now see an option to Sign in with Twitter. Test the integration by logging in with a Twitter account to confirm that the setup is functioning as expected.

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👋