How to setup Sign in with Google using Keycloak

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:

  • Create a new realm on Keycloak
  • Create a Google Application on the Google developers portal
  • Configure Keycloak with the credentials from your Google Application

Create a new realm on Keycloak

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 new realm
Add new realm

Add a name to the new realm, for this example we will use GoogleAuth. Then click on Create.

Create new realm
Create new realm

Now click on Identity providers on the left column and select Google between the available providers.

Select Google identity provider
Select Google identity provider

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.

Create a Google Application

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:

Select project from Google Apis dashboard
Select project from Google Apis dashboard

Then click on New Project.

Create new project on Google Apis
Create new project on Google Apis

In the following form provide a name and an organization, then click on Create.

Choose name and organization
Choose name and organization

You will be redirected to a page similar to the one in the following screenshot:

Project dashboard Google Api
Project dashboard Google Api

Click on Explore and enable APIs and you will be redirected to the following page, click on Credentials.

Click on Credentials
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.

Configure consent screen
Configure consent screen

Select External if we want to allow any Google account to sign in to our application. Then click on Create.

OAuth consent screen
OAuth consent screen

We will be redirected to a page with many settings, fill them as follows:

  • Application type: Public
  • Application name: Your application name (for this example I will use Keycloak Test App)
  • Authorised domains: Your application top level domain name
  • Application Homepage link: Your application homepage
  • Application Privacy Policy link: Your application privacy policy link

Then click on Save at the end of the page.

Now click again on Credentials.

Click on credentials
Click on credentials

Click on Create Credentials.

Create credentials
Create credentials

Then on OAuth client ID.

Create OAuth client ID
Create 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.

Got your credentials!
Got your credentials!

Take note of Client ID and Client Secret, you will need them while setting up Keycloak in the last part of this guide.

Configure Keycloak with the credentials from your Google Application

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.

Configure client id and secret
Configure client id and secret

We are done. Now whenever you want to login with a Keycloak configured client you will find the option to login with Google.

Login with Google
Login with Google

If you enjoyed this article signup to the KeycloakThemes newsletter below.