MSAL:3.0/Angular16: BrowserAuthError: uninitialized_public_client_application: Msal angular...

I want to authenticate the user when ever user loads the webpage to achieve this i am using MSAL Angular library (V3.0) and handled redirects as per the documentation, But still i'm facing the below issue.

BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API.

can any one let me know how to authenticate the user once page loaded successfully using MSAL app.module.ts

export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: environment.msalConfig.auth.clientId,
authority: environment.msalConfig.auth.authority,
redirectUri: window.location.origin,
postLogoutRedirectUri: '/',
navigateToLoginRequestUrl: true
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage
},
})
}
@NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
MsalModule
],
providers: [
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory
},
MsalService,

],
bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }


app.component.ts

export class AppComponent implements OnInit, AfterViewInit, OnDestroy{
title = 'sso-poc';
loginDisplay = false;
private readonly _destroying$ = new Subject<void>();
constructor(private msal:MsalService, private msalBroadcastService: MsalBroadcastService) {}
ngOnInit(): void {
this.msal.loginRedirect();
}
ngOnDestroy(): void {

}
ngAfterViewInit(): void {

}


login.component.ts

export class LoginComponent implements OnInit {
loginDisplay = false;
// private readonly _destroying$ = new Subject<void>();
constructor(private msal: MsalService, private msalBroadcastService: MsalBroadcastService) {}
ngOnInit(): void {

this.msalBroadcastService.msalSubject$.pipe(
filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS)
).subscribe((result) => {
console.log("Login success")
const payload = result.payload as AuthenticationResult;
this.msal.instance.setActiveAccount(payload.account);
})

this.msalBroadcastService.inProgress$.pipe(
filter((status: InteractionStatus) => status === InteractionStatus.None)
).subscribe((res) => {
// UI activity
})

}

checkLoginAccount() {
console.log(this.msal.instance.getAllAccounts().length)
return this.msal.instance.getAllAccounts().length > 0;
}


index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SsoPoc</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<app-redirect></app-redirect>
</body>
</html>

Continue reading...