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",

src/app/app.component.ts

@@ -6,6 +6,7 @@ import {RouterOutlet} from '@angular/router';
   selector: 'app-root',
   imports: [CommonModule, RouterOutlet],
   templateUrl: './app.component.html',
+  standalone: true,
   styleUrl: './app.component.css'
 })
 export class AppComponent {

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

@@ -8,6 +8,7 @@ import {Employee} from "../Employee";
   selector: 'app-employee-list',
   imports: [CommonModule],
   templateUrl: './employee-list.component.html',
+  standalone: true,
   styleUrl: './employee-list.component.css'
 })
 export class EmployeeListComponent {

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;
   }
 }