Configure Azure Entra External ID Authentication for Blazor Web App

This guide explains how to configure Azure Entra External ID (the successor to Azure B2C) for a Blazor Web App.

This guide has been written for Blazor Web Apps with Server rendering, but should be compatible with WebAssembly as well. The .NET framework version is 10 (the latest LTS at the time of this writing).

• Start with creating a new .NET Blazor Web App with Interactive Render Mode set to server.

• Add the following nuget packages to your Blazor Project:

  • Microsoft.Identity.Web
  • Microsoft.Identity.Web.UI

• Login to Microsoft Entra - Microsoft Entra admin center

• Make sure you are in your default Workforce tenant. You can select Overview then Manage Tenants to ensure you are in the right tenant.

• Select External Identities

• Select External Identity Providers and ensure your preferred providers are configured. For my project, I had kept the default selections.

• Select User Flows and add new user flow to allow users to sign up. Make sure the user attributes you need are selected.

• Optional: Select Domain names and add your custom domain then verify it.

• Select App Registrations and create a new app. Select one of the options which allow personal accounts.

• Optional: In the Branding & Properties section, update the App information with your branding, logo, ToS etc. Also you can update the domain to your custom domain (this will not impact your primary domain in the tenant).

• Optional: Select Owners and assign yourself the App Owner.

• Select Authentication and add a Web Redirect URI. Set it to https://app_base_url/signin-oidc

  • For example: http://localhost:5171/signin-oidc or https://localhost:7215/signin-oidc

• Select Certificates & Secrets and create a new client secret. Note down the value for later use.

• Add the following snippet to your appsettings.json
  
  

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "consumers", /*this is for external users authentication*/
    "ClientId": "your_app_registration_client_id",
    "ClientSecret": "the_secret_you_generated_earlier", /*better to use Key Vault in production and secrets.json during development*/
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApi": {
    "BaseUrl": "https://graph.microsoft.com/v1.0/",
    "RelativePath": "me",
    "Scopes": [
      "user.read"
    ]
  },

• In Program.cs or where the configuration of the builder object is done, add the following snippet.

services
    .AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(configuration)
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddInMemoryTokenCaches();

services.AddCascadingAuthenticationState();

• In Program.cs or where the configuration of the app object is done, add the following snippet:

app.UseAuthentication();
app.UseAuthorization();

• Add the following lines to your _Imports.razor:

@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization

• From now on, you can configure any page or component to require authentication and blazor will automatically redirect to the Azure Entra Login Page if the user is not logged in. Here is the snippet that needs to be added to the top of a component or page so that it requires authentication. You can pass the role names as parameters to the Authorize attribute.

@attribute [Authorize]

• Additionally, you can make use of the AuthorizeView to generate a Login and Logout button for your application or hide the sensitive sections of your app from unauthenticated users.

Here is a project where I have implemented Azure Entra External ID which can be used for reference Inventory Management System.