Skip to content

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:

keycloak.config.ts
typescript
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.

example.module.ts
typescript
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:

example.module.ts
typescript
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:

example.component.ts
typescript
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.