Secure Your angular & spring boot application using keycloak
By: Hamdi Bouallegue
Tags: Angular, Spring Boot, Keycloak, Spring, Security

1. What is a keycloak?

Keycloak it’s an open-source Identity and Access Management. This means he manages security from all its aspects. It is really a powerful tool, and I enjoyed using it.

2. Install keycloak:

There are many ways to install keycloak (docker image, standalone server, or helm chart….). In our case, we will use the standalone server.

https://www.keycloak.org/downloads

after unzipping the file and depending on your Operating system, start the server by double-clicking the standalone.bat for windows or standalone.sh for Linux.

Navigate to http://localhost:8080/auth.

Click on the Administration console:

Notes: for the first time keycloak will ask you to create a user.

3. Create a realm:

Realm is equivalent to a tenant. This means a group of isolated applications and users.

after adding the realm name, click the create button.

4. Integrate keycloak with Angular:

Firstly, creates a new angular project :

ng new keycloak-demo

After creating the project, let’s install some dependencies :

npm install keycloak-angular - save

npm install keycloak-js - save

Now we need to create a new client inside the keycloak Administration console:

Be sure that the Access Type is set to public.

When Access Type is set to public, this means that keycloak will protect this client by the default login page shipped with keycloak.

To fix the CORS issue add a proxy.config.js file on the top level:

Now update package.json and change the start command to :

"start": "ng serve --proxy-config proxy.conf.json",

Next update the environment.ts file :

Let’s create new directory utils inside the src folder and create app-init.ts file inside the utils folder:

And now update the app.module.ts :

And now let’s create a Guard to protect our routes:

For now, we need to create some components :

ng g c access-denied

ng g c admin

ng g c manager

Add some paths:

Now update the app.component.ts|html to create a log out button and some links:

5. Integrate keycloak with Spring boot:

Create a spring boot application:

https://start.spring.io/

Dependencies: Spring Web, and Spring Boot DevTools.

After downloading and unzipping the project, add these dependencies:

keycloak-spring-boot-starter and keycloak-adapter-bom.

See pom.xml below:

Now let’s create a new client come back to the keycloak Administration console:

Root URL: the root URL of your backend.

Change the Access Type to the bearer only because the backend needs only the bearer token sent by keycloak after signing from the front end (angular app).

Now let’s add some properties, open the app.properties file, and paste this code:

To retrieve the keycloak.credentials.secret :

Click on the client after that click on the client name in our case demo-spring-boot and then credentials.

Now create a RestController:

for the SenderResponse it’s a simple POJO :

6. Create roles and users inside keycloak:

We will create 2 users and 2 roles:

Go to the Administration console and click on the client:

choose demo-spring-boot client:

and then the role tab:

Create two roles ROLE_ADMIN and ROLE_MANAGER

Now let’s create two users, one with the role ROLE_ADMIN and the other with ROLE_MANAGER:

change Temporary to OFF, if it is ON keycloak will force you to change the password after your first login.

Next click on the Role Mapping tab:

Note: add the ROLE_ADMIN from the Client Roles

Repeat the same steps, to create another user but with the role ROLE_MANAGER.

7. Let’s test the app:

Navigate to http://localhost:4200/

You will see the keycloak login page:

login using the admin account and navigate to http://localhost:4200/admin:

Now navigate to the manager page http://localhost:4200/manager:

=> you see keycloak redirects the app to the access-denied page because the user doesn’t have the role manager.

8. Last word:

Keycloak is a powerful tool that helps to manage security easily.

You can find the code from Github:

frontend:

backend:

Useful links:

https://www.keycloak.org/docs/latest/server_development/#_themes

https://www.keycloak.org/getting-started

If you enjoyed this article, please clap it up 👏 and share it so that others can find it! Follow me to get more of me 😄.