Easy Keycloak setup for Angular applications.
This library helps you to use keycloak-js in Angular applications providing the following features:
- A Keycloak Service which wraps the
keycloak-jsmethods to be used in Angular, giving extra functionalities to the original functions and adding new methods to make it easier to be consumed by Angular applications.
- Generic AuthGuard implementation, so you can customize your own AuthGuard logic inheriting the authentication logic and the roles load.
- A HttpClient interceptor that adds the authorization header to all HttpClient requests. It is also possible to disable this interceptor or exclude routes from having the authorization header.
- This documentation also assists you to configure the keycloak in your Angular applications and with the client setup in the admin console of your keycloak installation.
Run the following command to install both Keycloak Angular and the official Keycloak client library:
npm install keycloak-angular keycloak-js
keycloak-js is a peer dependency of Keycloak Angular. This change allows greater flexibility of choosing the right version of the Keycloak client version for your project.
|8.x.x||10.x.x||Bugs / New Features|
Choosing the right keycloak-js version
The Keycloak client documentation recommends to use the same version of your Keycloak installation.
In order to make sure Keycloak is initialized when your application is bootstrapped you will have to add an
APP_INITIALIZER provider to your
AppModule. This provider will call the
initializeKeycloak factory function shown below which will set up the Keycloak service so that it can be used in your application.
Use the code provided below as an example and implement it's functionality in your application. In this process ensure that the configuration you are providing matches that of your client as configured in Keycloak.
In the example we have set up Keycloak to use a silent
check-sso. With this feature enabled, your browser will not do 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 by the browser when the app is initialized and not again after the redirect back from Keycloak to your app.
To ensure that Keycloak can communicate through the iframe you will have to serve a static HTML asset from your application at the location provided in
Create a file called
silent-check-sso.html in the
assets directory of your application and paste in the contents as seen below.
A generic AuthGuard,
KeycloakAuthGuard is provided to help you protect authenticated routes in your application. This guard provides you with information to see if the user is logged in and a list of roles from that belong to the user. In your implementation you just need to implement the desired logic to protect your routes.
To write your own implementation extend the
KeycloakAuthGuard class and implement the
isAccessAllowed method. For example the code provided below checks if the user is authenticated and if not the user is requested to sign in. It also checks if the user has the correct roles which could be provided by passing the
roles field into the data of the route.
By default all HttpClient requests will add the Authorization header in the format of: Authorization: Bearer TOKEN.
There is also the possibility to exclude a list of URLs that should not have the authorization header. The excluded list must be provided in the keycloak initialization. For example:
Mauricio Gemelli Vigolo
Raphael Alex Silva Abreu
If you want to contribute to the project, please check out the contributing document.
keycloak-angular is licensed under the MIT license.