Blazor WebAssembly Standalone App with OIDC Authentication

This steps provides instructions for setting up a standalone Blazor WebAssembly application using OpenID Connect (OIDC) authentication with Microsoft Identity.

Prerequisites

• Visual Studio or VSCode;
• Docker;
• Keycloak configuration.

Setup

1. Create/Update Project:

• To create a new Blazor WebAssembly project, use the appropriate template available in Visual Studio or via the CLI.
• To add OIDC authentication to an existing project, include the dependency Microsoft.AspNetCore.Components.WebAssembly.Authentication.

Note: It is more convenient to create a new project based on Microsoft Identity.

2. Setup authentication in the Program.cs:

Add the following code block to your Program.cs file to set up OIDC authentication:

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Keycloak", options.ProviderOptions);
    options.ProviderOptions.ResponseType = OpenIdConnectResponseType.Code;
}).AddAccountClaimsPrincipalFactory<CustomAccountFactory>();

Note: CustomAccountFactory is a class that inherits from AccountClaimsPrincipalFactory and is responsible for creating the user from the authentication process.

3. Configure the identity provider in appsettings.json:

In the wwwroot directory of your application, update the appsettings.json file with the settings of your OIDC authentication server as shown below:

  "Keycloak": {
    "Authority": "http://localhost:8080/realms/wilder",
    "ClientId": "wasm"
  }

References

Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library

ASP.NET Core Blazor WebAssembly additional security scenarios

Microsoft Entra (ME-ID) groups, Administrator Roles, and App Roles

Use Keycloak as Identity Provider from Blazor WebAssembly (WASM) applications

Creating a client application

Using OpenID Connect to secure applications and services

Examples