Image for post
Image for post
Photo by Bekky Bekks on Unsplash

Role based authorization in Angular with Azure AD and app roles

How to limit access to apps, routes and features in Angular by assigning users to app roles in Azure Active Directory

Philipp Bauknecht
Jun 11, 2020 · 3 min read

In this previous post I discussed how to authenticate users in Angular using the Microsoft authentication library (MSAL) and Azure Active Directory: https://medium.com/medialesson/authenticating-angular-apps-with-azure-active-directory-using-msal-angular-1-0-d7b2f4914be9

Authenticating users in an Angular app is usually just the first step to control and limit access in an app and to features. Now that we know who the users is and that the user is a member of our organization we want to decide whether to allow access to the app, certain areas or features of the app based on app roles.

One important drawback to consider: app roles are created individually per app registration. This means that in typical client server situations where we have a client (e.g. Angular) and a server/backend (e.g. Azure Functions) this means we need to create app roles in both app registrations and also manage user assignments for both separately. This can be mitigated by assigning app roles to security groups but this feature is limited to Azure AD premium tenants and so not available if an organization is using the Azure AD that comes with Microsoft 365.
Read more about app roles and other options for authorization here: https://docs.microsoft.com/de-de/azure/architecture/multitenant-identity/app-roles

Setup an app role

App roles are created in the app registration’s manifest and users can be assigned those roles. So let’s open our Angular app registration’s manifest in the Azure portal and add a role:

Image for post
Image for post

Note that each role needs a unique id and the value property is the value that will be included in the user’s claims.

Assign users to an app role

To assign users open the app registration by opening it via Enterprise applications instead of App registrations:

Image for post
Image for post

Switch to Users and groups and select Add user:

Image for post
Image for post

Select a user and note the selected role:

Image for post
Image for post

Access user’s role in Angular

Building on the Angular authentication sample created here https://medium.com/medialesson/authenticating-angular-apps-with-azure-active-directory-using-msal-angular-1-0-d7b2f4914be9 let’s output the user’s role in the profile component:

And bind it in the template:

This gives us an array of the values of a user:

Image for post
Image for post

Limit routes to roles

A common use case is to limit a route like settings to a role like the Admin role. This can be achieved by implementing a role guard.

This guard checks if there is an intersection between the user’s roles and the allowed roles provided in the route’s data property. To use this guard we also need to add the guard and a data property to our route config:

Summary

With app roles it’s just a few clicks to enable authorization in Angular!

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