One of the strong points in favour of Keycloak adoption is the fact that you can setup social signin for your application with a few clicks, no coding requirements needed. Keycloak supports out-of-the box an extensive list of social networks: Google, Github, Facebook, Linkedin, Microsoft, Twitter and many other providers. It’s even flexible enough to support the integration of any OpenId Connect or SAML 2.0 provider.
In this post I am going to show you how you can configure a Sign-in with Google functionality.
The process requires three steps:
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.
The first time you start Keycloak you will be automatically redirected to the Master realm, which is a Realm with “special powers” and higher privileges. It’s recommended for any installation to create a new realm instead of using the Master realm. Let’s start with the right foot and create one.
Login to your Keycloak admin interface and point your mouse on the left column, over the word Master. A dropdown menu will appear, click the Add realm button.
Add a name to the new realm, for this example we will use GoogleAuth. Then click on Create.
Now click on Identity providers on the left column and select Google between the available providers.
In the new page that appears note of the Redirect URI, we will need it later when we setup the Google Application. It should be something like
https://YOUR_KEYCLOAK_DOMAIN/auth/realms/YOUR_REALM_NAME/broker/google/endpoint
Keep this page open in a tab of your browser, we will move to Google for a while but we will continue on Keycloak in the last step of this guide.
Head to this page, login with your Google Account and you will see the Google Developers Console. This is where you configure the Google APIs for your project.
The Google Developer Console is quite intimidating at first but we just need to perform a few steps.
Click on the dropdown near the Google APIs logo:
Then click on New Project.
In the following form provide a name and an organization, then click on Create.
You will be redirected to a page similar to the one in the following screenshot:
Click on Explore and enable APIs and you will be redirected to the following page, click on Credentials.
Now the Google Developers Console remembers us that we need to Configure the consent screen. This is a mandatory step for our integration and it basically configure what our users will see when we redirect them to Google for signing in.
Let’s do it now, click on that button.
Select External if we want to allow any Google account to sign in to our application. Then click on Create.
We will be redirected to a page with many settings, fill them as follows:
Then click on Save at the end of the page.
Now click again on Credentials.
Click on Create Credentials.
Then on OAuth client ID.
Select Web Application as the type of your application, add a name for your application and into the Authorised redirect URIs field add the URL you saved at the end of the first step of this guide. It should be something like:
https://YOUR_KEYCLOAK_DOMAIN/auth/realms/YOUR_REALM_NAME/broker/google/endpoint
You will get now a set of credentials, Client ID and Client Secret.
Take note of Client ID and Client Secret, you will need them while setting up Keycloak in the last part of this guide.
Move back to Keycloak and add the Client ID and Client secret in the page we left at the end of the first step of this guide. Then click on Save.
We are done. Now whenever you want to login with a Keycloak configured client you will find the option to login with Google.
If you enjoyed this article signup to the KeycloakThemes newsletter below.