okta Angular 7 oktaAuth.isAuthenticated() is false even after successfully logging in

Question

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

Answer 1

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.