Keycloak Integration Guide: Enabling Social Login with Multiple Platforms like Google

Last time we saw how to implement custom Keycloak themes and i.e. how it helps to prevent phishing attacks. In this guide, we’ll focus on how to enable social login using Keycloak, with a step-by-step approach to integrating platforms such as Google. Whether you’re looking to simplify authentication or enhance security, this guide will walk you through the essential steps to configure and manage social login in your application.

How does it work

The general idea of social login works is pretty straightforward as a concept: when users access our application, they can choose a social network provider, such as Google or Facebook, for authentication instead of manually defining login and passwords. Then the application sends a login request to the selected platform and once the social network confirms the user’s identity, the user is granted access to the application and is logged in immediately. 

1. The user, who is not yet authenticated, tries to access a protected resource in a client application. Application redirects the browser to Keycloak which acts as the Identity Broker. and then redirects again to one of the Identity Providers.
2. A login page is presented with a list of available identity providers (such as Google, Facebook, etc.) based on the realm’s configuration.
3. The user selects an identity provider and then is redirected to the login page of the selected one, where they can provide their credentials. The identity provider’s setup, including connection properties, has already been configured by the admin via the admin console.
4. Upon successful authentication, the user is redirected back to Keycloak with an authentication response which eventually leads to retrieval of the access token.
5. Keycloak verifies the identity and creates a new user or skips this step if the user already exists.
6. Once Keycloak successfully authenticates the user, it issues its own token to allow access to the protected resource and redirects the user back to the client application.

Key benefits

• Users can sign up and access your application in just a few clicks. Applications could use the profile data instead of having users manually enter this information into forms. This can potentially speed up and streamline the registration process.
• Social login reduces the risk of weak password and offers enhanced security features like multi-factor authentication (MFA).
• In many applications, users often don’t keep their profiles up-to-date. However, they typically ensure their information is current on their social network. So after implementing social login, we can assume that the user data we collected is reliable, as it pulls information directly from their frequently updated social profiles.
• Social network providers often offer additional user data, such as location, interests and other beyond just basic profile information. By using this we can deliver personalized content to users more effectively. This allows for more targeted interactions and content recommendations.
• The social network provider is often responsible for verifying the user’s email address. If the provider shares this information, you receive a valid email address rather than potentially fake ones that users might use when registering on web applications. Furthermore, the provider also manages the password recovery process, reducing the need for your application to handle these aspects, which simplifies user management.

The numbers generally show an improvement in conversion, and in some cases, very significant increases. In an article prepared by the Auth0 marketing team, it is stated that social login can increase registration rates by up to 50%*.

Our experience with the development of DocsQuality allows us to believe in the validity of these assumptions. After implementing social media login, we observed a several-fold increase in the number of new users.

Potential drawbacks

When considering social login methods in Keycloak, it’s important to weigh their potential drawbacks, which have led to a noticeable decline in their use recently. Here are some key concerns:

•  Although relatively rare, there’s a risk that a social login could become a single point of failure. If a user’s social media credentials are compromised, it could potentially give hackers access to your platform and any associated accounts.
• Users often worry about how social media platforms handle their data. This concern can make them reluctant to grant additional apps access to their information, leading to decreased adoption of social login features.
• Social login protocols like OpenID Connect are open and interoperable but can be challenging to implement. Even experienced developers may find integrating these standards into their applications time-consuming and complex.  

To address security concerns, it’s important to promote good social media security practices among users. Encouraging strong, unique passwords and two-factor authentication for social media accounts can help mitigate these risks and enhance the security of social login methods. Fortunately, this last one is largely addressed by Keycloak, which simplifies the implementation of these protocols. Therefore, in our example, we’ll focus on utilizing Keycloak to streamline the social login process.

Adding social login

For this example, we will use the application we prepared in the previous blog post where we customize the themes. The initial view looks like this:

Now you can log in to one of the identity provider consoles, like GitHub in this case.

Navigate to Settings -> Developer settings -> OAuth Apps. Click New OAuth App and fill out the necessary information:

• Application Name
• Homepage URL
• Authorization callback URL

The last one should be in the format <your-keycloak-domain>/auth/realms/<your-realm>/broker/github/endpoint. For testing purposes, we will try to do just local setup using 4200 and 8080 ports. Once the form is completed, click Register Application. GitHub will generate a Client ID and Client Secret.

Now go to the Keycloak admin console. In the realm, navigate to Identity Providers from the left menu. From the Add provider dropdown, select GitHub.

Paste the Client ID and Client Secret you received from GitHub. If needed, select additional options, such as storing the tokens issued by the provider (for example, for making further calls to resources that accept this token), automatically verifying email addresses, or initiating a specific authentication flow after successful login. After enabling the social provider in the console, the login page should look like this:

After clicking the GitHub button we should see a standard OAuth authorization request (this way social providers like GitHub can mark this app as a verified one and automatically allow your further login attempts).

After approving the authorization, we should be redirected to the application.

Conclusion

We walked through the entire process of registering an identity provider in Keycloak, and as you can see, it is quite simple. It’s also a great starting point for further learning OAuth protocol features, handling custom identity providers or providing Single Sign-On (SSO) solutions, which we will possibly explore in the next posts.

This approach not only simplifies the registration process and enhances security but also provides a consistent and manageable way to connect with various platforms. Although each provider may have specific configuration nuances, the overall setup process remains straightforward and largely similar across different websites. By reducing the barriers to entry for users and handling authentication efficiently and in a modern way, Keycloak enables a smoother and more secure user experience.