Angular-auth-oidc-client: OidcConfigService can read configuration data from an environment file.

[mikeandersun]

For development environment I would like to read configuration data from an environment file rather than from a Url.
It is possible ? If so, is there any sample code?
Thanks.

[damienbod]

Yes this is possible. You can implement any class, instead of the OidcConfigService and use the result in the APP_INIT return event. You need to set the openIDImplicitFlowConfiguration and the authWellKnownEndpoints configuration classes in the app module. I look for an example, have 1 for a private client, will publish an example here

[damienbod]

Here's an example. You can do anything you what then in the AppConfigService class

import { Injectable, EventEmitter, Output } from '@angular/core';

@Injectable()
export class AppConfigService {
    @Output() onConfigurationLoaded = new EventEmitter<boolean>();
    clientConfiguration: any;
    wellKnownEndpoints: any;

    constructor() { }

    async load(configUrl: string) {
        const response = await fetch(configUrl);
        this.clientConfiguration = await response.json();
        await this.load_using_stsServer(this.clientConfiguration.urlStsServer);
    }

    async load_using_stsServer(stsServer: string) {
        const response = await fetch(`${stsServer}/.well-known/openid-configuration`);
        this.wellKnownEndpoints = await response.json();
        this.onConfigurationLoaded.emit();
    }
}

...

import {
    AuthModule,
    OidcSecurityService,
    OpenIDImplicitFlowConfiguration,
    AuthWellKnownEndpoints
} from 'angular-auth-oidc-client';
import { AppConfigService } from './app.config.service';

export function loadConfig(appConfigService: AppConfigService) {
    console.log('APP_INITIALIZER STARTING');
    console.log(window.location.origin + '/<your_app_settings>');
    return () => appConfigService.load(window.location.origin + '/<your_app_settings>');
}

@NgModule({
    imports: [
        ...
        AuthModule.forRoot(),
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        OidcSecurityService,
        AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [AppConfigService],
            multi: true
        }
    ],
    bootstrap:    [AppComponent],
})

export class AppModule {

    constructor(
        private oidcSecurityService: OidcSecurityService,
        private appConfigService: AppConfigService,
    ) {
        this.appConfigService.onConfigurationLoaded.subscribe(() => {

            console.log(this.appConfigService.clientConfiguration);
            const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
            openIDImplicitFlowConfiguration.stsServer = this.appConfigService.clientConfiguration.urlStsServer;

            openIDImplicitFlowConfiguration.redirect_url = this.appConfigService.clientConfiguration.urlRedirect;
            // The Client MUST validate that the aud (audience) Claim contains its client_id value registered at the
            // Issuer identified by the iss (issuer) Claim as an audience.
            // The ID Token MUST be rejected if the ID Token does not list the Client as a valid audience,
            // or if it contains additional audiences not trusted by the Client.
            openIDImplicitFlowConfiguration.client_id = 'Cloud UI';
            openIDImplicitFlowConfiguration.response_type = 'id_token token';
            openIDImplicitFlowConfiguration.scope = ' openid public_api profile email';
            openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.appConfigService.clientConfiguration.urlRedirectPostLogout;
            openIDImplicitFlowConfiguration.start_checksession = false;
            openIDImplicitFlowConfiguration.silent_renew = true;
            openIDImplicitFlowConfiguration.post_login_route = '/estimator';
            // HTTP 403
            openIDImplicitFlowConfiguration.forbidden_route = '/information';
            // HTTP 401
            openIDImplicitFlowConfiguration.unauthorized_route = '/information';
            openIDImplicitFlowConfiguration.trigger_authorization_result_event = true;
            openIDImplicitFlowConfiguration.log_console_warning_active = true;
            openIDImplicitFlowConfiguration.log_console_debug_active = false;
            // id_token C8: The iat Claim can be used to reject tokens that were issued too far away from the current time,
            // limiting the amount of time that nonces need to be stored to prevent attacks.The acceptable range is Client specific.
            openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds = 30;

            const authWellKnownEndpoints = new AuthWellKnownEndpoints();
            authWellKnownEndpoints.setWellKnownEndpoints(this.appConfigService.wellKnownEndpoints);

            this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);

        });

        console.log('APP STARTING');
    }
}

[Thabo0558]

I get the following problem:
Module '"./node_modules/angular-auth-oidc-client/angular-auth-oidc-client"' has no exported member 'OpenIDImplicitFlowConfiguration'

[Thabo0558]

Also can you show me what is this Class: OidcConfigService when you do this:

export function loadConfig(oidcConfigService: OidcConfigService) {
return () => oidcConfigService.load(oidc_configuration);
}

I dont get the load()