Hi,
The OktaAuthModule is not correctly resolving when using it in the context of a DI design pattern:
Context:
@okta/okta-angular: 5.1.1
@okta/okta-auth-js: 6.0.0
Angular: 11.2.15
Error:
TypeError: Cannot read properties of undefined (reading ‘_oktaUserAgent’)
Implementation:
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';
// Service that contains the configuration
import { OktaConfigService } from './services/okta-config/okta-config.service';
export function OktaConfigFactory(oktaconfigService: OktaConfigService) {
const oktaConfig = oktaconfigService.GetOktaConfig();
const oktaAuth = new OktaAuth(oktaConfig);
return oktaAuth;
}
@NgModule({
declarations: [ AppComponent, HeaderComponent ],
bootstrap: [ AppComponent ],
imports: [ OktaAuthModule ],
providers: [
OktaConfigService,
{
provide: OKTA_CONFIG,
useFactory: OktaConfigFactory,
deps:[OktaConfigService],
multi: false
},
]
})
export class AppModule { }
okta-config-service.ts
import { Injectable } from '@angular/core';
import { appConfig, oktaTenantConfig} from 'src/app/app.config';
@Injectable({
providedIn: 'root'
})
export class OktaConfigService {
constructor() {
}
public host = window.location.hostname.toLowerCase();
public GetOktaConfig() {
let oktaClaimsProvider = oktaTenantConfig.lower;
switch (this.host) {
case appConfig.hostName.mo:
oktaClaimsProvider = oktaTenantConfig.mo;
break;
case appConfig.hostName.prod:
oktaClaimsProvider = oktaTenantConfig.prod;
break;
}
return {
issuer: oktaClaimsProvider.issuer,
redirectUri: window.location.origin + '/login/callback',
clientId: oktaClaimsProvider.clientId,
pkce: true,
scopes: ['openid', 'profile'],
tokenManager: {
storage: 'sessionStorage',
autoRenew: true
}
}
}
}
