Integrate keycloak with angular

[vasgr1998]

how to integrate keycloak with ngx-admin (nebular)

 

[Phro0244]

Integrating Keycloak with ngx-admin (nebular) involves a few steps. Here is a general outline of what you need to do:

1. Install the Keycloak module in your ngx-admin application using npm. You can do this by running the following command in your terminal:

npm install keycloak-angular [email protected]

1. Next, import the KeycloakAngularModule into your application module:

import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';

@NgModule({
  imports: [KeycloakAngularModule, ...],
  ...
})
export class AppModule {
  constructor(private keycloak: KeycloakService) {}
}

1. In your app.component.ts file, initialize Keycloak:

import { KeycloakService } from 'keycloak-angular';

export class AppComponent {
  constructor(private keycloakService: KeycloakService) {
    this.keycloakService.init({
      config: {
        url: 'https://<your-keycloak-server>/auth',
        realm: 'your-realm',
        clientId: 'your-client-id',
      },
      initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false
      },
      bearerExcludedUrls: []
    });
  }
}

1. Once Keycloak is initialized, you can use it to authenticate users and retrieve their access tokens. You can add KeycloakGuard to your routing module to secure your application:

import { KeycloakGuard } from 'keycloak-angular';

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
    canActivate: [KeycloakGuard],
    children: [
      ...
    ],
  },
  { path: '**', redirectTo: 'pages/dashboard' },
];

1. Finally, you can use the keycloak.authenticated flag to check if the user is authenticated and the keycloak.getToken() method to retrieve their access token:

2. import { KeycloakService } from 'keycloak-angular';
   export class SomeComponent {
     constructor(private keycloakService: KeycloakService) {}
   
     someMethod() {
       if (this.keycloakService.authenticated) {
         const token = this.keycloakService.getToken();
         // Use the token to make authenticated requests
       }
     }
   }

These are the basic steps to integrate Keycloak with ngx-admin (nebular). You may need to adjust the configuration to fit your specific use case.