Hi @alisaduncan , I am facing similar error. And using okta sign in widget of our company in our application. And
I tried to incorporate the way okta is being called now. I pasted my code for reference. Can you please take a look and let us know what might be going wrong for okta to be throwing error? Using latest okta versions…
below is app.component.ts:
export class AppComponent implements OnInit {
public isAuthenticated$!: Observable;
private oktaStateService = inject(OktaAuthStateService);
private oktaAuth = inject(OKTA_AUTH);
public ngOnInit(): void {
this.isAuthenticated$ = this.oktaStateService.authState$.pipe(
filter((s: AuthState) => !!s),
map((s: AuthState) => s.isAuthenticated ?? false)
);
}
public async signIn(): Promise {
await this.oktaAuth.signInWithRedirect();
}
public async signOut(): Promise {
await this.oktaAuth.signOut();
}
}
And here is app.module.ts:
const oktaConfig: OktaAuthOptions = {
scopes: [‘profile’, ‘openid’, ‘groups’, ‘email’]
};
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
HeaderComponent,
FooterComponent,
ThankyouComponent
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
FlexLayoutModule,
MatToolbarModule,
MatMenuModule,
MatIconModule,
MatCardModule,
MatButtonModule,
MatTableModule,
MatDividerModule,
AppRoutingModule,
OktaAuthModule,
MatFormFieldModule,
FormsModule,
MatInputModule,
MatOptionModule,
MatSelectModule,
MatSlideToggleModule,
MatProgressSpinnerModule,
MatSortModule,
MatPaginatorModule,
ReactiveFormsModule,
MatNativeDateModule,
MatRadioModule,
MatTooltipModule,
MatSelectModule,
MatSortModule,
MatTabsModule,
MatDialogModule,
MatDatepickerModule,
MatCheckboxModule
],
providers:
[
{ provide: OKTA_CONFIG, useValue: { oktaAuth: oktaConfig } }
],
bootstrap: [AppComponent]
})
export class AppModule {
}
and below is login.component.ts:
export class LoginComponent implements OnInit {
widget = new OktaSignIn({
scopes: [‘profile’, ‘openid’, ‘groups’, ‘email’]
});
isAuthenticated = false;
constructor(@Inject(OKTA_AUTH) public oktaAuth: OktaAuth, private authStateService: OktaAuthStateService, private router: Router) {
if (this.isAuthenticated) {
this.router.navigate([‘/home’]);
}
// Show the widget when prompted, otherwise remove it from the DOM.
router.events.forEach(event => {
if (event instanceof NavigationStart) {
switch (event.url) {
case ‘/login’:
break;
default:
this.widget.remove();
break;
}
}
});
}
ngOnInit(): void {
if (this.isAuthenticated) {
this.router.navigate([‘/home’]);
}
this.widget.showSignInToGetTokens({
el: ‘#okta-signin-container’
}).then(async (tokens: Tokens | undefined) => {
const originalUri = this.oktaAuth.getOriginalUri();
if (originalUri === DEFAULT_ORIGINAL_URI) {
this.oktaAuth.setOriginalUri(‘/’);
}
await this.oktaAuth.signInWithRedirect().then(
_ => this.router.navigate([‘/home’])
);
}).catch((err: any) => {
// Typically due to misconfiguration
throw err;
});
}
}