Azure AD B2C Single Page App Roles

Question

We are trying to integrate Azure AD B2C into a SPA. We want to include Roles in the ticket so that we can use AuthorizeRoles & IsInRole in the api. We have looked at a couple of examples.

Example 1

Example 2

The first example isn't a SPA and doesn't include roles. It is accepted that including membership & groups in the ticket using Azure AD B2C isn't supported as per below link.

Azure AD B2C Group Membership Feature Feedback

The workaround as suggested above seems to be to use the "OnAuthorizationCodeReceived" event as per below to inject/add your own Role claims to the ticket.

Workaround

The issue we have is that we are using a SPA so we need to follow example 2, we also need to be able to add our own manged roles into the ticket which isn't a supported feature but Microsoft have said there is a workaround as shown. The workaround however doesn't work with MSAL.js as in example 2.

How can we include our own managed Roles into the ticket using the MSAL.js library so we can integrate Azure AD B2C into our SPA enabling us to use AuthorizeRoles & IsInRole in the api?

Answer 1

A few things first, you mentioned you are using the MSAL.js library and this means the v2 endpoint. Currently (as of 05/16/2018), the v2 endpoint has limitations on roles and groups, see v2 limitations where it states:

The v2.0 endpoint does not support issuing role or group claims in ID tokens.

ID tokens are used in the implicit flow with the v2 endpoint, see here Azure AD v2 Spa Guided Setup and read about half way down under More Information

Bottom line is to be absolutely sure the v2 endpoint (and MSAL libraries) can support your requirements.

For myself, we ended up going with the v1 endpoint and ADAL libraries in part because of limitations like this. But here are some examples of using roles in code. Note that these repos are fairly new and I'm still building out the documentation. There are two repos, one an stand alone angularjs ui project and another is a set of APIs (they are demos I used at a codecamp presentation). Read on below about roles in AAD. Only the UI example uses the ADAL libraries (note: the ADAL and MSAL libraries are about managing the tokens in the clients and are not the libraries used for locking down the back ends).

APIs: https://github.com/BgRva/aad_adal_api_dn_std/tree/Step_C

UI: https://github.com/BgRva/aad_adal_ui_ng_js/tree/Step_C

Some notes about Roles in AAD:

• Roles are application specific, so in the examples above, the same roles have to be registered for all the applications that will use them (this includes the role Id as well)
• You can give multiple roles to a user in AAD, you just need to add them multiple times to that application with a different role selected.
  • Manually adding users to roles will not scale and requires lots of clicks in the portal. It can be easier managed with groups but only at the AAD Premium Level 2 do you get this benefit
  • Supposedly there is a way to programmatically add roles but I have not found anything about it

Cheers