Search code examples
vue.jsazure-functionsazure-ad-b2cazure-ad-msalpkce

Obtain Azure B2C user permissions (authorize user) using Auth Flow With PKCE, MSAL v2, Vue.js, & Azure Functions

Using Vue.js, Azure B2C Tenant and Azure Functions (C#), we are able to authenticate users into our application. We’re using the Auth Flow with PKCE & leveraging the MSAL v2 library on the front-end to do so. Specifically we're using the npm package @azure/msal-browser for MSAL.

The friction point: we need to get a user’s authorization (User/Manager/OrgAdmin/GlobalAdmin) for use in restricting access to components of our application. There seem to be copious solutions involving implicit flow and ADAL but not many involving MSAL & Auth flow.

Ultimately all I’m looking for is a high level description of how to obtain the equivalent of roles/groups/permissions for a user.

I can make use of Microsoft Graph API within Vue.js when using implicit flows but not when using MSAL v2 & Auth flow w/PKCE.

Presently I’m looking into Authorizing an internal API (served via Azure Functions) registered to our B2C tenant to obtain roles/groups/permissions using the Microsoft Graph API.

I feel like there’s a simpler way to obtain something as fundamental as user roles and permissions. I’d welcome some insight.

Thank you!

Edit (Elaboration)

This isn't the exact use case but it does get to the root of the issue I'm struggling with.

User authenticates into our SPA using Azure B2C flow by signing in with their personal Google account.

I now need to obtain authorization for the user to determine what they're allowed to do within the application:

-Some users can view data.

-Some users can edit data.

Roughly, how does one accomplish this? I can pull group information using Microsoft Graph API when using MSAL w/Implicit flow, but not B2C using auth flow with PKCE.

Thanks again!

Solution

  • I'm afraid that there is no Out-of-the-box AAD B2C solution that gets the Group / Directory role information.

    You can get Group claims in B2C using custom code through custom (IEF) policies.

    If you are using user flow, you can consider custom attribute. For example, create a custom attribute named AADRole. Assign the real AAD role as the value to different user and then get the claim from id token after B2C users sign in.

    Refer to this answer for more details.