Can't resolve all parameters for OktaAuth: (?)

Questions
1

hi
I’m updating an app from :

okta/okta-angular": "^3.1.0",
to:
“okta/okta-angular”: “^6.4.0”,
“okta/okta-auth-js”: “^7.8.1”,
angular 16.2.12

I’m getting this error on the browser’s console

RuntimeError: NG0204: Can’t resolve all parameters for OktaAuth: (?).
at getUndecoratedInjectableFactory (core.mjs:9510:15)
at injectableDefOrInjectorDefFactory (core.mjs:9500:16)
at providerToFactory (core.mjs:9546:52)
at providerToRecord (core.mjs:9530:25)
at R3Injector.processProvider (core.mjs:9408:24)
at core.mjs:9216:59
at forEachSingleProvider (core.mjs:9601:13)
at forEachSingleProvider (core.mjs:9598:13)
at new R3Injector (core.mjs:9216:9)
at createInjectorWithoutInjectorInstances (core.mjs:10494:12)

this is how my current configuration looks like

import { NgModule } from '@angular/core';
import { NgForageConfig, Driver } from 'ngforage';
import { OktaAuth } from '@okta/okta-auth-js'

import {
  OKTA_CONFIG,
  OktaAuthModule
} from '@okta/okta-angular';

import { AppConfigService } from '../config/app.config-service';
import { AppRoutingActivation } from './app.routing-activation.service';

export function initializeApp(appConfigService: AppConfigService) {
  return () => appConfigService.load();
}

export function initializeOkta(): any {
  const oktaConfig: any = {
    redirectUri: '/implicit/callback',
    clientId: '123456',
    scopes: ['openid', 'profile', 'email'],
    pkce: false,
    issuer: 'https://test.okta.com',
    ignoreLifetime: true
  };
  return oktaConfig;
}

@NgModule
  ({
    imports: [
      OktaAuthModule
    ],

    exports: [
      OktaAuthModule
    ],

    providers: [
      AppRoutingActivation,
      OktaAuth,
      { provide: OKTA_CONFIG, useFactory: initializeOkta },
    ]
  })

export class InfrastructureModule {
  public constructor(ngfConfig: NgForageConfig) {
    ngfConfig.configure({
      name: 'test',
      driver: [
        Driver.INDEXED_DB,
        Driver.WEB_SQL,
        Driver.LOCAL_STORAGE
      ]
    });
  }
}
2

Hi there @hikizume!

You’ll want to change the initalizeOkta() function to return an instance of OktaAuth.

So, without testing it myself, I think that function should look something like:

export function initializeOkta(): any {
  const oktaConfig: any = { oktaAuth: new OktaAuth({
    redirectUri: '/implicit/callback',
    clientId: '123456',
    scopes: ['openid', 'profile', 'email'],
    pkce: false,
    issuer: 'https://test.okta.com',
    ignoreLifetime: true
  })};
  return oktaConfig;
}

I recommend changing the loading to use the forRoot() method if possible.

Let us know how that works for you!

3

Hi @alisaduncan
Thanks for your reply.
I’m still getting the same error.

4

if it helps, I get the same error removing the method altogether, as well as the providers.
Is there something else I might be missing configuration-wise?
thanks

5

by the forroot method did you mean OktaAuthModule,forRoot() ?

I didn’t have that as it was not required in the version I had before.

I just made some changes to the module and the error changed to

OAuthOptionsConstructor.js:29 Uncaught AuthSdkError: No issuer passed to constructor. Required usage: new OktaAuth({issuer: “https://{yourOktaDomain}.com/oauth2/{authServerId}”})
at assertValidConfig (OAuthOptionsConstructor.js:29:15)
at new OAuthOptionsConstructor (OAuthOptionsConstructor.js:47:13)
at new CoreOptionsConstructor (options.js:24:13)
at new IdxOptionsConstructor (options.js:19:13)
at new OktaAuthBase (factory.js:21:29)
at new OktaAuthStorage (mixin.js:16:13)
at new OktaAuthHttp (mixin.js:21:13)
at new OktaAuthSession (mixin.js:18:13)
at new WithOriginalUri (browser.js:17:12)
at new OktaAuthOAuth (index.js:37:17)

I get a feeling the OktaAuth being read is authConfig and not oktaConfig. I feel like I’ve started to make a mess here, any help sorting this out would be greatly appreciated!

import { NgModule } from '@angular/core';
import { NgForageConfig, Driver } from 'ngforage';
import { OktaAuth } from '@okta/okta-auth-js'

import {
  OKTA_CONFIG,
  OktaAuthModule,
  OktaConfig
} from '@okta/okta-angular';
import { AppConfigService } from '../config/app.config-service';
import { AppRoutingActivation } from './app.routing-activation.service';

export function initializeApp(appConfigService: AppConfigService) {
  return () => appConfigService.load();
}

const authConfig: any = { oktaAuth: new OktaAuth({
  redirectUri: '/implicit/callback',
  clientId: '123',
  scopes: ['openid', 'profile', 'email'],
  pkce: false,
  issuer: 'https://test.okta.com/oauth2/123',
  ignoreLifetime: true
})};

const oktaAuth = new OktaAuth(authConfig)
const moduleConfig: OktaConfig = { oktaAuth }

@NgModule
  ({
    imports: [
      OktaAuthModule,
      OktaAuthModule.forRoot(moduleConfig)
    ],

    exports: [
      OktaAuthModule
    ],

    providers: [
      AppRoutingActivation,
      { 
        provide: OKTA_CONFIG, 
        useValue: { oktaAuth } 
      }
    ]
  })

export class InfrastructureModule {
  public constructor(ngfConfig: NgForageConfig) {
    ngfConfig.configure({
      name: 'Asra',
      driver: [
        Driver.INDEXED_DB,
        Driver.WEB_SQL,
        Driver.LOCAL_STORAGE
      ]
    });
  }
}
6

Hi @hikizume ,

The Okta configuration must be an object with the property oktaAuth. You wouldn’t need to provide the OKTA_CONFIG injection token using the forRoot pattern.

So, your code changes to something like this (once again, not run locally). I changed some variable names and formatting to clarify.

import { NgModule } from '@angular/core';
import { NgForageConfig, Driver } from 'ngforage';
import { OktaAuth } from '@okta/okta-auth-js'

import {
  OKTA_CONFIG,
  OktaAuthModule
} from '@okta/okta-angular';
import { AppConfigService } from '../config/app.config-service';
import { AppRoutingActivation } from './app.routing-activation.service';

export function initializeApp(appConfigService: AppConfigService) {
  return () => appConfigService.load();
}

const oktaAuth = new OktaAuth({
  redirectUri: '/implicit/callback',
  clientId: '123',
  scopes: ['openid', 'profile', 'email'],
  pkce: false,
  issuer: 'https://test.okta.com/oauth2/123',
  ignoreLifetime: true
});

@NgModule
  ({
    imports: [
      OktaAuthModule.forRoot({oktaAuth})
    ],
    exports: [
      OktaAuthModule
    ],
    providers: [
      AppRoutingActivation
    ]
  })

export class InfrastructureModule {
  public constructor(ngfConfig: NgForageConfig) {
    ngfConfig.configure({
      name: 'Asra',
      driver: [
        Driver.INDEXED_DB,
        Driver.WEB_SQL,
        Driver.LOCAL_STORAGE
      ]
    });
  }
}

I haven’t tried exporting OktaAuthModule like this as the services are provided at root, so I recommend importing directly in the AppModule. Calling it out as a heads up if you see strange behavior.

Let us know how it goes!