Mobile · .NET · Authentication

Implementing Authentication in a .NET 9 MAUI Blazor Hybrid App A shared-project pattern for web and mobile

18 November 2024 · GeoSaffer.com

MAUI Blazor Hybrid lets you share Razor components between a web app and a native mobile app — but hooking up authentication across both targets requires care. This guide walks through a complete, working implementation using a Shared class library, a custom AuthenticationStateProvider, and optional secure storage persistence.

The solution splits across three projects so that authentication logic, components, and pages live once in YourApp.Shared and are consumed by both the web and mobile targets without duplication.

Both YourApp.Web and YourApp.Mobile add a project reference to YourApp.Shared and register the shared services in their respective startup files. The authentication flow is identical on both platforms.

Before writing any code, ensure your environment and the Shared project have the correct dependencies.

Add the following global usings to YourApp.Shared/_Imports.razor so every Razor file in the shared library can use auth and routing primitives without per-file imports:

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using YourApp.Shared.Layout
@using YourApp.Shared.Pages
@using YourApp.Shared.Services

Blazor’s auth pipeline is built around AuthenticationStateProvider. Subclass it in YourApp.Shared/Services/ to give both platforms a single source of truth for the current user identity.

public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
    private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());
    private ClaimsPrincipal _currentUser;

    public override Task<AuthenticationState> GetAuthenticationStateAsync()
        => Task.FromResult(new AuthenticationState(_currentUser ?? _anonymous));

    public void SignIn(string username)
    {
        var identity = new ClaimsIdentity(
            new[] { new Claim(ClaimTypes.Name, username) }, "apiauth_type");
        _currentUser = new ClaimsPrincipal(identity);
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public void SignOut()
    {
        _currentUser = _anonymous;
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }
}

Register it in both startup files. The pattern is identical — the provider is registered as a scoped service, then aliased so the framework’s AuthenticationStateProvider injection resolves to your custom type:

Create a companion UserService in the same Services folder with a simple in-memory credential list. In production, replace AuthenticateUserAsync with a call to your identity API — the interface contract stays the same.

Both components live in YourApp.Shared/Pages/ and are automatically available to web and mobile. Login.razor uses an EditForm with model binding; Logout.razor is a headless page that signs out immediately on initialisation.

@page "/login"
@inject CustomAuthenticationStateProvider AuthStateProvider
@inject UserService UserService
@inject NavigationManager NavigationManager

<EditForm Model="loginModel" OnValidSubmit="HandleLogin">
    <InputText @bind-Value="loginModel.Username" />
    <InputText type="password" @bind-Value="loginModel.Password" />
    <button type="submit">Login</button>
</EditForm>

@code {
    private async Task HandleLogin()
    {
        var user = await UserService.AuthenticateUserAsync(
            loginModel.Username, loginModel.Password);
        if (user != null)
        {
            AuthStateProvider.SignIn(user.Username);
            NavigationManager.NavigateTo("/");
        }
        else { ErrorMessage = "Invalid username or password."; }
    }
}

Logout.razor is even simpler — inject AuthStateProvider, call SignOut() in OnInitialized, then navigate to /. No template content needed beyond the redirect.

Protecting a page requires just one attribute; the router handles the rest via CascadingAuthenticationState and AuthorizeRouteView.

The basic provider loses session state on app restart. The extended version uses SecureStorage on mobile and localStorage on web — both via a compile-time platform check.

Beyond persistence, three baseline security measures should be in place before any real users authenticate: