Problem in intiating keycloak in Angular +17 (standalone) #32427

Skanderlass · 2024-08-27T14:07:45Z

Skanderlass
Aug 27, 2024

Hi folks!

In order to explore keyclaok i've integrated keycloak with traditional angular (with ngModule) everything works fine.
I tried with Angular standalone I faced initialzing keyclaok issues i followed the official docs.
-> https://www.npmjs.com/package/keycloak-angular

versions:
Angular CLI: 17.3.8
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

My attempt

main.ts
`import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);
`

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

import { routes } from './app.routes';
import { KeycloakService, KeycloakBearerInterceptor } from 'keycloak-angular';
import {
HTTP_INTERCEPTORS,
provideHttpClient,
withInterceptorsFromDi,
} from '@angular/common/http';
import { initializeKeycloak } from './init/init.factory';

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
KeycloakService,
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
multi: true,
deps: [KeycloakService],
},
{
provide: HTTP_INTERCEPTORS,
useClass: KeycloakBearerInterceptor,
multi: true,
},
provideHttpClient(
withInterceptorsFromDi() // tell httpClient to use interceptors from DI
),
],
};
`

initate keyclaok
`import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService) {
return () => {
keycloak.init({
config: {
url: 'http://localhost:8080',
realm: 'api',
clientId: 'api-sk',
},
initOptions: {
onLoad: 'check-sso',
silentCheckSsoRedirectUri:
window.location.origin + '/assets/silent-check-sso.html',
},
});
};
}
`

-- Guards
`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);
console.log('🍾');
}

public async isAccessAllowed(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
const keycloakInstance = this.keycloak.getKeycloakInstance();
console.log('🍉');
return new Promise((resolve) => {
keycloakInstance. (authenticated) => {
console.log('🥝[authenticated out]:', authenticated);
if (!authenticated) {
console.log('🥝[authenticated]:', authenticated);
console.log(
'🥝[redirectUri]:',
this.keycloak.login({
redirectUri: window.location.origin + state.url,
})
);
await this.keycloak.login({
redirectUri: window.location.origin + state.url,
});
resolve(false);
return;
}

    // Get the roles required from the route.
    const requiredRoles: Array<string> = [];

    // Allow the user to to proceed if no additional roles are required to access the route.
    // noinspection SuspiciousTypeOfGuard
    if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
      resolve(true);
      return;
    }

    // Allow the user to proceed if all the required roles are present.
    resolve(requiredRoles.every((role) => this.roles.includes(role)));
  };
});

}
}
`

-- routes
`export const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: '404', component: AppComponent },

{ path: '**', redirectTo: '404' },
];
`

I got token response with success

I got two main issues
Issue 1

here is my keyclaok config

best regards

codespearhead · 2024-10-15T17:25:23Z

codespearhead
Oct 15, 2024

Please close this discussion [1] and reach out to the third-party library's vendor for support [2], after trying out this tutorial [3].

[1] https://docs.github.com/en/discussions/managing-discussions-for-your-community/managing-discussions#closing-a-discussion
[2] https://github.com/mauriciovigolo/keycloak-angular
[3] https://medium.hexadefence.com/securing-an-angular-app-using-keycloak-bf48c5401246

0 replies

Skanderlass · 2024-10-15T20:58:17Z

Skanderlass
Oct 15, 2024
Author

I issue was mismatch between angular and keycloak version

2 replies

codespearhead Oct 15, 2024

Could you close this discussion [1], so it no longer appears as unanswered in the GitHub discussions tab?

[1] https://docs.github.com/en/discussions/managing-discussions-for-your-community/managing-discussions#closing-a-discussion

yyoussef11 Dec 21, 2024

I have been struggling for some days with the same issue, eventually this thread caught my attention that it could be a versions issues.

make sure the npm packages have compatible versions: keycloak-angular & keycloak-js should be compatible with each others and to the Angular version

Refer to this : https://www.npmjs.com/package/keycloak-angular

Skanderlass · 2024-10-15T20:58:26Z

Skanderlass
Oct 15, 2024
Author

thank

3 replies

ayoub-salfi Jun 3, 2025

do you solving the problemes ?

ayoub-salfi Jun 3, 2025

I have the same problemes help me please

8000

ayoub-salfi Jun 3, 2025

{
"name": "keycloaki-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.12",
"@angular/common": "^17.3.12",
"@angular/compiler": "^17.3.12",
"@angular/core": "^17.3.12",
"@angular/forms": "^17.3.12",
"@angular/platform-browser": "^17.3.12",
"@angular/platform-browser-dynamic": "^17.3.12",
"@angular/router": "^17.3.12",
"keycloak-angular": "^15.2.0",
"keycloak-js": "^21.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.17",
"@angular/cli": "~17.3.17",
"@angular/compiler-cli": "^17.3.12",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~5.4.5"
}
}

Navigation Menu

Repository navigation

Problem in intiating keycloak in Angular +17 (standalone) #32427

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 5 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Problem in intiating keycloak in Angular +17 (standalone) #32427

Uh oh!

Uh oh!

Skanderlass Aug 27, 2024

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err) ); `

Replies: 3 comments · 5 replies

Uh oh!

codespearhead Oct 15, 2024

Uh oh!

Skanderlass Oct 15, 2024 Author

Uh oh!

codespearhead Oct 15, 2024

Uh oh!

yyoussef11 Dec 21, 2024

Uh oh!

Skanderlass Oct 15, 2024 Author

Uh oh!

ayoub-salfi Jun 3, 2025

Uh oh!

ayoub-salfi Jun 3, 2025

Uh oh!

ayoub-salfi Jun 3, 2025

Skanderlass
Aug 27, 2024

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);
`

Replies: 3 comments 5 replies

codespearhead
Oct 15, 2024

Skanderlass
Oct 15, 2024
Author

Skanderlass
Oct 15, 2024
Author