Hi,
I connected my Angular app to Okta login functionality for SPA.
I followed along this guide and when the user clicks on the login button made from the guide, the redirect to the Okta login page works well. Then the user enters the credentials and clicks login. Here, the application is loading until it crashes (site can’t be reached). I feel like this may be due to my configuration of the callback route, or redirect URI but have been unable to find a solution.
import { OKTA_CONFIG } from '@okta/okta-angular';
import { OktaAuthModule } from '@okta/okta-angular';
import { OktaCallbackComponent } from '@okta/okta-angular';
import { OktaAuthGuard } from '@okta/okta-angular';
import { ProfileComponent } from './profile/profile.component';
import { OktaLoginRedirectComponent } from '@okta/okta-angular';
import { LoginComponent } from './login/login.component';
const CALLBACK_PATH = 'login/callback';
const config = {
clientId: '0f52ad1bksljVESOw5d6',
issuer: 'https://dev-3761672.okta.com/oauth2/default',
redirectUri: 'http://localhost:44311/login/callback',
scopes: ['openid', 'profile', 'email'],
pkce: true
}
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
AuthorWithBooksComponent,
AuthorsComponent,
BooksComponent,
ProfileComponent,
LoginComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
OktaAuthModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'author-with-books/:id', component: AuthorWithBooksComponent },
{ path: 'authors', component: AuthorsComponent },
{ path: 'login', component: LoginComponent },
{ path: 'books', component: BooksComponent, canActivate: [OktaAuthGuard] },
{ path: CALLBACK_PATH, component: OktaCallbackComponent },
{ path: 'profile', component: ProfileComponent }
])
],
providers: [
{
provide: OKTA_CONFIG, useValue: config
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OktaAuthService } from '@okta/okta-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'app';
isAuthenticated: boolean;
constructor(public oktaAuth: OktaAuthService) {
// Subscribe to authentication state changes
this.oktaAuth.$authenticationState.subscribe(
(isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
);
}
async ngOnInit() {
this.isAuthenticated = await this.oktaAuth.isAuthenticated();
}
login() {
this.oktaAuth.signInWithRedirect();
}
}
app.component.html
<body>
<app-nav-menu></app-nav-menu>
<div class="container">
<button *ngIf="!isAuthenticated" (click)="login()"> Login </button>
<router-outlet></router-outlet>
</div>
</body>
My general settings
What the dev tools shows
okta-help-3|690x387
Let me know if you need to see any other code fragments or setup.
Thanks much for your help.