How do I use the Blazor Clientside AuthorizeView control policy feature with Azure Ad?

Question

I am using the Microsoft example featured at this link https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-azure-active-directory?view=aspnetcore-3.1

My Program.cs file looks like this

    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => 
             new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddAuthorizationCore(config =>
            {
                config.AddPolicy("BackOfficeEditor", policy =>
                    policy.RequireClaim("groups", "4dd6726b-3949-4b8a-a8e0-9e5eaa65e358"));
            });


            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
            });

            await builder.Build().RunAsync();
        }
    }

My index.razor files looks like this

@page "/"
<AuthorizeView Policy="BackOfficeEditor">
    <p>You can only see this if you satisfy the 
    <b style="color:magenta;font-size:larger">
    BackOfficeEditor</b> policy.</p>
     </AuthorizeView>

    <AuthorizeView>
        <NotAuthorized>
            <br />
            You are not logged in
            <br />
        </NotAuthorized>
        <Authorized>
            <br />
            Hello, @context.User.Identity.Name! <br />
            <h2>here's the list of your claims:</h2>
            <ul>
                @foreach (var claim in context.User.Claims)
                {
                    <li><b>@claim.Type</b>: @claim.Value</li>
                }
            </ul>
        </Authorized>
    </AuthorizeView>

You can see in the claims that the user (minonOne) has the right claim in the "groups" section but it doesn't display the custom messsage I added for users in that group.

What did I miss in my configuration of this?

Answer 1

I found the answer in this Microsoft help page. https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/azure-active-directory-groups-and-roles?view=aspnetcore-3.1