Auth0 with Blazor Server

Integration Auth0 with Blazor Server is straightforward. This example demonstrates the necessary steps to set up authentication and authorization using Auth0 in a Blazor Server application. Follow the steps below to get started.

Install Package

Configure Services

App Settings

Account Controller

Map Roles

Use Roles

Authorization Views

References

Prerequisites: You'll need an Auth0 account and application configured for Blazor Server.

Step 1: Install Package

Add the Auth0 NuGet package to your Blazor Server application:

dotnet add package Auth0.AspNetCore.Authentication

Step 2: Configure Services

Add Auth0 configuration to your Program.cs:

builder.Services
    .AddAuth0WebAppAuthentication(options =>
    {
        options.Domain = builder.Configuration["Auth0:Domain"];
        options.ClientId = builder.Configuration["Auth0:ClientId"];
    });

Step 3: Configure App Settings

Add your Auth0 configuration to appsettings.json:

{
  "Auth0": {
    "Domain": "your-domain.auth0.com",
    "ClientId": "your-client-id"
  }
}

Step 4: Add Login Component

Create a login component:

@page "/login"
@using Microsoft.AspNetCore.Authentication
@using Auth0.AspNetCore.Authentication
@inject IHttpContextAccessor HttpContextAccessor

@code {
    protected override async Task OnInitializedAsync()
    {
        var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
               .WithRedirectUri("/")
                .WithParameter("prompt", "login") // Force login prompt
               .Build();
                

        await HttpContextAccessor.HttpContext!.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
    }
}

Step 5: Add AccountController for Authentication

Create an AccountController to handle logout operations. This controller is necessary because:

• Server-side operations: Authentication operations require server-side HTTP context access

• Proper signout: Ensures both Auth0 and local cookie authentication are properly cleared

• Redirect handling: Manages post-logout redirects and cleanup

[Route("account")]
public class AccountController : Controller
{
    [HttpGet("logout")]
    public async Task<IActionResult> Logout()
    {
        var authenticationProperties = new LogoutAuthenticationPropertiesBuilder()
            .WithRedirectUri("/")
            .Build();

        await HttpContext.SignOutAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);

        return Redirect("/");
    }
}

Step 6: Map Auth0 Roles to Blazor

To use Auth0 roles in your Blazor application, you need to configure a post-login script in Auth0 that maps roles to the standard .NET role claims.

Why this is needed: Auth0 roles need to be mapped to the standard Microsoft role claim format that ASP.NET Core and Blazor recognize for authorization.

Step 6.1: In your Auth0 Dashboard, go to Actions → Flows → Login

Step 6.2: Create a new Action with the following post-login script:

exports.onExecutePostLogin = async (event, api) => {
  
  const roleClaim = 'http://schemas.microsoft.com/ws/2008/06/identity/claims/role';

  if (event.authorization) {
    api.idToken.setCustomClaim(roleClaim, event.authorization.roles);
  }

};

Step 6.3: Add the Action to your Login Flow

What this script does:

• Maps Auth0 roles to the Microsoft standard role claim

• Uses the correct claim URI that ASP.NET Core recognizes

• Enables role-based authorization in Blazor components

Step 7: Use Roles in Authorization

Now you can use role-based authorization in your Blazor components:

<AuthorizeView Roles="Admin">
    <Authorized>
        <MudText Color="Color.Success">Welcome, Administrator!</MudText>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">
            Admin Panel
        </MudButton>
    </Authorized>
    <NotAuthorized>
        <MudText Color="Color.Warning">Access Denied: Admin role required</MudText>
    </NotAuthorized>
</AuthorizeView>

<AuthorizeView Roles="User,Admin">
    <Authorized>
        <MudText>Content for Users and Admins</MudText>
    </Authorized>
</AuthorizeView>

<!-- You can also use policy-based authorization -->
<AuthorizeView Policy="RequireManagerRole">
    <Authorized>
        <MudText>Manager-only content</MudText>
    </Authorized>
</AuthorizeView>

Step 8: Basic Authorization Views

Use AuthorizeView in components for basic authentication:

<AuthorizeView>
    <Authorized>
        <MudText>Welcome, @context.User.Identity?.Name!</MudText>
        <MudButton Href="/account/logout" Variant="Variant.Outlined" Color="Color.Secondary">
            Logout
        </MudButton>
    </Authorized>
    <NotAuthorized>
        <MudButton Href="/login">Please log in</MudButton>
    </NotAuthorized>
</AuthorizeView>

That's it! Your Blazor Server application is now configured with Auth0 authentication and role-based authorization. Users can log in through Auth0, log out properly using the AccountController, and you can use both basic and role-based authorization in your components.

References

For more detailed information and advanced scenarios, check out these helpful resources:

Auth0 Authentication for Blazor Web Apps

Comprehensive guide on implementing Auth0 authentication in Blazor applications

Role Management with Auth0 Organizations for B2B SaaS

Advanced role-based authorization and multi-tenant organization management

Auth0 with Blazor Server

Table of Contents

Step 1: Install Package

Step 2: Configure Services

Step 3: Configure App Settings

Step 4: Add Login Component

Step 5: Add AccountController for Authentication

Step 6: Map Auth0 Roles to Blazor

Step 7: Use Roles in Authorization

Step 8: Basic Authorization Views

References