Issue
I am trying to work through this demo: https://developer.okta.com/blog/2018/12/04/angular-7-oidc-oauth2-pkce#upgrade-to-angular-7 This is one of a few tutorials which I have gone through and I keep on getting the same results
Even after I successfully log into Okta oktaAuth.isAuthenticated() is still set to false.
I know I am successfully logging in because the dashboard says I was successful and when I try to log in again I don't get redirected to the Sign In Page.
Here is my code:
app.component.html
<h1>Welcome to {{ title }}!</h1>
<div *ngIf="isAuthenticated">
<!-- <h2>Hi, {{user?.name}}!</h2> -->
<button (click)="oktaAuth.logout()">Logout</button>
</div>
<div *ngIf="!isAuthenticated">
<button (click)="oktaAuth.loginRedirect()">Login</button>
</div>
<router-outlet></router-outlet>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { OktaAuthService, UserClaims } from '@okta/okta-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'ng-secure';
isAuthenticated: boolean;
email: string;
constructor(public oktaAuth: OktaAuthService) {
}
async ngOnInit() {
this.isAuthenticated = await this.oktaAuth.isAuthenticated();
// Subscribe to authentication state changes
this.oktaAuth.$authenticationState.subscribe( async(isAuthenticated: boolean) => {
this.isAuthenticated = isAuthenticated;
});
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
//import { OAuthModule } from 'angular-oauth2-oidc';
import { OktaAuthModule } from '@okta/okta-angular';
const config = {
issuer: 'https://dev-xxxxxx.oktapreview.com/oauth2/default',
redirectUri: window.location.origin + '/implicit/callback',
clientId: 'Correct Client Id'
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
//OAuthModule.forRoot()
OktaAuthModule.initAuth(config)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OktaCallbackComponent } from '@okta/okta-angular';
const routes: Routes = [
{
path: 'implicit/callback',
component: OktaCallbackComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Is there another flag besides oktaAuth.isAuthenticated() to indicate that I am successfully logged in?
Thanks for your help.
I was able to get the okta-hosted-login example running which is provided by okta. However, this app is in Angular 5.
One thing I found interesting is if I try to log in using my Angular 7 app, I get the following error message:
Access to XMLHttpRequest at 'https://dev-979343.oktapreview.com/oauth2/default/.well-known/openid-configuration' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I don't get this CORS error when I ues the okta-hosted-login Angular 5
Solution
The real issue was related to this post: okta Angular 7 App returning a CORS error
With the help of @MattRaible pointing me to the right direction I was able to resolve this issue. Basically, I didn't have authority to add a Trusted Origin (menu item API | Trusted Origin) on the okta site. Once an administrator added ‘http://localhost:4200’ as a Trusted Origin everything started working.
Thanks to everyone who commented on this post.
Answered By - Richard
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.