Configure keycloak

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^19.0.4",
     "@angular/platform-browser-dynamic": "^19.0.4",
     "@angular/router": "^19.0.4",
+    "keycloak-angular": "^16.1.0",
     "rxjs": "~7.8.1",
     "tailwind": "4.0.0",
     "tslib": "^2.8.1",
@@ -38,4 +39,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.4"
   }
-}
+}

src/app/app.component.ts

@@ -3,10 +3,11 @@ import {CommonModule} from '@angular/common';
 import {RouterOutlet} from '@angular/router';
 
 @Component({
-    selector: 'app-root',
+  selector: 'app-root',
   imports: [CommonModule, RouterOutlet],
-    templateUrl: './app.component.html',
+  templateUrl: './app.component.html',
-    styleUrl: './app.component.css'
+  standalone: true,
+  styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'lf10StarterNew';

src/app/app.config.ts

@@ -1,10 +1,50 @@
-import { ApplicationConfig } from '@angular/core';
+import {APP_INITIALIZER, ApplicationConfig} from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {provideRouter} from '@angular/router';
+import {KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService} from "keycloak-angular";
+import {routes} from './app.routes';
+import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 
-import { routes } from './app.routes';
+export const initializeKeycloak = (keycloak: KeycloakService) => async () =>
-import {provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
+  keycloak.init({
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+    config: {
+      url: 'https://keycloak.szut.dev/auth',
+      realm: 'szut',
+      clientId: 'employee-management-service-frontend',
+    },
+    loadUserProfileAtStartUp: true,
+    initOptions: {
+      onLoad: 'check-sso',
+      silentCheckSsoRedirectUri:
+        window.location.origin + '/silent-check-sso.html',
+      checkLoginIframe: false,
+      redirectUri: 'http://localhost:4200',
+    },
+  });
+
+
+function initializeApp(keycloak: KeycloakService): () => Promise<boolean> {
+  return () => initializeKeycloak(keycloak)();
+}
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideHttpClient(withInterceptorsFromDi()), provideAnimationsAsync()]
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideAnimationsAsync(),
+    KeycloakAngularModule,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeApp,
+      multi: true,
+      deps: [KeycloakService]
+    },
+    KeycloakService,
+    provideHttpClient(withInterceptorsFromDi()),
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: KeycloakBearerInterceptor,
+      multi: true
+    }
+  ]
 };

src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import {Routes} from '@angular/router';
 import {EmployeeListComponent} from "./employee-list/employee-list.component";
 import {LoginComponent} from "./login/login.component";
-import {AuthGuardService} from "./auth-guard.service";
+import {AuthGuardService} from "./services/auth-guard.service";
 
 export const routes: Routes = [
   {path: 'login', component: LoginComponent},

src/app/employee-list/employee-list.component.ts

@@ -5,10 +5,11 @@ import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {Employee} from "../Employee";
 
 @Component({
-    selector: 'app-employee-list',
+  selector: 'app-employee-list',
-    imports: [CommonModule],
+  imports: [CommonModule],
-    templateUrl: './employee-list.component.html',
+  templateUrl: './employee-list.component.html',
-    styleUrl: './employee-list.component.css'
+  standalone: true,
+  styleUrl: './employee-list.component.css'
 })
 export class EmployeeListComponent {
   bearer = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzM5MTQ5MjgsImlhdCI6MTczMzkxMTMyOCwianRpIjoiMjNhYzMwMmUtYmYxNS00OTRmLWJhYTItNjIzODllYWZkMmZhIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiI2ODdiMTEwYS00NTRjLTQwMzgtYjBkMS1kZDAzZGQ1N2JiNjEiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.E5ir1Z-POpUU_jvTh8CzoMYO74qo_7uQXw7QQBUvXB2_37pT3_tutAq6sM4V5cNBu--fWar5bltlNcOAWd_7Kdb66Qc23i0RR9vPneoSduJAzoD8gtFbx8c7ltNR4pG-c6tdnkGhLLqM621DShaSlH8Shp-Z0-y4Iq3GFdQrAFH1CrRVYlW0qFv1EZsE9BmhW3hJwrR1S2IPiEN6MwhehLflLa_ZgLcF417ocIfK-6gbbRNAwXA-JajFVOZAEVXs-52Ta9Kb_EEQFpRsjXorfflmbizQmgrbhBUB7MTiPYIcRruZSYdfmjcE008PHnut52cTcVYEuOrUCUqY4VmhoQ';

src/app/login/login.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-login',
   imports: [],
   templateUrl: './login.component.html',
+  standalone: true,
   styleUrl: './login.component.css'
 })
 export class LoginComponent {

src/app/services/auth-guard.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
-import {AuthService} from "./services/auth.service";
+import {AuthService} from "./auth.service";
 import {Router} from "@angular/router";
+import {KeycloakService} from "keycloak-angular";
 
 @Injectable({
   providedIn: 'root'

src/app/services/auth.service.ts

@@ -1,10 +1,19 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
+  private keycloakService = inject(KeycloakService);
+
   public isAuthenticated(): boolean {
+    if (this.keycloakService.isLoggedIn()) {
+      return true;
+    }
+
+    this.keycloakService.login();
+
     return false;
   }
 }