Groups-based authorization in Blazor WebAssembly

This post was most recently updated on April 29th, 2022.

This article will take a look at a neat authorization option for Blazor WebAssembly – utilizing group memberships when defining policies. This isn’t a tutorial or an overview of Blazor – rather, we start from you already having your Blazor WebAssembly project set up, and we’ll be taking a look into modifying it to use group membership claims with policy-based authorization. This is a bit trickier than using roles, which Blazor WebAssembly already supports quite well.

But before that – Blazor? That sounds familiar – what was it again?

Background

Blazor is great. It’s all the rage. Really.

You can write slick code that runs in the browser without writing a line of JavaScript. Although, if you do like your JavaScripts, you can call them from C#. Or you can call C# from JavaScript. And it all (kind of) just works.

Anyway – with Blazor, you currently have 2 options for your implementation (with a couple of additional ones coming in): Blazor Server (a lot like ASP.NET MVC with Razor pages), and Blazor WebAssembly (pretty much the same but separated in a couple of different projects).

In reality, though, the former is hosted on a server as a SPA that requires constant connection and maintains a session, and the latter is compiled into WebAssembly that’s loosely coupled with a server backend but doesn’t require an always-on connection.

Ah, but this wasn’t supposed to be a Blazor 101 or an overview of Blazor architectures. No, no – we’re simply looking into the specific case of utilizing group memberships for your authorization in Blazor wasm. How’s that going to work, then?

Solution

It took me a couple of hours of tweaking, but here’s something that works:

Et voila! Now you can use it somewhat like this:

[Authorize(Policy = MemberOfGroup)]
[ApiController]
[Route("api/[controller]")]
public class YourController : Controller

And this:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <AuthorizeView Policy="MemberOfGroup">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="secretPage">
                    <span class="oi oi-lightbulb" aria-hidden="true"></span> User Management
                </NavLink>
            </li>
        </AuthorizeView>
    </ul>
</div>

All good? Let me know if it worked for you!

References & notes

• This is a pretty good tutorial on configuring CustomUserFactory.cs for roles:
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/azure-active-directory-groups-and-roles?view=aspnetcore-5.0
• https://stackoverflow.com/questions/64968789/blazor-cascading-authorizeview-policy-not-working
• https://docs.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-5.0&tabs=visual-studio&viewFallbackFrom=aspnetcore-3.0#authorizeview-component

Appendix 1 – CustomUserFactory.cs

using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Text.Json;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;

public class CustomUserFactory
    : AccountClaimsPrincipalFactory<RemoteUserAccount>
{
    public CustomUserFactory(IAccessTokenProviderAccessor accessor)
        : base(accessor)
    {
    }

    public async override ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var user = await base.CreateUserAsync(account, options);

        if (user.Identity.IsAuthenticated)
        {
            var identity = (ClaimsIdentity)user.Identity;

            var groupClaims = identity.Claims.Where(x => x.Type == "groups").ToArray();
            var allClaims = identity.Claims.Where(x => x.Type.Contains("group")).ToList();

            if (groupClaims.Any())
            {
                foreach (var existingClaim in groupClaims)
                {
                    identity.RemoveClaim(existingClaim);
                }


                List<Claim> claims = new List<Claim>();

                foreach (var g in groupClaims)
                {
                    var groupGuids = JsonSerializer.Deserialize<string[]>(g.Value);

                    foreach (var claim in groupGuids)
                    {
                        claims.Add(new Claim(groupClaims.First().Type, claim));
                    }

                }

                foreach (var claim in claims)
                {
                    identity.AddClaim(claim);
                }
        }

        return user;
    }
}

• Author
• Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)

• “Performing cleanup” – Excel is stuck with an old, conflicted file and will never recover. - November 12, 2024
• How to add multiple app URIs for your Entra app registration? - November 5, 2024
• How to access Environment Secrets with GitHub Actions? - October 29, 2024