Keycloak Integration : Part 2: Integration with Angular Frontend

Sairam Krish

3 min readAug 9, 2018

Logo courtesy keycloak.org and Angular.io

Keycloak is an Open Source Identity and Access Management For Modern Applications and Services.

In this series, other articles

Acceptance Criteria

From angular, when user is not logged In, user should be taken to Keycloak Login page.
After login, user should be taken back to angular app
From access token, angular app should be able to know user roles, controls routes which are accessible based on roles
Angular app should be able to get user attributes (dynamic key value pairs) that are associated with the User.

Pre-requisites (Keycloak side)

Understand the core concepts and terminologies of keycloak. This will help in understanding the below steps
Create a realm
Create an OpenId connect client
In client settings, Set Valid Redirect URL to point to Angular app
In client settings, Set Web Origin to point to Angular app
To connect Angular app with Keycloak, we are going to use a client Id and Client secret. So in the client settings, set Access type as “confidential”
Generate client Id and client secret. Make a note of this client Id and client secret — This will be added to angular app
Create Users
Create Roles at a realm level or at a client level based on your application needs. Both will be available, when a user logs in.
If we need to group level abstraction for users., Create Group and Make the users member of the desired group

Pre-requisites (angular side)

Add npm dependency — keycloak-angular.
To src/environments/environment.ts make equivalent changes, like below

sample environment.ts

User log in flow

We could use a CanActivate angular directive to control access to specific paths based on user roles
KeycloakAuthGuard provides a base implementation of it, which is available from keycloak-angular dependency
Let’s extend KeycloakAuthGuard

Let’s update our angular routing module, like this

After the above changes, if we try to visit the paths that has CanActivate and if the user is not logged in, user will be taken to login page. This happens because of Valid Redirect URL and WebOrigin that we configured in the client settings in Keycloak

Fetching User Attributes and Group Attributes

User Attributes are very useful to handle dynamic key value pairs associated for each user. Groups can also have attributes. Any user who belongs to the Group inherits those attributes.

There are many ways to fetch user attributes. I personally prefer, it they stay in token, so applications can decode the JWT token and get the attributes.

To do this, we need a Protocol Mapper — that can map keycloak information into a OpenId Connect token. The documentation doesn’t have a good example of User Attribute mapping. Here is a good example

To read the token at the angular side, here is a code sample:

Debugging Tokens details issued by Keycloak

There are times, when we need to dive deep and understand the content of the token. This happens when we configure user in Keycloak expected something but actual behavior is different (like Authorization flow)