Keycloak Integration in Angular Application

What is Keycloak?

• An Open Source Identity and Access Management for Modern Applications and Services.
• One of the opensource implementation of OpenID protocol.
• Simple Identity Layer on top of OAuth2.0 protocol

Why do we need Keycloak in Angular?

• To secure our application from unauthorized access
• To identify who is the user of the application, to show the relevant content & authorized content.

Prerequisites

1. Angular 6/+ Application

Steps to Integrate Keycloak in Angular Application

1. Install Keycloak JS package
   1. npm i --save keycloak-js
2. Install Keycloak Angular package
   1. npm i --save keycloak-angular
3. Keycloak Server Configuration
   1. 
4. Keycloak Initialization
   1. Create a file AppInit.ts in the project src directory

5. Integrating into AppModule (Refer the image below these points)

   1. Import KeycloakAngularModule in AppModule
   2. Register Provider KeyloackService
   3. Register Provider of type APP_INITIALIZER with initializer we defined in AppInit.ts
   4. Register Provider AuthService (You can find the AuthService implementation below)

   AuthService
   
   AppModule
   

6. Guard configuration

   1. Create a Guard ng new g auth
   2. Change the definition of the class as below, notice the extends
   3. Routing Module Configuration, Use the AuthGuard for routes that you want to restrict access, Assign required roles for each route in data attribute, roles parameter as an array.

7. Start the application ng s, then you will have the login screen provided by the Keycloak, log in with the correct user to access your application who has the roles that are assigned in the routing configuration