Adding Entra ID Authentication to a Blazor App

I wanted to take the time to write up this article since I found it useful when working on Blazor Apps. Althought this is not Sitecore related, I think it will be useful if we need to build an admin .NET portal. Additionally most organizations already have Entra ID if they use Microsoft apps and building Entra ID Authentication wont add costs like other Authentication methods would.
To get started make sure the following packages are available (using NuGet) in your solution.

Microsoft.Identity.Web Microsoft.Identity.Web.UI Azure.Security

In your Program.cs file, add the following
using Microsoft.AspNetCore.Authentication.OpenIdConnect; using Microsoft.Identity.Web; using Microsoft.Identity.Web.UI; // Add Microsoft Entra ID authentication builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd")); builder.Services.AddAuthorization(options => { options.FallbackPolicy = options.DefaultPolicy; }); app.UseAuthentication(); app.UseAuthorization(); app.MapRazorComponents<App>() .AddInteractiveServerRenderMode() .RequireAuthorization();

In my example, I am going to put my entire application behind the Authentication, except the home page. So users cannot get to any page in the application un-authenticated except the home page.

In your App.razor file, add the following (surround your existing Routes with CascadingAuthenticationState)
@using Microsoft.AspNetCore.Components.Authorization <CascadingAuthenticationState> <Routes /> </CascadingAuthenticationState>

In your Home.razor file, add the following
@using Microsoft.AspNetCore.Components.Authorization @using System.Security.Claims @inject AuthenticationStateProvider AuthenticationStateProvider <AuthorizeView> <Authorized> <h1>Authorized Content</h1> </Authorized> <NotAuthorized> <Login /> </NotAuthorized> </AuthorizeView> @code { private ClaimsPrincipal userClaims { get; set; } protected override async Task OnInitializedAsync() { var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync(); userClaims = authState.User; } }

Add a new Login.razor file with the following content
@inject NavigationManager NavigationManager <button @onclick="SignIn" class="btn btn-primary">Login with Microsoft</button> @code { private void SignIn() { NavigationManager.NavigateTo("MicrosoftIdentity/Account/SignIn", forceLoad: true); } }

Lastly in your appsettings.json file add the following (or add this in your environmental variables for production apps)
"AzureAd": { "Instance": "https://login.microsoftonline.com/", "Domain": "yourdomain.onmicrosoft.com", "TenantId": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "ClientId": "ffffffff-gggg-hhhh-iiii-jjjjjjjjjjjj", "CallbackPath": "/signin-oidc", "SignedOutCallbackPath": "/signout-callback-oidc" }

Note:
You get the TenantId and ClientId by going to your Azure Portal Microsoft Entra ID and registering a new App. Once you register a new app you would note down the ClientId and use it in your application And lastly to test this out, make sure that you have the right redirect urls added to the list of "Redirect URI's." for the new app that you created. This is found by going to the Authentication section of your new App in your Azure portal. For example the following are ones that are common.

https://appname.yourdomain.com/signin-oidc https://localhost:3000/signin-oidc

That's it. Simple way to add secure Entra ID Authentication to your Blazor App.