Blazor Web App partly run code as WASM

Question

Blazor Web App partly run code as WASM

iKingNinja 140

I'm trying to create a register account page in Blazor Web App. I need the form submission callback to run on the client as it needs to set the authentication cookie, but I can't manage to achieve this.

This is my current component code:

@using ClassLibrary.Models.Auth
@using ClassLibrary.Models.Database
@using ClassLibrary.Localization.Shared.Forms
@using IDFW.Models.HttpClients

@rendermode InteractiveWebAssembly
@page "/auth/register"

@inject IStringLocalizer<Register> localizer
@inject ApiHttpClient api

<HeadContent>
    <link rel="stylesheet" href="/css/auth/login.css" />
    <link rel="stylesheet" href="/css/components/loader.css" />
</HeadContent>
<div class="content-container">
    <EditForm FormName="LoginForm" EditContext="editContext" class="data-form" OnValidSubmit="HandleOnValidSubmit">
        <DataAnnotationsValidator />
        <h1>@localizer["PageTitle"]</h1>
        <fieldset disabled="@isProcessing">
            <label>
                <p>@FormLocalization.FirstName<span class="danger">*</span></p>
                <InputText DisplayName="@FormLocalization.FirstName" @bind-Value="RegisterModel.FirstName" />
                <ValidationMessage For="() => RegisterModel.FirstName" class="danger" />
            </label>
            <label>
                <p>@FormLocalization.LastName<span class="danger">*</span></p>
                <InputText DisplayName="@FormLocalization.LastName" @bind-Value="RegisterModel.LastName" />
                <ValidationMessage For="() => RegisterModel.LastName" class="danger" />
            </label>
            <label>
                <p>Email<span class="danger">*</span></p>
                <InputText DisplayName="Email" @bind-Value="RegisterModel.Email" type="email" />
                <ValidationMessage For="() => RegisterModel.Email" class="danger" />
            </label>
            <label>
                <p>Password<span class="danger">*</span></p>
                <div class="form-password">
                    <InputText DisplayName="Password" @bind-Value="RegisterModel.Password" type="password" autocomplete="new-password" />
                    <span class="fluent-icon icon-ic_fluent_eye_16_filled password-toggle"></span>
                </div>
                <ValidationMessage For="() => RegisterModel.Password" class="danger" />
            </label>
            <label>
                <p>@AuthFormLocalization.ConfirmPassword<span class="danger">*</span></p>
                <div class="form-password">
                    <InputText DisplayName="@AuthFormLocalization.ConfirmPassword" @bind-Value="RegisterModel.ConfirmPassword" type="password" autocomplete="new-password" />
                    <span class="fluent-icon icon-ic_fluent_eye_16_filled password-toggle"></span>
                </div>
                <ValidationMessage For="() => RegisterModel.ConfirmPassword" class="danger" />
            </label>
        </fieldset>
        <fieldset class="form-checkbox-area" disabled="@isProcessing">
            <label>
                <InputCheckbox @bind-Value="RegisterModel.KeepLogin" />
                @AuthFormLocalization.KeepLogin
            </label>
            <label>
                <InputCheckbox @bind-Value="RegisterModel.AgreeLegal" />
                @((MarkupString)FormLocalization.LegalNote)
                <ValidationMessage For="() => RegisterModel.AgreeLegal" class="danger" />
            </label>
        </fieldset>
        <button type="submit" class="cta-btn primary-cta-btn" disabled="@isProcessing">
            @if (!isProcessing)
            {
                @localizer["Register"]
            }
            else
            {
                <span class="loader"></span>
            }
        </button>
        <p class="form-hint">@((MarkupString)localizer["FormHint"].Value)</p>
    </EditForm>
</div>
<script src="/js/form.js"></script>
@code {
    private RegisterModel RegisterModel { get; set; } = null!;
    private EditContext editContext = null!;
    private ValidationMessageStore validationMessageStore = null!;
    private bool isProcessing = false;

    [Inject]
    private NavigationManager navigation { get; set; } = null!;

    protected override void OnInitialized()
    {
        RegisterModel ??= new();
        editContext = new(RegisterModel);
        validationMessageStore = new(editContext);
        editContext.OnFieldChanged += (_, args) =>
        {
            validationMessageStore.Clear(args.FieldIdentifier);
            editContext.NotifyValidationStateChanged();
        };
    }

    private async Task HandleOnValidSubmit()
    {
        isProcessing = true;
        validationMessageStore.Clear();

        // Try register account
        HttpResponseMessage res = await api.HttpClient.PostAsJsonAsync("auth/register", RegisterModel);

        if (res.IsSuccessStatusCode)
        {
            navigation.NavigateTo("/");
        }
        else if (res.StatusCode == System.Net.HttpStatusCode.BadRequest)
        {
            HttpValidationProblemDetails problemDetails = (await res.Content.ReadFromJsonAsync<HttpValidationProblemDetails>())!;

            if (problemDetails.Errors != null)
            {
                foreach (KeyValuePair<string, string[]> message in problemDetails.Errors)
                {
                    FieldIdentifier fieldIdentifier = new(RegisterModel, message.Key);
                    validationMessageStore.Add(fieldIdentifier, message.Value);
                }

                editContext.NotifyValidationStateChanged();
            }
        }

        isProcessing = false;
    }
}

I want everything in the page to be rendered on the server as well as realtime data validation, except HandleOnValidSubmit() to run on the client. I tried using the InteractiveWebAssembly rendermode, but apparently it's not the right approach or I'm doing something wrong.

3 answers

Your answer

Answer 1

Bruce (SqlWork.com) 81,971 Volunteer Moderator

Client code can not set an authentication cookie. If using WASM typically you would use jwt tickets rather than a cookie. Also to run server code from Blazor WASM ( client interactive) you use HttpClient to call a server api, you can’t call Blazor code. A Blazor either runs on the server or on the client.

Blazor client typically use msal (oauth authentication). Cookie authentication is user with Blazor Server. In both cases the Blazor app redirects to a login page that unloads the Blazor app. After authentication the Blazor is reloaded and passed the token when authentication state is initialized.

iKingNinja 140 Reputation points

2025-11-08T13:46:39.3+00:00

My intention is not to set a cookie using WASM, I have an ApiController that returns the Set-Cookie header, my question is rather how to query the API endpoint from the client so that the response will set the authentication cookie. I'm pretty sure I don't get what InteractiveWebAssembly is really for. I'm using the new .NET 8 Blazor Web App template, does it not allow writing components that are SSRed and then hydrated on the client? I'm pretty sure the HandleOnValidSubmit() is running on the server because there's no network request to auth/register in the browser console.
Bruce (SqlWork.com) 81,971 Reputation points Volunteer Moderator

2025-11-08T17:29:51.29+00:00

The server pre-render for interactive client is just the static content and content created with OnIntialized(), No other events run server side.

you can set a cookie with a HttpClient(), which will be sent on subsequent HttpClient() calls, but the Blazor code will not know about it, so you can not use the authorization components.

Because the render mode is InteractiveWebAssembly, the HandleOnValidSubmit() can only run client side. That is if the component is rendered server side the event will not fire. As the HttpClient() code is only valid from client that makes sense. If you are running the app in server mode the events will not fire.

The program.cs file code controls the mode. you can tell if the blazor app is running client or server side with the browser tools. If server side you will see a signal/r websocket connection. If client you will see a WASM component loaded. Also the console should display which method. The js bootstrap scripts are also named after the type.
iKingNinja 140 Reputation points

2025-11-09T12:27:12.19+00:00

The page is running in WASM and is downloading the relative scripts, however it throws the error Error: One or more errors occurred. (Root component type 'IDFW.Components.Pages.Auth.Register' could not be found in the assembly 'IDFW'.)
Bruce (SqlWork.com) 81,971 Reputation points Volunteer Moderator

2025-11-09T17:49:05.1566667+00:00

It appears you registered cookie authentication support in the blazor client, but this it not supported. Cookie authentication is only supported by blazor server and is implemented by a razor page library. Razor page libraries are server side only.

As you plan on using custom authentication code, you need to code the authentication state, and implement your own authentication pages, and authentication redirects. See

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/authentication-state?view=aspnetcore-9.0&pivots=webassembly
iKingNinja 140 Reputation points

2025-11-09T18:20:27.91+00:00

I added Identity on the server (Blazor Web App), same project this component belongs to.
Bruce (SqlWork.com) 81,971 Reputation points Volunteer Moderator

2025-11-10T21:15:57.0833333+00:00

That is your coding error.

Cookie identity is not supported with blazor client. So don’t include Identity support. You implement it on the backend api by using the Map identity Api to create json entry points for the Blazor Client to call. You then create Blazor pages to call the api and add links to these new pages.

https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.routing.identityapiendpointroutebuilderextensions.mapidentityapi?view=aspnetcore-9.0

If you want client side authorization, you add Services.AddAuthorizationCore(); and need to write your own custom client side authorization.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/authentication-state?view=aspnetcore-9.0&pivots=webassembly
iKingNinja 140 Reputation points

2025-11-15T16:12:05.47+00:00

Alright, but I need cookie authentication and a way to set a cookie on the client. What's the correct approach in Blazor?

Answer 2

iKingNinja 140

What I ended up doing is:

Creating a WASM project
Adding it with AddInteractiveWebAssemblyRenderMode() and AddAdditionalAssemblies() in the Web App (WA) project's Program.cs
Created a wrapper component in WA project with static render mode
Created the register page component in the WASM project and added it as child content of the wrapper with InteractiveWebAssembly render mode.

This way I can have my HttpClient make requests from the browser (WASM) thus setting the authentication cookie.

Bruce (SqlWork.com) 81,971 Reputation points Volunteer Moderator

2025-11-20T22:13:56.8833333+00:00

Note: the cookie will expire. Ajax calls will update the sliding window, but server should return a 501, or formal error message. To renew the cookie, you need to reload the app via JavaScript (location.reload()). As WASM, you will lose all state, so you might want to add code to save state and restore.

note: even using openid requires a reload if the refresh token expires.

Answer 3

Hi,

The core issue is a mismatch between what you want (Identity cookie auth) and the render mode you chose. Cookie-based ASP.NET Core Identity only works naturally when the component runs on the server (InteractiveServer or InteractiveAuto). You can’t make just HandleOnValidSubmit run on WebAssembly; render mode applies to the whole component. You also don’t need client-side execution to receive a Set-Cookie; the server issues it and the browser stores it automatically. So drop InteractiveWebAssembly for this page and let the server handle registration + sign-in.

To keep Identity, Cookie Auth and Use Server Interactivity:

Change the rendermode component to run all events (including submit) on the server so Identity’s cookie is recognized immediately.


@page "/auth/register"

@rendermode InteractiveServer

For submit handler, force a round trip so the new cookie is on the next request


if (res.IsSuccessStatusCode)

{

    navigation.NavigateTo("/", forceLoad: true);

    return;

}

In Program.cs, ensure the app can issue/read auth cookies during server-side events


// Identity & Cookie Auth

builder.Services.AddIdentity<ApplicationUser, IdentityRole>()

    .AddEntityFrameworkStores<AppDbContext>()

    .AddDefaultTokenProviders();  // Tokens for reset/email if needed

 

builder.Services.AddAuthentication()

    .AddCookie(IdentityConstants.ApplicationScheme); // HttpOnly auth cookie

 

// Razor Components with server interactivity

builder.Services.AddRazorComponents()

    .AddInteractiveServerComponents();

 

// Middleware pipeline

app.UseAuthentication();

app.UseAuthorization();

 

// Map the root components (server render mode only needed here)

app.MapRazorComponents<App>()

   .AddInteractiveServerRenderMode();

Registration endpoint (create + sign in):


// Issues the auth cookie on success

app.MapPost("/auth/register", async (

    RegisterModel model,

    UserManager<ApplicationUser> userManager,

    SignInManager<ApplicationUser> signInManager) =>

{

    var user = new ApplicationUser

    {

        UserName = model.Email,

        Email = model.Email,

        FirstName = model.FirstName,

        LastName = model.LastName

    };

 

    var result = await userManager.CreateAsync(user, model.Password);

    if (!result.Succeeded)

    {

        var errors = result.Errors

            .GroupBy(e => e.Code)

            .ToDictionary(g => g.Key, g => g.Select(e => e.Description).ToArray());

 

        return Results.ValidationProblem(errors); // Matches your ValidationMessageStore usage

    }

 

    await signInManager.SignInAsync(user, isPersistent: model.KeepLogin); // Writes Set-Cookie

    return Results.Ok();

});

Hope this helps. Please reach out if you need any help.

iKingNinja 140 Reputation points

2025-11-15T16:10:20.63+00:00

Hi and sorry for the late reply. I did what you suggested, changed the render mode and ensure the Program.cs configuration is correct. However the cookie is not being set. I can see res.Headers includes a Set-Cookie header, but since this component now runs on the server it's being set on the server rather than the client. This was the issue I couldn't overcome that brought me to try InteractiveWebAssembly.
Danny Nguyen (WICLOUD CORPORATION) 4,985 Reputation points Microsoft External Staff Moderator

2025-11-19T03:06:23.97+00:00

You're seeing Set-Cookie only in the server's HttpClient response (server to server). That never reaches the browser because the form submit in an InteractiveServer component is a SignalR event, not an HTTP POST from the browser, so no response headers (cookies) flow back.

To set the auth cookie you need a browser-originated request whose HTTP response carries Set-Cookie.

You could try

Expose a /auth/register endpoint and submit via a real POST (plain HTML form or JS fetch with credentials: 'include'), then redirect.

Skip the internal HttpClient call entirely, do user creation + SignInManager.SignInAsync inside an actual HTTP endpoint instead of the Blazor event handler.

If you keep live validation in Blazor, do the final submit via JS interop fetch, then trigger a full page reload.

SignalR diffs cannot set cookies. You need an HTTP round-trip from the browser.
iKingNinja 140 Reputation points

2025-11-19T09:43:57.8733333+00:00

I know that, and it's exactly what I'm saying. All I'm asking is if there's a way of using Blazor WebAssembly to do this instead of using JavaScript interop.

Share via

Blazor Web App partly run code as WASM

3 answers

Your answer