Keycloak: Angular 17 app logs out whenever I refresh the page

[dileepgireesh51]

versions :

keycloak-angular: ^15.3.0, keycloak-js: ^23.0.7, angular : 17.3.8

I'm facing an issue in my Angular 17 application integrated with Keycloak for authentication. The application is using keycloak-angular and keycloak-js libraries to manage authentication and protect routes via a custom AuthGuard extending KeycloakAuthGuard. The login flow works correctly initially, but whenever a user refreshes the page, they are unexpectedly redirected to the Keycloak login page, despite having a valid token stored in local storage.

Can someone please let me know what might be causing this issue?

Angular cli - 17.3.8 Node.js - v18.16.0 keycloak-angular: "^15.3.0", keycloak-js: "^23.0.7",

Can someone please let me know what might be causing this issue? is it angular code or keycloak configuration?

keycloak.init.ts:

import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService) { return async () => { await keycloak.init({ config: { url: 'https://p.ai/keycloak/auth', realm: 'realm', clientId: 'frontend', }, initOptions: { onLoad: 'check-sso', checkLoginIframe: false, }, enableBearerInterceptor: true, bearerExcludedUrls: ['/assets'], }); }; }

appconfig.ts:

import { APP_INITIALIZER, ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router';

import { routes } from './app.routes'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { hitlInterceptor } from './core/interceptors/hitl.interceptor'; import { provideToastr } from 'ngx-toastr'; import { KeycloakService } from 'keycloak-angular'; import { AuthService } from './core/services/auth.service'; import { initializeKeycloak } from './core/keycloak_init/keycloak-init.factory';

export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), provideHttpClient(withInterceptors([hitlInterceptor])), provideAnimationsAsync(), provideToastr(), { provide: APP_INITIALIZER, useFactory: initializeKeycloak, multi: true, deps: [KeycloakService], }, AuthService, KeycloakService, ], }; auth guard:

import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, } from '@angular/router'; import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';

@Injectable({ providedIn: 'root', }) export class authGuard extends KeycloakAuthGuard { constructor( protected override readonly router: Router, protected readonly keycloak: KeycloakService ) { super(router, keycloak); }

public async isAccessAllowed( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) { if (!this.authenticated) { await this.keycloak.login({ redirectUri: window.location.origin + state.url, }); } // return true; // Get the roles required from the route. const requiredRoles = route.data['roles']; // Allow the user to proceed if no additional roles are required to access the route. if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) { return true; } // Allow the user to proceed if all the required roles are present. return requiredRoles.every((role) => this.roles.includes(role)); } }

Can someone please let me know what might be causing this issue? is it angular code or keycloak configuration?

[Frederickl78]

Same here.