Azure AD authentication in Angular 6

Question

I have an Angular app(Angular CLI 6.1.0) and I am trying to integrate authorization with the Azure Active Directory using OpenID Connect protocol. The app had a previously working OpenID functionality and I am trying to use that. The app uses the angular-auth-oidc-client(10.0.15) library. This is how it looks: The login page has OidcSecurityService dependency from the mentioned library. Pressing the login button calls the doOIDCLogin function:

doOIDCLogin(){
	this.oidcSecurityService.authorize();
}

This will redirect the page to the Microsoft login page. This tells me, that the configuration was correct and the app can see the OpenID Connect metadata of my Active Directory application. After a successful login(I can see the login in the Active Directory logs) I am redirected to the home page of my Angular application. Now the ngOnInit function is called in the app.component.ts file, which checks if the OidcSecurityService managed to authenticate:

ngOnInit(): void {
	this.oidcSecurityService.getIsAuthorized().subscribe((auth) => {
		console.log(auth, this.oidcSecurityService.getToken()));
	}
}

Here the auth variable is set to false and the token from the service is an empty string.

Is reloading the page causes the service to discard the values? Should I use an another method the get the JWT after authorization?

Answer 1

Hello @Tamás Vizvári , a similar issue to the one described (the auth variable is set to false) was reported in github and fixed in version 11. Please upgrade angular-auth-oidc-client to the aforementioned or greater version.

Let us know if you need additional assistance. If the answer was helpful, please accept it and rate it so that others facing a similar issue can easily find a solution.