How to handle conditional init of keycloak?

[mathudak]

We have a requirement in our project to provide identity management based on user's choice while installing the app (Angular + Electron). To do so we have a public endpoint which upon request returns Auth Config with realm, client, url etc. And when the config is not provided we skip the keycloak init.

Problem is that there are multiple instances of Keycloak service within the application (guard, header, directive...) and they fail when Keycloak init was skipped.

- [ ] bug report
- [ ] feature request
- [x] question

Versions.

keycloak-angular: 8.0.1,
keycloak-js: 11.0.3,
angular: ~9.1.x

Repro steps.

We extended the APP_INITIALIZER with conditional handling of Promise chain like below and it works:

export function initApp(
  authService: AuthService,
  keycloak: KeycloakService,
  store: Store<fromApp.AppState>
): () => Promise<any> {
  return (): Promise<any> => {
    return new Promise((resolve, reject) => {
      authService.getInfo().then(info => {
        if (info.authEnabled) {
          // Keycloak Config available -> init Keycloak
          initKeycloak(keycloak, info)
            .then(() => initNgRx(store))
            .then(result => resolve(result))
            .catch(e => reject(e));
        } else {
          // Keycloak Config not available -> skip init
          initNgRx(store)
            .then(result => resolve(result))
            .catch(e => reject(e));
        }
      });
    });
  };
}

Now the problem is that checking for !!this.keycloak seems to be not working and the application is trying to obtain user profile or authentication confirm while keycloak service is not initialized/accessible. It's especially difficult with the AuthGuard which extends KeycloakAuthGuard as we are not sure how to override it. This leads to following errors in our application.

core.js:6237 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'authenticated' of undefined
TypeError: Cannot read property 'authenticated' of undefined
    at KeycloakService.<anonymous> (keycloak-angular.js:202)
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:70)
    at KeycloakService.loadUserProfile (keycloak-angular.js:198)
    at HeaderComponent.ngOnInit (header.component.ts:72)
    at callHook (core.js:4735)
    at callHooks (core.js:4699)
    at executeInitAndCheckHooks (core.js:4639)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41814)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at invokeTask (zone-evergreen.js:484)
    at ZoneTask.invoke (zone-evergreen.js:469)
defaultErrorLogger @ core.js:6237
core.js:6237 ERROR Error: Uncaught (in promise): An error happened during access validation. Details:TypeError: Cannot read property 'resourceAccess' of undefined
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41814)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at invokeTask (zone-evergreen.js:484)
    at ZoneTask.invoke (zone-evergreen.js:469)

I'm aware that this is highly specific and quite rare issue and it most likely won't be handled on your side but at least some guidance would help as I am bit stuck and not sure how to continue.

Desired functionality.

???