Okta Component giving error at runtime Cannot read properties of undefined (reading '_oktaUserAgent')

Question

I am using OKTA authorization in my project but facing an error at runtime

tried googling it but could not find any related solution

Here is the error

TypeError: Cannot read properties of undefined (reading '_oktaUserAgent')
    at new OktaAuthModule (okta-angular.js:236)
    at Object.OktaAuthModule_Factory [as factory] (okta-angular.js:260)
    at R3Injector.hydrate (core.js:11354)
    at R3Injector.get (core.js:11175)
    at core.js:11212
    at Set.forEach (<anonymous>)
    at R3Injector._resolveInjectorDefTypes (core.js:11212)
    at new NgModuleRef$1 (core.js:24308)
    at NgModuleFactory$1.create (core.js:24362)
    at core.js:28101

Here is my Appmodule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductService } from './service/product.service';
import { Router, RouterModule, Routes } from '@angular/router';
import { ProductCategoryMenuComponent } from './components/product-category-menu/product-category-menu.component';
import { SearchComponent } from './components/search/search.component';
import { ProductDetailsComponent } from './components/product-details/product-details.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CartStatusComponent } from './components/cart-status/cart-status.component';
import { CartDetailsComponent } from './components/cart-details/cart-details.component';
import { CheckoutComponent } from './components/checkout/checkout.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './components/login/login.component';
import {
  OKTA_CONFIG,
  OktaAuthModule,
  OktaCallbackComponent
} from '@okta/okta-angular';
import myAppConfig from './config/my-app-config';
import { LoginStatusComponent } from './components/login-status/login-status.component';

const oktaConfig = Object.assign({
  onAuthRequired: (injector) =>{
    const router = injector.get(Router);
    router.navigate(['/login']);
  }
}, myAppConfig.oidc);


const routes: Routes = [
  {path: 'login/callback', component: OktaCallbackComponent},
  {path: 'login', component: LoginComponent},
  {path: 'checkout', component: CheckoutComponent },
  {path: 'cart-details', component: CartDetailsComponent },
  {path: 'products/:id', component: ProductDetailsComponent },
  {path: 'search/:keyword', component: ProductListComponent },
  {path: 'category/:id', component: ProductListComponent},
  {path: 'category', component: ProductListComponent},
  {path: 'products', component: ProductListComponent},
  {path: '', redirectTo: '/products', pathMatch: 'full'},
  {path: '**', redirectTo: '/products', pathMatch: 'full'}
];

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductCategoryMenuComponent,
    SearchComponent,
    ProductDetailsComponent,
    CartStatusComponent,
    CartDetailsComponent,
    CheckoutComponent,
    LoginComponent,
    LoginStatusComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    HttpClientModule,
    NgbModule,
    ReactiveFormsModule,
    OktaAuthModule
  ],
  providers: [ProductService, {provide: OKTA_CONFIG, useValue: oktaConfig}],
  bootstrap: [AppComponent]
})
export class AppModule { }

here is my configuration for okta myAppConfig

export default {

    oidc: {
        clientId: '<your client id>',
        issuer: 'https:<your url>/oauth2/default',
        redirectUri: 'http://localhost:4200/login/callback',
        scopes: ['openid', 'profile', 'email']
    }

}

This is my Login Status Component gets loaded at the start of application

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

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

  isAuthenticated: boolean = false;
  userFullName: string;

  constructor(private oktaAuth: OktaAuth,private authstateService: OktaAuthStateService) { }

  ngOnInit(): void {
    this.oktaAuth.authStateManager.subscribe(
      (result)=>{
        this.isAuthenticated = result
        this.getUserDetails()
      }
    )
  }


  getUserDetails() {
    if(this.isAuthenticated){

      this.oktaAuth.getUser().then(
        (res)=>{
          this.userFullName = res.name
        }
      )
    }
  }

  logout(){
    this.oktaAuth.signOut();
  }

}

This is my Login Component

import { Component, OnInit } from '@angular/core';
import {  OktaAuthStateService } from '@okta/okta-angular';
//import { OktaAuthService } from '@okta/okta-angular';
import * as OktaSignIn from '@okta/okta-signin-widget';
import myAppConfig from 'src/app/config/my-app-config';
import { OktaAuth } from '@okta/okta-auth-js';



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

  

  oktaSignin: any;


  constructor(private oktaAuthService: OktaAuthStateService,private oktaAuth: OktaAuth) {

    this.oktaSignin = new this.oktaSignin({
      baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0],
      clientId: myAppConfig.oidc.clientId,
      redirectUri: myAppConfig.oidc.redirectUri,
      authParams: {
        pkce: true,
        issuer: myAppConfig.oidc.issuer,
        scopes: myAppConfig.oidc.scopes
      }
    })
   }

  ngOnInit(): void {
    this.oktaSignin.remove();

    this.oktaSignin.renderEl(
      {
        el: '#okta-sign-in-widget'  // this name should be same as div tag id in login.component.html
      },
      (response) =>{
        if (response.status === 'SUCCESS') {
          this.oktaAuth.signInWithRedirect();
        }
      },
      (error) => {
        throw error;
      }
    )
  }

}

Answer 1

The problem is your source code Okta Angular is incompatible, with new version Okta Angular... follow instruction migration: https://github.com/okta/okta-angular/blob/master/MIGRATING.md

I have fixed that, because this source code from same course with me on udemy :D.

Im using Okta 5

change app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductService } from './services/product.service';
import { RouterModule, Routes } from '@angular/router';
import { ProductCategoryMenuComponent } from './components/product-category-menu/product-category-menu.component';
import { SearchComponent } from './components/search/search.component';
import { ProductDetailsComponent } from './components/product-details/product-details.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CartStatusComponent } from './components/cart-status/cart-status.component';
import { CartDetailsComponent } from './components/cart-details/cart-details.component';
import { CheckoutComponent } from './components/checkout/checkout.component';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './components/login/login.component';
import { LoginStatusComponent } from './components/login-status/login-status.component';

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

import { OktaAuth } from '@okta/okta-auth-js';
import appConfig from './config/app-config';

// create routes
const routes: Routes = [ 
  { path: 'login/callback', component: OktaCallbackComponent },
  { path: 'login', component: LoginComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'cart-details', component: CartDetailsComponent },
  { path: 'products/:id', component: ProductDetailsComponent },
  { path: 'search/:keyword', component: ProductListComponent },
  { path: 'category/:id/:name', component: ProductListComponent },
  { path: 'category', component: ProductListComponent },
  { path: 'products', component: ProductListComponent },   
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: '**', redirectTo: '/products', pathMatch: 'full' }
];

const oktaAuth = new OktaAuth(appConfig.oidc); // the name variable must oktaAuth

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductCategoryMenuComponent,
    SearchComponent,
    ProductDetailsComponent,
    CartStatusComponent,
    CartDetailsComponent,
    CheckoutComponent,
    LoginComponent,
    LoginStatusComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    HttpClientModule,
    NgbModule,
    ReactiveFormsModule,
    OktaAuthModule
  ],
  providers: [ProductService, {provide: OKTA_CONFIG, useValue: {oktaAuth}}],
  bootstrap: [AppComponent]
})
export class AppModule { }

File login.component.ts:

import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import OktaSignIn from '@okta/okta-signin-widget';
import { OKTA_AUTH } from '@okta/okta-angular';

import appConfig from '../../config/app-config';
import { OktaAuth } from '@okta/okta-auth-js';

/**
 * for more information: https://github.com/okta/okta-angular
 * for change/migration version future read: https://github.com/okta/okta-angular/blob/master/MIGRATING.md
 */

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

  oktaSignin: any;

  constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {

    this.oktaSignin = new OktaSignIn({
      logo: 'assets/images/angular-logo.svg',
      baseUrl: appConfig.oidc.issuer.split('/oauth2')[0],
      clientId: appConfig.oidc.clientId,
      redirectUri: appConfig.oidc.redirectUri,
      authParams: {
        pkce: true,
        issuer: appConfig.oidc.issuer,
        scopes: appConfig.oidc.scopes
      }
    });
  }

  ngOnInit(): void {
    this.oktaSignin.remove(); // remove all to clean

    this.oktaSignin.renderEl({
      el: '#okta-sign-in-widget' // this name should same as div tag id in component.html
    },
    (response) => {
      if (response.status === 'SUCCESS') {
        this.oktaAuth.signInWithRedirect();
      }
    },
    (error) => {
      throw error;
    }
    );
  }

  ngOnDestroy(): void {
    this.oktaSignin.remove();
  }

}

File login-status.component :

import { Component, Inject, OnInit } from '@angular/core';
import { OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

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

  isAuthenticated: boolean = false;
  userFullName: string = "";

  constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {
    this.oktaAuth.authStateManager.subscribe(
      isAuth => this.isAuthenticated = isAuth
    );
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    
    if (this.isAuthenticated) {
      const userClaim = await this.oktaAuth.getUser();
      this.userFullName = userClaim.name || "";
    }
    console.log("Autentication = " + this.isAuthenticated);
    console.log("Username = " + this.userFullName);
  }

  async logout() {
    // terminates the session
    await this.oktaAuth.signOut();
  }

}

im also update file :

File tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "esModuleInterop": true, // <- add this
    "allowSyntheticDefaultImports": true // <-- add this

  }
}

and im update to angular.json on section:

...
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "lodash",
              "@babel/runtime-corejs3"
           ],
...

Answer 2

I had the same problem. Try downgrading the node version and reinstall the okta/angular package:

npm i @okta/okta-angular

Answer 3

Use @Inject(OKTA_AUTH) before "private oktaAuth: OktaAuth" inside "constructor" in both "LoginStatusComponent" and "LoginComponent"

Answer 4

You are missing a set of curly brackets around oktaAuth in your provider line in app.module.ts

{ provide: OKTA_CONFIG, useValue: { oktaAuth } },

From [https://gitmemory.cn/repo/okta/okta-angular/issues/71][1]

Answer 5

What version of Okta Angular are you using? If it's v4, there's been breaking changes. See the migration guide or this example upgrade.