Configure the client application such that it can be operated outside the yuuvis® Momentum Kubernetes cluster.

Table of Contents

Introduction

By default, client applications built with @yuuvis/core library are supposed to be deployed inside the yuuvis® Momentum cluster. As a main advantage, there is no responsibility for the library to handle the authentication process. Users authenticate directly via the AUTHENTICATION service.

As of yuuvis® Momentum version 2021 Autumn, the @yuuvis/core library allows for the built of clients that can be deployed outside the yuuvis® Momentum cluster. Such clients authenticate via OpenID Connect to the AUTHENTICATION service and can thus be hosted fully independently. They can even be configured to support switching between different yuuvis® Momentum clusters. Users select the cluster to which they want to connect.

An example project is provided on GitHub.

The following configuration steps are required to allow for the client deployment outside a yuuvis® Momentum cluster.

Setting up Keycloak

Configure a client inside your Keycloak Realm that will be used to trigger login.

Client ID: 'spa-client' // choose your own name
Client Protocol: 'openid-connect'
Access Type: 'public'
Valid Redirect URIs: // match your environment
Web Origins: '+' // means: everything that's also invalid redirect uris

Advanced Settings
Proof Key for Code Exchange Code Challenge Method: 'S256'

Setting up Projects

Choose one of the following ways to setup your project.

Setup via Module Configuration

During the import of YuvCoreModule or YuvFrameworkModule, specify the following configuration:

// app.module.ts

imports: [
    YuvCoreModule.forRoot({
      // ... other config values
      oidc: {
        host: "https://kolibri.enaioci.net",
        tenant: "kolibri",
        issuer: "https://kc001.auth.enaioci.net/auth/realms/kolibri",
        clientId: "spa-client",
      }
    })
  ],

Setup via Dynamic Initialization

In case you do not know about the OIDC properties when your application starts (the OIDC profile needs to be loaded or users select one of several profiles), you can just import YuvCoreModule without OIDC config. The @yuuvis/core library will try the default initialization as if the client were deployed within a yuuvis® Momentum cluster. This will cause some console errors which can be ignored.

Once you are ready to specify the OIDC configuration, you can re-trigger the initialization of the library's core module:

export class AppComponent {
  static OIDC = 'app.oidc.config';

  constructor(@Inject(CORE_CONFIG) private coreConfig: CoreConfig, private coreInit: CoreInit) {}

  login(target: OpenIdConfig) {
    this.coreConfig.oidc = {
      host: 'https://kolibri.enaioci.net',
      tenant: 'kolibri',
      issuer: 'https://kc001.auth.enaioci.net/auth/realms/kolibri',
      clientId: 'spa-client'
    };
    localStorage.setItem(AppComponent.OIDC, JSON.stringify(this.coreConfig.oidc));
    this.coreInit.initialize();
  }

  logout(removeOIDC = false) {
    removeOIDC && localStorage.removeItem(AppComponent.OIDC);
    this.userService.logout();
  }
}

// app.module.ts

imports: [
    YuvCoreModule.forRoot({
      oidc: JSON.parse(localStorage.getItem(AppComponent.OIDC) || '{}'),
    })
  ],

Browser not supported