ASP.NET Core Blazor: Authentication & Authorization

Introduction

Securing Blazor applications is a critical aspect of web development. ASP.NET Core provides robust mechanisms for handling authentication (verifying who a user is) and authorization (determining what a user is allowed to do).

Blazor offers flexible ways to integrate with various authentication providers and implement fine-grained authorization policies. This document will guide you through the key concepts and common patterns.

Authentication in Blazor

Authentication involves confirming the identity of a user. ASP.NET Core supports several authentication schemes, including:

• Individual User Accounts: Users manage their own credentials within the application.
• External Providers: Users can log in using existing accounts from services like Google, Microsoft Identity, Azure AD, etc.
• Windows Authentication: For intranet scenarios where users are authenticated by the Windows domain.

Using the Blazor Authentication Scaffolding

When creating a new Blazor project, you can choose authentication templates. These templates automatically set up the necessary services, pages, and components, such as:

• Login.razor and Register.razor for individual accounts.
• RedirectToLogin.razor for handling unauthenticated access.
• LogOut.razor for user sign-out.
• LoginDisplay.razor to show login status and links.

The core of Blazor's authentication relies on the Microsoft.AspNetCore.Components.Authorization namespace and the AuthenticationStateProvider service.

AuthenticationStateProvider

This is the central service for retrieving the authentication state of the current user. You can implement or use built-in providers.

To get the current user's identity:

@inject Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider AuthenticationStateProvider
@code {
    private string userId;

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;

        if (user.Identity.IsAuthenticated)
        {
            userId = user.Identity.Name; // Or get user claims
        }
        else
        {
            userId = "Anonymous";
        }
    }
}

AuthorizeView Component

The <AuthorizeView> component conditionally renders content based on the user's authorization status. It can also be used to display different content for authenticated and unauthenticated users.

<AuthorizeView>
    <Authorized>
        <p>Hello, @context.User.Identity?.Name! You are logged in.</p>
        <button>Access Protected Resource</button>
    </Authorized>
    <NotAuthorized>
        <p>You are not logged in. Please <a href="/authentication/login">log in</a>.</p>
    </NotAuthorized>
</AuthorizeView>

The context within the <Authorized> and <NotAuthorized> templates represents the AuthenticationState.

Authorization in Blazor

Authorization determines if an authenticated user has permission to access a resource or perform an action. ASP.NET Core offers several authorization models:

• Role-Based Authorization: Granting access based on user roles (e.g., "Admin", "Editor").
• Policy-Based Authorization: More flexible, allowing complex requirements to be defined in policies (e.g., "Must be an administrator AND have been a member for at least 6 months").

Page-Level Authorization

You can protect entire Blazor pages or components using the [Authorize] attribute.

@page "/admin"
@attribute [Authorize] // Requires authentication
@attribute [Authorize(Roles = "Admin,SuperAdmin")] // Requires user to be in Admin or SuperAdmin role
@using Microsoft.AspNetCore.Authorization

<h1>Administrator Dashboard</h1>
<p>This content is only visible to administrators.</p>

If a user is not authorized, they will be redirected to the login page (if configured) or receive a "401 Unauthorized" or "403 Forbidden" response.

Requirement-Based Authorization (Policies)

Policies provide a more expressive way to define authorization requirements.

1. Define a Policy in Program.cs (or Startup.cs):

// In Program.cs (for .NET 6+)
builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("RequireAdminRole", policy =>
        policy.RequireRole("Admin"));

    options.AddPolicy("MinimumAge", policy =>
        policy.RequireAssertion(context =>
        {
            // Example: Check a custom claim for age
            var ageClaim = context.User.FindFirst("Age");
            if (ageClaim != null && int.TryParse(ageClaim.Value, out int age))
            {
                return age >= 18;
            }
            return false;
        }));
});

2. Apply the Policy in Blazor:

// Using a page attribute
@page "/special-offer"
@attribute [Authorize(Policy = "MinimumAge")]

<h1>Special Offer Page</h1>
<p>This page is for users aged 18 and above.</p>

// Using AuthorizeView
<AuthorizeView Policy="RequireAdminRole">
    <p>Welcome, Administrator! You have access to administrative functions.</p>
</AuthorizeView>

Custom Authorization Requirements and Handlers

For complex scenarios, you can create custom IAuthorizationRequirement classes and corresponding AuthorizationHandler implementations.

Common Blazor Authentication/Authorization Scenarios

Client-Side (WebAssembly) vs. Server-Side (Hosted)

The implementation details can vary slightly between Blazor WebAssembly (client-side) and Blazor Server (server-side/hosted).

• Blazor Server: Authentication and authorization are handled server-side, leveraging standard ASP.NET Core middleware. The Blazor circuit communicates with the server.
• Blazor WebAssembly: Authentication is typically handled by making API calls to an identity server or backend. Authorization can be enforced on the server (for API access) and client-side (to hide UI elements). The InteractivePrerendered hosting model shares some server-side benefits.

Securing API Endpoints from Blazor WebAssembly

When using Blazor WebAssembly, your application interacts with backend APIs. These APIs must be secured using standard ASP.NET Core authentication and authorization middleware. Your Blazor app needs to include the authentication token (e.g., JWT) in API requests.

// In Blazor WebAssembly project's Program.cs or App.razor
builder.Services.AddOidcAuthentication(options =>
{
    // Configure OIDC client settings
    builder.Configuration.Bind("LocalRelyingParty", options.ProviderOptions);
});

// When making an HTTP request
@inject HttpClient Http

// ... later in your component
var response = await Http.GetAsync("api/data"); // HttpClient is configured with the auth token

Custom Authentication State Provider

You might need to create a custom AuthenticationStateProvider if you're not using standard ASP.NET Core Identity or need to integrate with a custom authentication system.

Best Practices

• Never trust client-side validation alone. Always re-validate permissions on the server for sensitive operations.
• Use the [Authorize] attribute for page and component-level protection.
• Leverage <AuthorizeView> for fine-grained control over UI rendering based on authorization.
• Implement strong password policies and consider multi-factor authentication.
• Use HTTPS for all communication to protect credentials and sensitive data.
• Organize your authorization logic into well-defined policies for better maintainability.

Further Reading

• Microsoft Docs: Security in ASP.NET Core Blazor
• Microsoft Docs: Introduction to authorization in ASP.NET Core
• Blazor WebAssembly Standalone with ASP.NET Core Identity