Angular Keycloak

Introduction

This is a page just to clarify how to integrate Keycloak with Angular. It is assumed you know how to configure Keycloak. Most of this is from ["Wojciech Krzywiec"]

Keycloak

So to set this up we

• Setup a client with
• A root URL http://localhost:80/*, http://localhost:4200/*, http://localhost/*
• Web Origins +

Application

Install the Keycloak Package

npm install keycloak-angular keycloak-js

Create Initializer Factory

Never keen on the CLI but I guess it stays up to date.

ng g class init/keycloak-init --type=factory --skip-tests

This provides the initializer for Keycloak Server

import { KeycloakService } from "keycloak-angular";

export function initializeKeycloak(
  keycloak: KeycloakService
  ) {
    return () =>
      keycloak.init({
        config: {
          url: 'http://localhost:8080' + '/auth',
          realm: 'test',
          clientId: 'frontend',
        }
      });
}

Now add it to the app module

@NgModule({
  declarations: [
    AppComponent,
    ContentComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatFormFieldModule,
    MatSelectModule,
    MatTableModule,
    MatSnackBarModule,
    HttpClientModule,
    KeycloakAngularModule,
    NgbModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService],
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }