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.
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.