Configuration
Creating a config
You can create a config by using type KeycloakConfig.
To configure the http property, adhere to ngx-http docs.
Take the following code as an example:
import { KeycloakConfig } from "@ogs-gmbh/ngx-keycloak";
const config: KeycloakConfig = {
http: {
// HTTP config
},
keycloak: {
// Keycloak config
}
}Providing a config
To configure this package, we need to provide a configuration of type KeycloakConfig trough Dependency Injection.
We offer 2 ways of doing so. Either by using KeycloakModule.forRoot (recommended) or by providing both KEYCLOAK_CONFIG_TOKEN and KEYCLOAK_HTTP_CONFIG.
Recommendation
We recommend to use KeycloakModule.forRoot since it provides a better recongnizable API.
import { KeycloakModule } from "@ogs-gmbh/ngx-keycloak";
@NgModule({
imports: [
KeycloakModule.forRoot(ENVIRONMENT_CONFIG.keycloakConfig)
]
})
export class AppModule {}If you need more control over the API, you can provide both tokens:
import { KeycloakModule, KEYCLOAK_CONFIG_TOKEN, KEYCLOAK_HTTP_CONFIG_TOKEN } from "@ogs-gmbh/ngx-keycloak";
@NgModule,
imports: [
KeycloakModule
],
providers: [
{
provide: KEYCLOAK_CONFIG_TOKEN,
useValue: KEYCLOAK_CONFIG
},
{
provide: KEYCLOAK_HTTP_CONFIG_TOKEN,
useValue: KEYCLOAK_HTTP_CONFIG
}
]
})
export class AppModule {}Both methods register the Keycloak services in Angular's dependency injection system, making them available throughout your application.
Usage
To use the Keycloak functionalities, use the following example:
import { KeycloakService } from "@ogs-gmbh/ngx-keycloak";
@Component({
selector: "app-component",
template: ``
})
export class AppComponent {
private readonly _keycloakService: KeycloakService = inject(KeycloakService);
}The inject() function retrieves the KeycloakService instance that was configured by the module, allowing you to use methods like login(), logout(), isAuthenticated(), etc.