How to Set up Blazor Web App in Net 8 with Microsoft Identity Auth

Question

How to Set up Blazor Web App in Net 8 with Microsoft Identity Auth

Riley McLaughlin 5

When looking at the MS documentation for Net 8 I do not see a document explaining how to secure a Blazor Web App with ME-ID, though there is a corresponding document for standalone WASM with ME-ID https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-entra-id?view=aspnetcore-8.0

In .NET 7 we have this standalone wasm document but we also have the Hosted with ME-ID doc which covers how to secure the server and client using MSAL. But since Web Apps have sort of replaced the concept of a hosted app in NET8, it would be nice to have a document outlining the holistic approach for ME-ID auth in a Web App.

I have tried a few approaches in NET 8 with a Blazor web app and I have yet to find a solution that doesn't require me to put my whole project in InteractiveServer mode. I would like to take advantage of InteractiveAuto and InteractiveWASM within my project while still maintaining my ME-ID auth that I used in NET7.

I would like to be able to redirect to the MS prompt when a user is not authenticated, and read their httpcontext in either the server or client project. I would also like to let them sign out and switch accounts if they are signed in. I would like to still retain flexibility of rendering modes while doing this. I also want my controller endpoints secured using this auth. Is there a resource for this that I am missing?

Thank you!

-Riley

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2024-01-10T08:14:39.2066667+00:00

How did you created your application? Which identity type you been chosen? Could you please share your current configuration so that it can be reproduce or investigate accordingly. Have you used AuthenticationStateProvider and AuthorizationService in components while checking authentication?
Riley McLaughlin 5 Reputation points

2024-01-10T19:56:08.4866667+00:00

@Farid Uddin Kiron MSFT Please see my below answer with code samples/explanation. I believe I commented in the wrong spot.
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2024-01-11T00:55:04.3733333+00:00

Okay, thank your for your response, yeah right you are but its okay.

1 answer

Your answer

Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2024-01-10T08:14:39.2066667+00:00

How did you created your application? Which identity type you been chosen? Could you please share your current configuration so that it can be reproduce or investigate accordingly. Have you used AuthenticationStateProvider and AuthorizationService in components while checking authentication?
Riley McLaughlin 5 Reputation points

2024-01-10T19:56:08.4866667+00:00

@Farid Uddin Kiron MSFT Please see my below answer with code samples/explanation. I believe I commented in the wrong spot.
Farid Uddin Kiron MSFT 456 Reputation points Microsoft External Staff

2024-01-11T00:55:04.3733333+00:00

Okay, thank your for your response, yeah right you are but its okay.

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

the docs cover server and wasm mode, but don't yet cover auto. see these threads: https://github.com/dotnet/aspnetcore/issues/48772 https://github.com/dotnet/AspNetCore.Docs/issues/29452 to support auto, you use server authentication and a custom client authentication provider. the latest blazor template supports individual accounts and has a sample client authentication provider initialized by the server code.

Riley McLaughlin 5

I used the default Blazor Web App template, no identity/auth selection. In my main project program.cs I add:

builder.Services
.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));

builder.Services.AddAuthorization(options =>
{
    options.FallbackPolicy = options.DefaultPolicy;
});

builder.Services.AddCascadingAuthenticationState();

builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI();

In my Client project program.cs I add:

builder.Services.AddCascadingAuthenticationState(); My Routes.razor is modified as such:

@using BlazorApp4.Components.Layout
@using Microsoft.AspNetCore.Components.Authorization

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>


<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
        <Found Context="routeData">
           

            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>

                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p role="alert">You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

In my mainlayout I have a LoginDisplay component with an AuthorizeView that displays the users UPN if authorized with a sign out link. It also captures their httpcontext like so

<AuthorizeView>
    <Authorized>
        @{
            App.Translation.UserName = context.User.Identity?.Name;
            App.Translation.UserId = context.User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value;
        }

        <MudStack Row=true AlignItems="AlignItems.Center">

            <MudText>
                @ParseName(App.Translation.UserName)

            </MudText>

            @{
                var url = $"MicrosoftIdentity/Account/SignOut?redirectUri={Uri.EscapeDataString("https://localhost:7091")}";
            }

            <MudButton Href=@url Color="Color.Tertiary">
                Log Out
            </MudButton>

            <MudAvatar Color=Color.Info>@ParseInitials(App.Translation.UserName)</MudAvatar>

        </MudStack>



    </Authorized>
    <NotAuthorized>
        <MudButton Href="authentication/login" Color="Color.Tertiary">
            Log In
        </MudButton>
    </NotAuthorized>
</AuthorizeView>

This gives me a fully functional MSAL experience like I could provide in Net7, but somewhere along the way interactivity is broken for all pages unless @rendermode InteractiveServer is specified. Example: I have added the following to Home.razor. The button @onclick will not fire without @rendermode InteractiveServer

<div>@Display</div>

<button @onclick=@Test>Test</button>

@code{
    bool On = false;
    string Display => On ? "On" : "Off";

    void Test()
    {
        On = !On;
    }
}

Please advise on what part of this would break interactivity. Thank you very much for reviewing

Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2024-01-10T22:31:13.4033333+00:00

for auto mode to work, during pre-render the server code needs to write the authentication state to the client (PersistingRevalidatingAuthenticationStateProvider), and the client needs read it (PersistentAuthenticationStateProvider). also you need the custom client login redirect code. create a sample blazor web with individual accounts, to get sample code.

Share via

How to Set up Blazor Web App in Net 8 with Microsoft Identity Auth

1 answer

Your answer