ERROR Error: Okta config should contain oktaAuth

I am getting below issue after OKTA configuration in Angular 14.


I am using multiple files like app.module.ts, app.component.ts, OktaConfigInitService, and AuthInterceptor.
Additionally, the okta versions I am using as below:
@okta/okta-angular”: “^6.4.0”,
@okta/okta-auth-js”: “^7.10.0”
Can you please help on this issue?

Hi there @chandan.pathak,

Welcome to the community!

Can you provide your Okta configuration? Feel free to redact sensitive info. It appears that the configuration may not be correct.

The Okta Angular library module requires an object with the OktaAuth instance as a property named oktaAuth. Please see

Let us know how it goes!

Thanks for your prompt response @alisaduncan.
Please find below my Okta configuration file, which is imported in the AppModule and used in provider like

{ provide: OKTA_CONFIG, useFactory: (config: OktaConfigInitService) => { return config.getOktaConfig() }, deps: [OktaConfigInitService] }

Okta configuration:

import { Injectable, Inject } from '@angular/core';
import { NativeWindowService } from '../native-window/native-window.service';

@Injectable({
	providedIn: 'root',
})
export class OktaConfigInitService {
	private OKTA_CONFIG = {
		issuer: '',
		clientId: '',
		redirectUri: '',
		scopes: ['openid', 'email', 'groups', 'profile'],
		tokenManager: {
			storage: 'memory'
		}
	};

	constructor(
		@Inject(NativeWindowService) private nativeWindowService: NativeWindowService
	) {
		// Values from the site settings call we care about
		this.OKTA_CONFIG.issuer = this.nativeWindowService.nativeWindowObj.siteSettings.OktaBaseUrl;
		this.OKTA_CONFIG.clientId = this.nativeWindowService.nativeWindowObj.siteSettings.OktaClientId;
		this.OKTA_CONFIG.redirectUri = this.nativeWindowService.nativeWindowObj.siteSettings.OktaRedirectUri;
	}

	getOktaConfig() {
		return this.OKTA_CONFIG;
	}
}

Hi there @chandan.pathak

Thanks for posting your Okta config.

It looks like you’re missing creating the OktaAuth instance in the provider.

You’ll need something like the snippet below for the provider (or make a similar change to create the instance of OktaAuth in the getOktaConfig() method).

Please note this is untested, and I’m not sure I got the syntax 100% correct off the top of my head, but hopefully it’ll get you there. :smile:

{ 
  provide: OKTA_CONFIG, 
  useFactory: (config: OktaConfigInitService) => { return {oktaAuth: new OktaAuth(config.getOktaConfig())} }, 
  deps: [OktaConfigInitService] 
}

Please see how the provider is defined here

Let us know how it goes!

Most of the time, when I pass the oktaAuth in the oktaConfig, either in the provider as you suggested above in the AppModule or in the Okta configuration file as below.

getOktaConfig() {
		return {
			oktaAuth: new OktaAuth(this.OKTA_CONFIG)
		};
	}

My browser crashes, as shown below.

Can you try this with hardcoded config values and remove variable conditions that might be masking issues?

This example might be the closest to your setup and does work when configuring the OktaAuth instance for a useFactory provider.