OKTA_CONFIG is injected before APP_INITIALIZER

[arnab.das]

I’m trying to load Okta Config from an external service in APP_INITIALIZER of angular application. However OKTA_CONFIG token is resolved earlier than APP_INITIALIZER and hence config is null.

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigService } from './config.service';
import { HttpClientModule } from '@angular/common/http';
import { OktaAuthModule, OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, OktaAuthModule],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (http: HttpClient) => {
        return () => ConfigService.loadConfig(http);    //<-- does not execute first
      },
    deps: [HttpClient],
      multi: true,
    },
    {
      provide: OKTA_CONFIG,
      useValue: {
        oktaAuth: new OktaAuth(ConfigService.Config),  //<-- This executes first (issue!)
      }
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

ConfigService.Config is null in oktaAuth: new OktaAuth(ConfigService.Config) because APP_INITIALIZER has not yet executed. How do I solve the issue? How to resolve APP_INITIALIZER token first?

Angular 13,
“@okta/okta-angular”: “5.2.0”,
“@okta/okta-auth-js”: “6.4.5”

[alisaduncan]

Hey there.

You are correct that APP_INITIALIZER doesn’t resolve before needing the values to configure Okta. The way to resolve this is to load the configuration when bootstrapping Angular by calling fetch to your configuration server.

Here is a blog post that discusses how to do this in more detail, as well as code samples.

Three Ways to Configure Modules in Your Angular App

The specific section that you need is Loading configurations from external APIs

Hope this helps!

[arnab.das]

Thank you for your prompt response. I tried out Loading configurations from external APIs section as you suggested and it works now!

However, if I remember correctly, this used to work well with okta-angular 3.2.2. I faced this issue when I updated my okta-angular package to the latest version.

[alisaduncan]

Update to this post as it hit a popularity threshold.

The Okta Angular SDK now supports runtime config built-in!

See GitHub - okta/okta-angular: Angular SDK for Okta's OIDC flow

A tutorial post is in the works!