Is there a way to trigger login page on app load?

Question

Is there a way to trigger the Azure Active Directory sign-in page when an app is first loaded?

I currently have some authentication code on an Angular 11 intranet site that uses APP_INITIALIZER to get the user's Windows credentials when the user first hits the URL, and from there, pass that data onto an API that is able to authenticate the user and get the required information.

Calls to the API are intercepted using an interceptor, and adding a withCredentials field in the request in order for this to happen.

I am currently looking into replacing this functionality with something similar using Azure AD, as we are moving from IIS hosted web servers, to hosting on an Azure App Service. As far as I know, Windows authentication via the browser does not work once hosted on Azure, so the next best option seems to be Azure AD, as it will still contain employee data similar to Windows login (using organization sign-ins).

I've had a look at the following so far:

• The code samples by Microsoft contain information on using MSAL v2, but does not have any example showing how I can immediately prompt the user to sign-in, instead of having to click on a login button first. The closest I've been able to get it to work is to add this.login() at the end of the ngOnInit() function in app.component.ts, but this feels rather quite like a hack, and isn't really doing it properly like APP_INITIALIZER.
• This example here does show me how to create an app that prompts the user to sign-in on load, but it using the much older MSAL v1 library. If possible, I'd like to go with v2, in the event that v1 is eventually deprecated

I am open to any ideas that helps keep me on Windows authentication, but will also be happy to make the move to Azure AD.

Answer 1

In case someone lands here while Googling.

The solution is to simply add MSALGuard to the default home route. This will force a login via Azure AD.