Hello! 👋
It's less then a month left before the .NET 8 release. It's a great time to start exploring new features and improvements. One of them is a new Blazor Web App.
Blazor Web Apps provide a component-based architecture with server-side rendering and full client-side interactivity in a single solution, where you can switch between server-side and client-side rendering modes and even mix them in the same page.
The latest .NET 8 RC2 release brings Individual account authentication, but it's not enough for a real-world application. In this article, we will explore how to integrate Microsoft Identity Platform Authentication into a Blazor Web App.
The use of Microsoft's Identity greatly enhances user authentication and authorization in web apps. This article outlines the steps required to integrate Microsoft Entra ID (formerly Azure Active Directory) into a Blazor web application.
Precondition
If you don't have an Azure Active Directory, watch this video on how to set it up:
And Azure Active Directory (B2C):
Step 1: Install the Required Package
Start by installing the necessary NuGet package, 'Microsoft.Identity.Web.UI'. You can do this by adding the following line to your project file:
Step 2: Update the Configuration File
Next, add the following block of configuration to your appsettings.json file, replacing placeholders (enclosed in "") with info from your Azure AD B2C tenant:
Step 3: Add Authentication Services
In the Program.cs file, utilize the built-in configuration binding to bind AzureAdB2C configuration to the Microsoft Identity options and register the necessary services related to Microsoft Identity, as shown below:
Currently, we need to disable issuer validation. Otherwise authentication fails.
Step 4: Configure the Middleware
Next, register MapControllers middleware, as shown:
Step 5: Create an Authentication Page
Finally, set up an authentication page to handle signing in and signing out. Here's a sample page (Auth.razor):
This setup delivers a functional authentication page where users can effectively sign in or sign out.
Conclusion
There is an open issue on GitHub related to the missed Microsoft Identity Platform auth option in the Blazor Web App template. You can track it here. It's planned to be solved in the .NET 9 release.
To simplify the steps, I created a template that you can use to create a new Blazor Web App with Microsoft Identity Platform Authentication. You can find it here.
Happy Hacktoberfest!