Authenticating Angular apps with Azure Active Directory using MSAL Angular 1.0
Microsoft finally released Version 1.0 of its Library for Angular that facilitates the implementation of OAuth 2.0 token based authentication into Azure Active Directory.
Originally being scheduled for December 2019, MSAL Angular 1.0 was finally released on May 3rd 2020 ending a long phase of workarounds and beta versions of the Angular variant of the MSAL library for Single Page Applications (SPA). Version 1.0 introduces some breaking changes especially in the configuration part of the library. So make sure to checkout the upgrade guide here for details: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md
Prerequisites
- Nodejs & NPM, https://nodejs.org/
- Angular CLI, https://cli.angular.io/
- Azure AD, get your free Azure account here: https://azure.microsoft.com/en-us/free/
- Visual Studio Code (or whatever you like for developing Angular apps): https://code.visualstudio.com/
Configure a new app registration in Azure AD
To use Azure AD as an authentication provider in Angular we need to register a new app in the Azure portal: https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps, click on new registration:
Enter a display name, select Single-page application (SPA) and enter http://localhost:4200 under Redirect URI. This is a local testing URI of our angular app. Save the registration.
Note: later we will need to also add the published URI of our app.
On the overview page make sure to copy the Application (client) ID and your Directory (tenant) ID:
Select Authentication on the left panel and check Access tokens and ID tokens. This is needed so we can get information about the logged in user (ID token) as well as request access tokens to authenticate to our backend. Make sure to also save these changes.
Finally grant admin constent to the app to sign in and read user profile under API permissions:
Now we have all the information we need to setup our Angular app.
Setup a new Angular app to use authentication
So let’s get started and create a new Angular app using the Angular CLI with routing enabled:
Next up we need MSAL and @Azure/msal-angular libraries installed intro our project:
Open the project in Visual Studio Code to start developing:
Since I like to keep my configuration central and some values like the redirect url will change in production let’s put all our authentication configuration in the environment.ts:
To configure MSAL authentication we need to create a factory method and let it return a new configuration object including our configuration parameters in our app.module.ts:
Then we can provide the MSAL_CONFIG with this factory method:
We also need to create a factory method for the angular specific configuration of MSAL:
This needs also to be provided this time as MSAL_ANGULAR_CONFIG and we also need to provide MsalService (which will be our API to interact with MSAL) and the MsalModule which includes the MsalGuard to protect routes:
Protect a route and content using Msal
To test the authentication we need to create an area of our app that needs to be login protected. So let’s generate a new component:
The newly generated ProfileComponent will be accessible via a route. So we need to setup a router-outlet in our AppComponent:
And also create a route in app-routing.module.ts. This route needs to be protected and shall only be activated when we have successfully authenticated as a user in Azure AD. Therefore the route uses the MsalGuard:
Since this route is using an empty path it will be our initial starting point of the app. Starting the app we should be redirected to the Azure AD login right away:
As we have provided the tenant id we also get a branded login experience. After signing in we will be redirected back into our app and we can see the content of the profile component:
Now we can use the MsalService to get some information (from the ID token) about the logged in user in our profile component:
Let’s bind these two properties in our template:
Et voilá!
Using access tokens to authenticate API calls
More important limiting our user interface to signed in users it’s to limit access to sensible information stored in our backend systems. Therefore access tokens are being used to authenticate requests. The MSAL library also helps doing this. As a simple example lets try to load the signed in user’s profile picture. To do this we can use the Microsoft Graph, a set of RESTful APIs to interact with data stored in Microsoft 365.
In many cases apps use multiple APIs, e.g. Microsoft Graph and a custom backend, and every endpoint will typically require its own access token that needs to be acquired with a specific scope.
The first step is to create a mapping table of endpoints and scopes that we want to create access tokens for. The idea here is that every time a request is made to one of the provided protected resources in that mapping table, the MSAL library is acquiring a matching access token in the background and passes it into the request’s authorization header. This protected resource map will be part of the MSALAngularConfigFactory method:
The second part of the configuration requires to provide the MsalInterceptor for the HTTP_INTERCEPTORS. This basically is the plumbing to intercept http requests and sneak in the access tokens:
So let’s create a new service to call the Microsoft Graph and download the user’s profile photo:
We use this service to fetch the photo in the profile component:
And render it in the template:
That’s it! The user photo is shown:
Summary
With Version 1.0 of the MSAL Angular library setting up authentication for Angular apps and acquiring access tokens to authenticate http requests is as simple as adding some configuration in the app module. This reduces project setup time for a lot of common line of business app scenarios.
