Image for post
Image for post
Original photo by Damon On Road on Unsplash

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.

Philipp Bauknecht
May 10, 2020 · 5 min read

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

Configure a new app registration in Azure AD

Image for post
Image for post
Azure AD App Registrations

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.

Image for post
Image for post
Register an application

On the overview page make sure to copy the Application (client) ID and your Directory (tenant) ID:

Image for post
Image for post
Client Id & 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.

Image for post
Image for post
Enable access and ID tokens

Finally grant admin constent to the app to sign in and read user profile under API permissions:

Image for post
Image for post

Now we have all the information we need to setup our Angular app.

Setup a new Angular app to use authentication

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

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:

Image for post
Image for post

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:

Image for post
Image for post

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á!

Image for post
Image for post

Using access tokens to authenticate API calls

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:

Image for post
Image for post

Summary

medialesson

We help our customers design, architect, develop and…

Philipp Bauknecht

Written by

CEO @ medialesson. Microsoft Regional Director & MVP Windows Development. Father of identical twins. Passionate about great User Interfaces, NYC & Steaks

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Philipp Bauknecht

Written by

CEO @ medialesson. Microsoft Regional Director & MVP Windows Development. Father of identical twins. Passionate about great User Interfaces, NYC & Steaks

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store