How to Authenticate a Blazor WebAssembly-Hosted App with Azure AD | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (226)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (942)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (658)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (614)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
How to Authenticate a Blazor WebAssembly-Hosted App with Azure Active Directory

How to Authenticate a Blazor WebAssembly-Hosted App with Azure AD

Hello, folks! In this article, we will discuss how to authenticate a Blazor WebAssembly (WASM) application with Azure AD (Active Directory) and its working principles. Blazor is an open-source framework for developing web apps using C# and HTML. Many modern web developers like to work with it because of its versatility.

Blazor WebAssembly uses open web standards to run and execute the .NET code directly in the browser sandbox using .NET runtime, which provides maximum execution speed on the client side. Securing our application from unauthorized access is a priority while handling our apps since authorization checks can be bypassed by modifying all the client-side code at the end-user level.

In this scenario, the best approach for securing single-page applications (SPA) is to perform authorization checks on the server side using any API endpoint based on the OAuth 2.0 protocol, such as OpenID Connect (OIDC) or Azure Active Directory (AAD).

Let’s discuss the step-by-step procedures to authenticate our Blazor WebAssembly applications with Azure AD (Active Directory).


In this blog, I have used Visual Studio 2019 to build an application. This software is required for you to follow along:

Explore the best and most comprehensive Blazor UI components library in the market.

Creating a Blazor WebAssembly application

Follow these steps to create a Blazor WebAssembly hosted application:

  1. Open Visual Studio 2019 and choose Create a new project.
    Open Visual Studio 2019 and choose Create a new project
  2. Select Blazor App from the list and click Next.
    Select Blazor App from the list and click Next
  3. Enter your project name and click Create. In my example, I’ve used the name BlazorWASMAuthApp.
    Enter your project name and click Create
  4. Then, select Blazor WebAssembly App from the list and check the Configure for HTTPS and ASP.NET Core hosted check boxes. Then, select Create.
    select Blazor WebAssembly App from the list and check the Configure for HTTPS and ASP.NET Core hosted check boxes


The Blazor WebAssembly application will be created with three projects (client, server, and shared), as shown in the following screenshot.
Blazor WASM application will be created with three projects (client, server, and shared)

Default sample demo

Created sample demo

Syncfusion’s Blazor components suite is the expert’s choice for building modern web apps.

Securing a Blazor WebAssembly-hosted application with Azure Active Directory (AAD)

We have created the Blazor WebAssembly application. Now, let’s add the configuration to authenticate the Blazor WebAssembly app with AAD for a single organization, like for a work or school account.

First, we need to register our server API and client app in the Microsoft identity platform in the Azure portal to get the Application ClientID and tenantID and set the required configuration like redirect URL and other details.

Check out the register server API link and client app link for how to do this.

Configuring server app

In this section, we are going to set up the authentication for calls to our APIs and its configurations.

  1. First, install the NuGet package Microsoft.AspNetCore.Authentication.AzureAD.UI, which is used for authenticating API calls.Refer to the following screenshot.
    Install the NuGet package Microsoft.AspNetCore.Authentication.AzureAD.UI
  2. Use the following configuration to set up the authentication service and configure the JWT bearer handler in the Startup.cs file.


    using Microsoft.AspNetCore.Authentication.AzureAD.UI;
    using Microsoft.AspNetCore.Authentication;
    public void ConfigureServices(IServiceCollection services)
        .AddAzureADBearer(options => Configuration.Bind("AzureAd", options));
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        app.UseEndpoints(endpoints =>
  3. Then, configure the options for the JWT bearer handler in the appsettings.json file as shown in the following code. You can replace the {DOMAIN}, {TENANT ID}, and {SERVER API APP CLIENT ID} with the values you obtained from the AAD. Refer to this link for more details.


      "AzureAd": {
        "Instance": "",
        "Domain": "{DOMAIN}",
        "TenantId": "{TENANT ID}",
        "ClientId": "{SERVER API APP CLIENT ID}",
  4. The final step is to protect the API’s call from unauthorized users by defining the [Authorize] attribute in the controller.WeatherForecastController.cs
    using Microsoft.AspNetCore.Authorization;
    public class WeatherForecastController : ControllerBase

Everything a developer needs to know to use Blazor components in the Blazor app is completely documented.

Configuring client app

In this section, we are going to set up the user authentication settings and UI configuration changes:

  1. Install the NuGet package Microsoft.Authentication.WebAssembly.Msal to authenticate your application using NuGet Manager.
    Install the NuGet package Microsoft.Authentication.WebAssembly.Msal
    You can refer to thisDocumentary for more details.
  2. Add the following configuration to include the Msal authentication service with your application. Also, ensure that Microsoft.Extensions.Http package is installed in your application.

    public static async Task Main(string[] args)
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
       builder.Services.AddHttpClient("BlazorWASMAuthApp.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
       builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
       builder.Services.AddMsalAuthentication(options =>
              builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
              options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
        await builder.Build().RunAsync();

    Replace {SCOPE URI} with your server client ID along with the scope name.

    Check out this documentation for more details.

  3.  Create and add the following configuration options for app authentication in the wwwroot/appsettings.json file. Replace the {TENANT ID} and {CLIENT APP CLIENT ID} with the values you obtained from the AAD configuration.
      "AzureAd": {
        "Authority": "{TENANT ID}",
        "ClientId": "{CLIENT APP CLIENT ID}",
        "ValidateAuthority": true
  4. Include the authentication-service-defined script reference to enable the app internal calls to perform the authentication process.
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
  5. Then, import these two namespaces to make their references available throughout the application.
    @using System.Net.Http
    @using System.Net.Http.Json
    @using Microsoft.AspNetCore.Authorization
    @using Microsoft.AspNetCore.Components.Authorization

Explore the different application UIs developed using Syncfusion Blazor components.

Client app UI changes

Almost done! We have finished the configuration changes. Let’s do the UI changes to complete it.

  1. Configure the App component to provide an access page only for authorized users or to show the login message.


        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                            You are not authorized to access this page. Please log in.
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
  2. Enable the authentication by injecting the [Authorize] attribute to the Razor pages (Counter.razor and FetchData.razor).
    @page "/counter"
    @attribute [Authorize]
  3. Then, create the LoginDisplay component under the Shared folder and the Authentication component under the Pages folder with these updated code snippets.


    @using Microsoft.AspNetCore.Components.Authorization
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    @inject NavigationManager Navigation
    @inject SignOutSessionStateManager SignOutManager
            Hello, @context.User.Identity.Name!
            <button class="nav-link btn btn-link" @onclick="BeginLogout">
                Log out
            <a href="authentication/login">Log in</a>
    @code {
        private async Task BeginLogout(MouseEventArgs args)
            await SignOutManager.SetSignOutState();


    @page "/authentication/{action}"
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    <RemoteAuthenticatorView Action="@Action" />
    @code {
        public string Action { get; set; }
  4.  Finally, add the created LoginDisplay component to the MainLayout.razor page.
    <div class="top-row px-4">
        <LoginDisplay />
        <a href="" target="_blank" class="ml-md-auto">About</a>

See how Syncfusion Blazor components can be transformed into beautiful and efficient applications.

Run the application

Let’s run the app from the server project. You can see the demo of the runnable application in the GIF image.

Our authentication sample demo
Blazor Azure AD authentication example app

GitHub Sample

You can download the complete source code of this example from this GitHub location.


In this blog post, we have learned how to secure a Blazor-WebAssembly-hosted application with Azure AD (Active Directory) authentication. In this way, you can secure your app with minimal lines of code.

Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGridCharts, and Scheduler to ease the work of developers. Check them out!

If you have any questions or feedback, please leave your valuable comments in the comments section below.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you! Have a good day!


Share this post:

Comments (5)

Would love an article on WASM, Azure B2C, and role/policy authorization. Virtually non-existent information out there, especially concerning B2C and role authorization.

Silambarasan Ilango
Silambarasan Ilango

Thanks for your valuable feedback. We will consider these topics (Azure B2C & Role Authorization) and added it in our list.

Thank you for this arcitle. As one year has gone could you please, update this article to the newest .Net 6 and Visual Studio 2022 project templates together with newest C# 10 abbreviated coding styles?


Sure, Thank you for taking the time to provide such valuable feedback. We have planned to update this blog with the latest .NET version which will be available in March 2022.

Kindly update this article as there is no ConfigureServices section any longer ???

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed