We have an Angular app authenticated by MSAL library per the following configuration in app.modules.ts:
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication(msalConfig);
}
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set("https://graph.microsoft.com/v1.0/me", ["user.read"]);
//Note: to add more URLs to protect, please follow the pattern below:
protectedResourceMap.set(`${environment.endPoints.WebApiUrl}/*`, ["https://MASKED.onmicrosoft.com/MASKED/Backend.Read", "https://MASKED.onmicrosoft.com/MASKED/Backend.Write"]);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap,
};
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: ['https://MASKED.onmicrosoft.com/MASKED/Backend.Read']
},
loginFailedRoute: "./login-failed"
};
}
The following code exists in app.component.ts
ngOnInit(): void {
this.isIframe = window !== window.parent && !window.opener;
/**
* You can subscribe to MSAL events as shown below. For more info,
* visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
*/
this.authService.instance.addEventCallback((message: EventMessage) => {
if (message.eventType === EventType.LOGIN_SUCCESS) {
this.signInService.signIn();
} else if (message.eventType === EventType.LOGOUT_SUCCESS) {
this.signOutService.signOut();
} else if (message.eventType === EventType.LOGIN_FAILURE) {
this.logger.log(LogLevel.Error, 'Login failed.');
if (message.error instanceof AuthError) {
this.logger.log(LogLevel.Error, 'Authentication error.');
}
}
});
this.msalBroadcastService.inProgress$
.pipe(
filter((status: InteractionStatus) => status === InteractionStatus.None),
takeUntil(this._destroying$)
)
.subscribe(() => {
this.setLoginDisplay();
});
}
We are able to get the Authentication token and send it to our HTTP-Triggered function app (aka Web API) successfully. We also need to incorporate the x-functions-key in all headers to be sent to the Web API but we failed to find a way in MSAL library to include x-functions-key in the headers.
We reviewed posts on GitHub and Stackoverflow by failed to find a solution. We are expecting the MSAL library to provide us a way to send any headers we want to the backend but we failed to find a way. Also, that will be great if we could eliminate some headers it is sending by default e.g. sec-ch-ua, sec-ch-us-platform, etc. to have a simpler reverse proxy setup in our docker configuration.
