I am in the process of developing an application using Angular along with IdentityServer as the Single Sign-On (SSO) provider in ASP.NET.
After successfully logging in and retrieving user information from the authentication server: User info
The following method is triggered when the SSO redirects the user back after logging in (the displayed user info is from the previous image):
//Auth service
async completeAuthentication()
{
this.user = await this.manager.signinRedirectCallback();
console.log(this.user);
this.authNavStatusSource.next(this.isAuthenticated());
}
Although I have defined the user at this point, when attempting to use the user's username in the header, it appears as undefined: Undefined user
This is where the console.log is triggered:
//Header component
ngOnInit(): void {
this.subscription = this.authService.authNavStatus$.subscribe(status => this.isAuthenticated = status);
this.name = this.authService.username;
}
//Auth service
get username(): string
{
console.log(this.user);
return this.user != null ? this.user.profile.preferred_username : '';
}
For reference, here are the full files for the auth service and header component:
auth.service.ts
import { Injectable } from '@angular/core';
import { UserManager, User } from 'oidc-client';
import { BehaviorSubject } from 'rxjs';
import { BaseService } from '../services/base.service';
import { ConfigService } from '../services/config.service';
@Injectable({
providedIn: 'root'
})
export class AuthService extends BaseService {
// Implementation details omitted for brevity
}
header.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AuthService } from '../core/authentication/auth.service';
@Component({
selector: 'app-header',
template: `
<!-- Template content omitted for brevity -->
`,
styles: [
'.navbar{ border-style: solid; border-width: 0px 0px 2px 0px; }'
]
})
export class HeaderComponent implements OnInit, OnDestroy {
// Member variables and methods implementation omitted for brevity
}
Despite utilizing the same get username() method in the home component successfully, why am I unable to access the user in my header component? It's perplexing that it works in one place but not the other.