How to Secure an Angular App With Keycloak

This is a companion video of my other tutorial available at https://czetsuya-tech.blogspot.com/2019/08/securing-javaee-rest-api-with-keycloak.html.

In this lecture, we will discuss how we can secure a simple Angular app with Keycloak. If you haven’t heard of it yet, Keycloak is an open-source identity and access management solution that we can use to secure our app or API services. Link is provided below.

First, we need to create an Angular app using CLI, please follow the instruction provided in the link below. After that, we should have a project with this folder structure.

[show keycloak-auth project]

Basically, we have an app, assets and environments folders. As well as the index.html, main.ts styles.css files and more.

Notice, that we already added several folders and files in our project like:

• core - contains the ts classes that we will use to secure the project
• pages - as the name implies
• forbidden 
• group-restricted
• home
• not-found
• secured - any authenticated user
• secured-role - secured by role

Before running the app we first need to run the Keycloak server. For this demonstration, we will use a docker installation. See link provided below.

Here’s the command on how to run Keycloak on docker:
>docker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin jboss/keycloak

It means we are making Keycloak accessible via port 8080 with a default username and password admin/admin. It may take a while if this is the first time you will be downloading the Keycloak image.

Now we need to configure Keycloak:

1. Open http://:8080 in your browser and log in (mine is running on another Linux machine).
2. Hover on Master and click Add realm.
3. Select keycloak-auth-realm.json file in the project’s config folder and hit create.
4. In the left menu, hit the import button, select keycloak-auth-users-0.json file and click import. This should create 2 users: 
1. edward/edward - role=AppRole, group=User
2. kerri/kerri - role=AppRole, group=null
5. Click Clients / Frontend and make sure you have the configuration below. In production these properties must be set, otherwise it will become a vulnerability in your system.
1. Valid Redirect URIs=*
2. Web Origins=*

Now we need to run the Angular app by executing the command below inside the project’s folder.
>ng serve

After that, we should be able to open http://localhost:4200. And this initial page is the HomeComponent. Click on the first link and it will ask you to log in. Let’s start with edward/edward. As we can see since edward has role=AppRole and is a member of group=User all pages are accessible.

[open app-routing.module.ts]

If you’re wondering how the path is secured, you can check:

[open auth-guard.service.ts]

We are comparing the roles and the groups of the currently logged user in the routing parameters.

[open keycloak.service.ts]

Now let’s log out and login using the user kerri. As we can see the first link is accessible as kerri is authenticated. Secured by page role is also accessible as kerri has a role AppRole, but the second link is not because kerri is not a member of the group User.

And that’s it for this lecture.

Now for an exercise, I’m leaving you the Call API feature, which calls a secured REST API. Our Angular app is already capable of sending the correct bearer token you just need to configure the API project. The link is provided below.

References:

• https://github.com/czetsuya/keycloak-angular-auth
• https://github.com/czetsuya/keycloak-auth-api
• Known Issues
• https://www.keycloak.org/
• https://cli.angular.io/
• https://hub.docker.com/r/jboss/keycloak