Angular-auth-oidc-client: External config JSON -- Authorize() - Cannot read property 'storage' of undefined

[vicver82]

Hi,

I'd like to be able to pull the openIDImplicitFlowConfiguration configuration from an external JSON file and assign its values to the openIDImplicitFlowConfiguration object before passing it to the setupModule() method.

I've "outsourced" openIDImplicitFlowConfiguration's properties setting to an Angular service, in order to keep the AppModule clean. The service gets the JSON file with an HTTP request, parses the response with .json() and then passes it to oidcSecurityService.setupModule().
I use _eval()_ on the .storage property, because it is stored as a string in JSON and needs to refer to a variable in the code.

When passing "_sessionStorage_" or "_localStorage_" from JSON to openIDImplicitFlowConfiguration.storage, the console throws the following error after calling authorize() and successfully logging in with IdentityServer4.

TypeError: Cannot read property 'storage' of undefined
    at AuthConfiguration.get [as storage] (angular-auth-oidc-client.es5.js:230)
    at BrowserStorage.webpackJsonp.../../../../angular-auth-oidc-client/modules/angular-auth-oidc-client.es5.js.BrowserStorage.read (angular-auth-oidc-client.es5.js:298)
    at OidcSecurityCommon.webpackJsonp.../../../../angular-auth-oidc-client/modules/angular-auth-oidc-client.es5.js.OidcSecurityCommon.retrieve (angular-auth-oidc-client.es5.js:350)
    at OidcSecurityService.webpackJsonp.../../../../angular-auth-oidc-client/modules/angular-auth-oidc-client.es5.js.OidcSecurityService.authorizedCallback (angular-auth-oidc-client.es5.js:1173)

It appears as if the storage property can't be read by your library's AuthConfiguration class, even when the openIDImplicitFlowConfiguration.storage is left unassigned (which should revert to DefaultConfiguration's values).

Using:
Node 8.1.4 on Windows 10
NPM 5.2.0
Angular 4.2.6 (& CLI 1.2.1)
angular-auth-oidc-client 1.2.1

Thank you so much for your help, and for your work!
Victor

[damienbod]

I don't have any ideas what's going wrong here. Maybe you could create a demo repo?

Greetings Damien

[damienbod]

Hi @vicver82 I was able to reproduce this. Will fix as soon as possible

[damienbod]

Hi @vicver82 I have made a quick fix for this. Need it myself. This might change, I want to confirm, review the changes with @FabianGosebrink and @robisim74

I'll update the docs once reviewed. fix in version 1.2.2

App.module: get your json settings:

configClient() {
        return this.http.get('/api/ClientAppSettings').map(res => {
            this.clientConfiguration = res.json();
        });
    }

App.module:
Config the module, subscribe to the json get:

this.configClient().subscribe(config => {

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

            openIDImplicitFlowConfiguration.redirect_url = this.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 = 'clientId';
            openIDImplicitFlowConfiguration.response_type = 'id_token token';
            openIDImplicitFlowConfiguration.scope = ' openid vmsscope profile email';
            openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.clientConfiguration.urlRedirectPostLogout;
            openIDImplicitFlowConfiguration.start_checksession = false;
            openIDImplicitFlowConfiguration.silent_renew = true;
            openIDImplicitFlowConfiguration.startup_route = '/vms';
            // HTTP 403
            openIDImplicitFlowConfiguration.forbidden_route = '/forbidden';
            // HTTP 401
            openIDImplicitFlowConfiguration.unauthorized_route = '/unauthorized';
            openIDImplicitFlowConfiguration.log_console_warning_active = true;
            openIDImplicitFlowConfiguration.log_console_debug_active = true;
            // 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 = 10;

            this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration);
        });

AppComponent, subscribe to the onModuleSetup event:

 constructor(public oidcSecurityService: OidcSecurityService) {
        this.oidcSecurityService.onModuleSetup.subscribe(() => { this.onModuleSetup(); });
    }

Handle the authorize callback using the event:

 private onModuleSetup() {
        if (window.location.hash) {
            this.oidcSecurityService.authorizedCallback();
        }
    }

And remove the ngInit

Greetings Damien

[damienbod]

@FabianGosebrink @robisim74 this fixes the refresh problem, if you wait for the setuModule event before using the module

[damienbod]

https://github.com/damienbod/angular-auth-oidc-client/issues/42

[vicver82]

@damienbod Thanks a million for the fix!
I'm implementing it now, will write back here as soon as I'm done.
Best,
Victor

[vicver82]

@damienbod It works! Thanks for your fix!