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;
}
)
}
}