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',
        }
      });
}