No provider for OktaAuth but OktaAuth define?-CodePudding

Regards to th Okta Documentation : https://developer.okta.com/docs/guides/sign-into-spa/angular/main/#configure-the-sdk, I've configured my application to authentificate with Google.

So, I have implement OktaAuthModule but I always have this error :

core.js:6498 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[OktaAuth -> OktaAuth -> OktaAuth]: 
  NullInjectorError: No provider for OktaAuth!
NullInjectorError: R3InjectorError(AppModule)[OktaAuth -> OktaAuth -> OktaAuth]: 
  NullInjectorError: No provider for OktaAuth!
    at NullInjector.get (core.js:11120)
    at R3Injector.get (core.js:11287)
    at R3Injector.get (core.js:11287)
    at R3Injector.get (core.js:11287)
    at NgModuleRef$1.get (core.js:25352)
    at Object.get (core.js:25066)
    at lookupTokenUsingModuleInjector (core.js:3354)
    at getOrCreateInjectable (core.js:3466)
    at Module.ɵɵdirectiveInject (core.js:14756)
    at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:10)
    at resolvePromise (zone.js:1213)
    at resolvePromise (zone.js:1167)
    at zone.js:1279
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28679)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)

Here are the different codes that have been implemented :

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {LoginModule} from "./login/login.module";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule
  ],
  exports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  OKTA_CONFIG,
  OktaAuthModule,
} from '@okta/okta-angular';

import { OktaAuth } from '@okta/okta-auth-js';
import {LoginComponent} from "./login.component";

const OKTA_DOMAIN = '<my Okta Domain>';
const CLIENT_ID = '<MY ID>'
const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: CLIENT_ID,
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s /)
};

const oktaAuth = new OktaAuth(config);

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    OktaAuthModule
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: { oktaAuth } },
  ],
})
export class LoginModule { }

login.component.ts

import { Component } from '@angular/core';
import {OktaAuthStateService} from "@okta/okta-angular";
import {OktaAuth} from "@okta/okta-auth-js";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent  {

  constructor(public authStateService: OktaAuthStateService, public oktaAuth: OktaAuth) { }

  async login() {
    await this.oktaAuth.signInWithRedirect({
      originalUri: '/configured-redirect-path'
    });
  }

}

login.component.html

<button *ngIf="!(authStateService.authState$ | async)?.isAuthenticated" (click)="login()">
  Login
</button>

Do you know what is wrong with this code for use OktaAuth ?

UPDATE 1

I have update exports in login Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  OKTA_CONFIG,
  OktaAuthModule,
} from '@okta/okta-angular';

import { OktaAuth } from '@okta/okta-auth-js';
import {LoginComponent} from "./login.component";

const OKTA_DOMAIN = '...';
const CLIENT_ID = '...';
const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: CLIENT_ID,
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s /)
};

const oktaAuth = new OktaAuth(config);

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    OktaAuthModule
  ],
  exports: [
    CommonModule,
    OktaAuthModule
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: { oktaAuth } },
  ],
})
export class LoginModule { }

But no change

CodePudding user response：

In case if you are using @okta/okta-auth-js version 5.x , then you would need to use OKTA_AUTH injection token for injecting OktaAuth as below:

import { OKTA_AUTH } from '@okta/okta-angular';


export class LoginComponent  {
  constructor(public authStateService: OktaAuthStateService, @Inject(OKTA_AUTH) 
      public oktaAuth: OktaAuth) {}

}

Please refer migration guide