isAuthenticated always true

Questions
1

Using the guide from https://developer.okta.com/code/angular/okta_angular_auth_js/

I can login and my access token populates after logging in.

token_works
token_works936×435 33.9 KB

But isAuthenticated doesn’t seem to be doing anything.

app.service.ts
export class OktaAuthService {

  oktaAuth = new OktaAuth({
    url: 'someurl',
    clientId: 'somekey',
    issuer: 'someissuer',
    redirectUri: 'http://127.0.0.1:8081/callback',
    pkce: true
  });

  debug() {
	console.log(this.oktaAuth.tokenManager.get('accessToken'));
}

  constructor(private router: Router) {}

  async isAuthenticated() {
    // Checks if there is a current accessToken in the TokenManger.
	return !!(await this.oktaAuth.tokenManager.get('accessToken'));
  }

  login() {
    // Launches the login redirect.
    this.oktaAuth.token.getWithRedirect({
      scopes: ['openid', 'email', 'profile']
    });
  }

  async handleAuthentication() {
    const tokens = await this.oktaAuth.token.parseFromUrl();
    tokens.forEach(token => {
      if (token.idToken) {
        this.oktaAuth.tokenManager.add('idToken', token);
      }
      if (token.accessToken) {
        this.oktaAuth.tokenManager.add('accessToken', token);
      }
    });
  }

  async logout() {
	console.log(this.oktaAuth.tokenManager.get('accessToken'));
    this.oktaAuth.tokenManager.clear();
    await this.oktaAuth.signOut();
  }

With this html, I see the icon, not the login button.
layout.component.html

    <li><button *ngIf="!oktaAuth.isAuthenticated()" (click)="oktaAuth.login()"> Login </button></li>
    <li *ngIf="oktaAuth.isAuthenticated" class="nav-item dropdown" dropdown placement="bottom right">
    	  <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" dropdownToggle (click)="false">
        <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"/>
      </a>
      <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
        <a (click)="oktaAuth.logout()" class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
      </div>

With this html, I see the login button, not the icon.
layout.component.html

    <li><button *ngIf="oktaAuth.isAuthenticated()" (click)="oktaAuth.login()"> Login </button></li>
    <li *ngIf="!oktaAuth.isAuthenticated" class="nav-item dropdown" dropdown placement="bottom right">
    	  <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" dropdownToggle (click)="false">
        <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"/>
      </a>
      <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
        <a (click)="oktaAuth.logout()" class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
      </div>

Using the second html, I can login with redirect and the access token is captured. The buttons don’t change and oktaGuard never protects my routes. I can see the value change when there’s a access key

With accessToken

1. ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

  1. Symbol(Symbol.toStringTag): (...)
  2. __zone_symbol__state: true
  3. __zone_symbol__value: true
  4. __proto__: Object

Without access token

1. ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

  1. Symbol(Symbol.toStringTag): (...)
  2. __zone_symbol__state: true
  3. __zone_symbol__value: false
  4. __proto__: Object

Also after the key is stored, it never redirects from http://127.0.0.1:8081/callback

Any help would be greatly appreciated.