Angular, Quarkus, Keycloak, Security
By: Catalin Patrut
Tags: Java, Quarkus, Angular, Security, Keycloak

Angular, Quarkus, Keycloak, Security

Small guide of combining the two most used frameworks on the web in a secure manner.

Intro

This will be a small guide on how to tie and use together all the mentioned technologies in one nice end to end web project.

First of all, Angular is now a mature framework that makes use of typescript to develop modern and advanced UI applications. It’s taken care by Google and in the latest releases it came with lots of performance improvements.

Angular doesn’t necessarily require as much learning as other front-end technologies and it distinguish itself from React or Vue by being a framework not a library the can be easily plugged and unplugged.

This sometimes means that you have to write boilerplate code configuration to perform certain tasks and the framework will do it for you. Anyhow, you may use any front-end technology, the concept will still be valid just that there will be more code for you to write I assume.

The concept

The concept is based on the Oauth2 specifications, as well as UMA specifications. While you may go and read them for your own sake they are properly implemented within Keycloak by specialists.

Keycloak is also Opensource, mature, with a clear release cycle, broad documentation and highly used and appreciated by other people and corporations. What it’s important to take from here is that while it can be misused, chances of doing so are fairly low.

Security Concept

1. Angular — Keycloak Integration

If it were for someone to look into everything that Keycloak is capable of, I’d highly recommend their server administration documentation: https://www.keycloak.org/docs/latest/server_admin/#overview.

From there, we’ll make use of the concept of SSO, SSO protocols, as well as Managing Clients, Roles and User Session Management sections.

Secondly, Keycloack comes with a great deal of adapters to support integration with most of the languages & frameworks available on the web. These are small libraries that are very closed to your project implementation.

In the end, depending on the technology and the type of client you are implementing (or resource server configuration) — from oauth2 specs — different oauth2 flows are supported.

For example, when you think about JavaScript clients there are 2 OAuth2 flows supported. However, we’ll see that there is a third option: hybrid. It’s important to keep in mind that the hybrid mode combines best best from the two: refresh token, access token available right away. You may read more about it here.

keycloak-angular

Keycloak angular is a library that makes the integration much easier. It has everything a user might expect from it:

Interceptor to attach the security token on each request. Guard to protect your paths based on roles or any other logic you may find suitable. A service that gives developers access to a security context KeycloakService . An init method were developers may configure certain behavior on application startup.

Installation

npm install keycloak-angular keycloak-js

Configuration

If you are looking to login users before using you applications you shall create a factory method and attached it to your APP_INITIALIZER providers.

Angular Module Configuration

Now every time a user will load the application, it will be first redirect to Keycloak for login and only after that he’ll be able to access the application.

Note that if this is not the behavior you may look for, you can anytime use the keycloakService.login method.

Quarkus Resource Server

The project can be found here. It mostly follows the guide publish by Quarkus about centralized authorization with the central point being the application.properties where the security configuration are put in place.

It’s important to set your correct auth-server-url following the pattern /auth/${realm_name}/${client} as well as the client-id and client-secret.

Consider storing your secret in a environment variable rather then having it hard-coded like me.

Quarkus-Keycloak configuration

Demo

To start up the projects you’ll need docker , docker-compose , npm , angular-cli and java installed.

First we must start keycloak. For this navigate within the keycloak-client and run a docker-compose up -d Secondly, you may want to import the same configuration as I have from https://gitlab.com/blogging4t/keycloak-client/-/blob/develop/realm-export.json . To do this, in Keycloak, navigate to the Import button. Within the keycloak-client run npm install; npm start ; This will start the angular project for you. The quarkus project can be taken from here. To run it, simply execute from the command line mvn clean compile quarkus:dev Navigate to http://localhost:4200. In there the following should be displayed:

Angular app screen

By Clicking show message, depending on what role you have, the application will say either hello admin, or, hello user.

While playing around you might take interest in watching the network tab and checking all the calls that are being done for you to obtain an access_token as well as the fact that all the requests sent contain an Authorization header.

To experiment more, try playing with these if and see what happens if the user is normal and tries to access the admin endpoint:

Last Security Consideration

Use an SSL connection when connecting from a confidential resource server and make sure your certificate is validated. For you angular-client (public client) disable Direct Access Grant from the keycloak adminstration console Make sure to always use encrypted traffic between your services The entire infrastructure is based on signing the JWT’s. From my end this not the best security model and a incremental security pattern should be implemented. For example, the private key may be exposed by one of the organization employees through social engineering. One way to achieve a better security is based on reference tokens where an intermediate service will replace an Opaque token with the access token before accessing the resource server. This entitles that the outside users should be only have access to the opaque tokens. Nevertheless, the community seems to be aware of it and there is a request for this kind of functionality: https://issues.redhat.com/browse/KEYCLOAK-8278.

Best of luck building and securing your APIs!