Keycloak in Angular Application

These are the requirements to perform the integration of Keycloak in an application in angular.

1. Install Node.js

Node.js is an open-source server environment that uses JavaScript on the server. We have to install LTS version as it’s recommended for most users. At this time latest LTS Version: 17.8.0 (includes npm 8.5.5).

curl -sL https://deb.nodesource.com/setup_17.x | sudo -E bash -
sudo apt install -y nodejs

Latest Node.js LTS version information can be found on the Node.js website.

2. Install npm

Normally, NPM will be installed with the Node.js itself. However, we can update it to the latest version using the below command.

sudo npm install npm@latest-g

3. Install the Angular CLI and other component packages

Here we’re using sudo to avoid any permission issues that may occur.

sudo npm install @angular/cli
sudo npm install @angular-devkit/architect
sudo npm install @angular-devkit/build-angular
sudo npm install @angular-devkit/core
sudo npm install @angular-devkit/schematics
sudo npm install @schematics/angular
sudo npm install rxjs
sudo npm install typescripts

4. Create the workspace of my application

sudo ng new mi-aplicacion

install keycloak libraries and packages in my angular project, we enter our directory mi-aplicacion

cd mi-aplicacion

we install our keycloak-angular and keycloak-js libraries and packages

sudo npm install keycloak-angular keycloak-js

In the example, we will configure keycloak to use silent-check-sso-redirect-uri. With this feature enabled, your browser will not perform a full redirect to the Keycloak server and back to your application, instead this action will be performed in a hidden iframe, so your application resources only need to be loaded and parsed once per the browser when the app initializes and not again after Keycloak’s redirect to your app.

To ensure that Keycloak can communicate through the iframe, you will need to provide static HTML from your application at the location provided in silentCheckSsoRedirectUri.

Create a file called verify-sso.html in your application’s assets directory and paste the content as shown below:

../src/assets/verify-sso.html

Verify that the app-routing.module.ts file is created in the ..src/app directory

At this point we can do a build of our project to check for any misconfigurations regarding keycloak-js, If when compiling it presents the following allowSyntheticDefaultImport error.

Then we must proceed to solve it by updating the following tsconfig.ts file

modify tsconfig.json file and add in compilerOptions “allowSyntheticDefaultImports”: true

5. we do the compilation, Build

ng build

At this point in the development and configuration of the project, the following output should be thrown in your console.

6. create client mi-aplicacion-angular in Keycloak

now comes the interesting part, we are clear that at least you have the keycloak server already installed and configured… as a prerequisite to be able to continue with this development example, I will skip the installation of keycloak… I will only show the part of how to create and configure the client within the keycloak admin console.

first you need to create the client in keycloak

then configure the client

configuring the client in keycloak

then press the save button, and we already have our client configured in the Keycloak tool… so we proceed to return to our mi-aplicacion project in Angular to throw the code in the following Angular Components.

7. modify app.module.ts

create function initialize keycloak, In this part we must configure the keycloak configuration of the client that we already made in previous steps, such as specifying the url of the keycloak server, the realm and clientId

../src/app/app.module.ts

By default to authenticate you need to call the login function. However, there are two options available to make the adapter automatically authenticate. You can pass login-required or check-sso to the init function. login-required will authenticate the client if the user is logged-in to {project_name} or display the login page if not. check-sso will only authenticate the client if the user is already logged-in, if the user is not logged-in the browser will be redirected back to the application and remain unauthenticated.

You can configure a silent check-sso option. With this feature enabled, your browser won’t do a full redirect to the {project_name} server and back to your application, but this action will be performed in a hidden iframe, so your application resources only need to be loaded and parsed once by the browser when the app is initialized and not again after the redirect back from {project_name} to your app. This is particularly useful in case of SPAs (Single Page Applications).

To enable the silent check-sso, you have to provide a silentCheckSsoRedirectUri attribute in the init method. This URI needs to be a valid endpoint in the application (and of course it must be configured as a valid redirect for the client in the {project_name} Admin Console):

finally we perform the following imports in the @NgModule AppRoutingModule, KeycloakAngularModule and its keycloakService dependencies

8. modify, app.componet.ts

here we modify our component to our convenience and we put some logic of our business, for example we ask if the user is logged in “isLogueado” session and if he started, then ask keycloak to return the user profile “profilUsuario” and we create two public methods where it returns us the login “iniciarSession” and the logout “cerrarSesion”