keycloak.init config that depends on another APP_INITIALIZER about keycloak-angular HOT 9 CLOSED

@findjonmos,

About this issue, I will share some code on how I handled this situation. But this is not needed in most of the cases, as for common situations the recommended way to get the config values is through the angular environment file.
To better show this common scenario, I've changed the example (keycloak-heroes) to instead of getting the keycloak config hardcoded, get from environment file.

Coming back to the original question of using a config file, the reason it was necessary to create an AppConfigService was that I needed to get some values from the webapp, but the initializer function was located in a separate library that we built to handle the company's common Angular components. So as the keycloak-angular initialization is done inside this common library I could not get the webapp environment values. Because of this, we create an assets/app-config.json file in every application which is loaded inside the AppConfigService.

I'm sharing a similar code, so you can take a look on the idea:

export function initializer(
  keycloak: KeycloakService,
  appConfig: AppConfigService,
): () => Promise<any> {
  return (): Promise<any> => {
    return new Promise(async (resolve, reject) => {
      let config: AppConfig;
      let env: EnvValues;

      try {
        config = await appConfig.getConfigValue();
      } catch (error) {
        // Here you should properly deal with the error
        reject();
        return;
      }

      try {
        await keycloak.init({
          config: {
            url: config.keycloakUrl,
            realm: config.realm,
            clientId: config.clientId
          },
          initOptions: {
            onLoad: 'login-required',
            checkLoginIframe: false
          }
        });

        resolve();
      } catch (error) {
        // Here you should properly deal with the error
        reject();
      }
    });
  };
}

Let me know if this answer helps you and if you succeed.

If you need any further assistance I'm available to help.

Thanks!

from keycloak-angular.

@mauriciovigolo Thank you very much for doing this. I will take some time soon to try and get this example working for me. Thanks very much :)

from keycloak-angular.

@findjonmos
Just to throw out another idea:

In our app we have a few init steps that depend on a config.json similar to your situation. It was starting to get a bit messy having everything in a single initializer so we decided to split things out.

Basically you can expose an observable in your config service. By subscribing to that observable in other dependent steps you can trigger them to load appropriately.

Complete example:
https://stackblitz.com/edit/angular-multiple-app-init-steps

The gist of it:

// first fake service exposes an observable to notify others of its completion
export function secondInitializerFn(firstFakeService: FirstFakeService, secondFakeService): () => Promise<any> {
    return (): Promise<any> => {
        return new Promise(async (resolve, reject) => {

          firstFakeService.configDoneSubject$
                .pipe(
                    tap(isLoaded => console.log('first config loaded: ' + isLoaded)),
                    skipWhile(isLoaded => isLoaded === false), // only trigger secondConfig load once firstConfig is done
                    switchMap(() => (from(secondFakeService.secondConfig()))))
                .subscribe(resolve, reject);
        });
    };
}

@NgModule({
...
...
...
  providers: [
    FirstFakeService,
    SecondFakeService,
    {
            provide: APP_INITIALIZER,
            useFactory: firstInitializerFn,
            multi: true,
            deps: [FirstFakeService]
    },
// we have to make the second service wait for the first service in the secondInitializerFn
    {
            provide: APP_INITIALIZER,
            useFactory: secondInitializerFn,
            multi: true,
            deps: [FirstFakeService, SecondFakeService]
    },
  ],
})
export class AppModule { }

from keycloak-angular.

Hello @findjonmos,

I've developed an angular components library at work and I does exactly what you are doing, loads an app-config.json file and uses part of the config data to initialize the keycloak.init. In our case the library is working as expected.

I think it may be the order of the calls or some kind of configuration you have in your app. Is there a way to share an example to reproduce the error?

from keycloak-angular.

Hey @mauriciovigolo , I will try to get you some source code to show what I was up to.

Is your example part of the repo here that I can look at?

from keycloak-angular.

Great @findjonmos,

The example in this repo doesn't have this functionality (load an app-config.json file). I can implement it and release a new version. I will take a look on this.

Tks!!

from keycloak-angular.

@mauriciovigolo Just wanted to come back to tell you that the solution you gave me worked nicely.
Thank you for your help.
I had a curiosity however in regards to how you handled any errors...I had an idea to try to force a redirect to a html page separate of angular since the project would not have booted up. Have you done something different?

from keycloak-angular.

@findjonmos, great that it helped!

About the way to handle errors, it depends in which layer you are talking about. If it is an error during the login process, Keycloak already bundles the error workflow and templates, so you could customize the template as mentioned at keycloak themes section.

If it is during the app initialization function (as mentioned above), you could also send the angular Router as a parameter, for example:

export function initializer(
  keycloak: KeycloakService,
  appConfig: AppConfigService,
  router: Router
): () => Promise<any> {
// ....
}

If any errors happen and your intention is to redirect to another route, you have the tools to do it.

from keycloak-angular.

@findjonmos, I'm closing this issue, since it seems to be solved. If you have any issues in the future we will be here to help. Thanks!

from keycloak-angular.