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.