Getting Started with Blazor Web App with Authentication

29 Jul 20254 minutes to read

This guide demonstrates how to build a Blazor Web App with authentication using .NET 9. It uses the built-in AuthenticationStateProvider to retrieve and manage user identity details from the application’s authentication context, enabling secure and consistent user state handling across components.

Prerequisites

Create a new Blazor Web App in Visual Studio

  • Open Visual Studio 2022 and select Create a new project from the start screen.

Create-new-project

Choose Project Template

Create-blazor-web-app-template

Configure Project Settings

  • In the project configuration settings, choose Blazor Server, WebAssembly, or Auto as the render mode. Ensure the Configure for HTTPS option is enabled, and select Individual Accounts as the authentication type before clicking Create. This setup enables authentication support without persisting user data in a local database.

Project-setting

Finalize Project Creation

Click the Create button to generate the Blazor Web App. Once created, run the project and locate the Register button.

Click-register

Register a User

  • Enter the necessary details, such as your email address and password into the registration form, then click Register to complete the account creation process.

Enter-register-details

Apply Database Migrations

After completing registration, click Apply Migrations to set up the database schema and configure it with the necessary account-related tables and settings.

Apply-migration

Verify Login

Once migrations are applied, refresh the page. The home page will now display the logged-in user’s email address along with a Logout option.

Verify-login

You can also integrate Syncfusion Blazor Components within the AuthorizeView component by following these steps:

Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App

To add the Blazor Calendar component to your application, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). Search and install the Syncfusion.Blazor.Calendars and Syncfusion.Blazor.Themes packages.

Alternatively, you can install the packages using the following command in the Package Manager Console:

Install-Package Syncfusion.Blazor.Calendars -Version 30.2.4
Install-Package Syncfusion.Blazor.Themes -Version 30.2.4

NOTE

Syncfusion® Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Calendars namespace.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars

Then, register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor WebAssembly Standalone App.

....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....

Add stylesheet and script resources

The theme stylesheet and script are available via NuGet as Static Web Assets. To include them in your application, add the stylesheet reference within the <head> section and the script reference just before the closing </body> tag, as shown below:

  • For .NET 9 and .NET 8 Blazor Web app, include it in the ~/Components/App.razor file.
<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

For more information on theming options, refer to the Blazor Themes documentation, which covers various methods such as Static Web Assets, CDN, and CRG for referencing themes in your Blazor application.

Additionally, explore the Adding Script Reference topic to learn about different approaches for including script references in your Blazor project.

Add Syncfusion® Blazor component

Add the Syncfusion® Blazor Calendar component in the ~/Pages/Home.razor file under AuthorizeView.

<AuthorizeView>
    <Authorized>
        <SfCalendar TValue="DateTime" />
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will launch your default web browser and display the Syncfusion® Blazor Calendar component within the app interface.

Blazor Calendar Component

NOTE

For detailed implementation, The demo project can be downloaded from the GitHub repository.

See Also