| title | Blazor Interactive Server with ASP.NET Core Identity | Syncfusion |
|---|---|
| description | Guide to configure ASP.NET Core Identity in an Interactive Server Blazor app and protect Syncfusion components (DataGrid, Charts). |
| platform | blazor |
| component | common |
| documentation | ug |
This guide explains how to configure ASP.NET Core Identity in a Blazor Web App using Interactive Server render mode and protect Syncfusion® Blazor components such as DataGrid and Charts.
ASP.NET Core Identity is the built-in membership system for ASP.NET Core apps. It provides UI and APIs for registration, login, logout, password management, roles, claims, and more. In Blazor Web Apps, Microsoft recommends using the Identity Razor Pages for authentication tasks and using Blazor authorization for your components.
Use Identity when your app needs cookie-based, server-side authentication and you want the standard login/registration experience without building it from scratch. In a Blazor Web App using Interactive Server render mode, all authorization checks happen on the server. This gives strong security because the UI is not shown to the user until authentication is complete.
The steps below help you build a secure Blazor Web App using Interactive Server mode. You will set up ASP.NET Core Identity with SQLite and add Syncfusion Blazor components such as the DataGrid and Charts to pages that require the [Authorize] attribute.
Create a new Blazor Web App configured to use Interactive Server render mode. In this mode, the app runs on the server and updates the UI in the browser through a real-time connection, which helps keep your data secure.
BlazorIdentitySyncfusion is used as the sample project name in the following commands. Replace it with any project name you prefer.
Run the following commands in your command-line interface (CLI).
{% tabs %} {% highlight bash tabtitle=".NET CLI" %}
dotnet new blazor -o BlazorIdentitySyncfusion --interactivity Server cd BlazorIdentitySyncfusion
{% endhighlight %} {% endtabs %}
Install the necessary NuGet packages that provide ASP.NET Core Identity features and database connectivity. These packages allow your app to store user accounts, manage authentication, and connect to a SQLite database.
Package overview
| Package | What it does |
|---|---|
| Microsoft.AspNetCore.Identity.EntityFrameworkCore | Connects Identity to your database via Entity Framework Core, enabling storage of users, passwords (hashed), and roles |
| Microsoft.AspNetCore.Identity.UI | Provides ready-made login, registration, and account management pages (Razor Pages) so you don't have to build them from scratch |
| Microsoft.EntityFrameworkCore.Sqlite | SQLite database provider. A lightweight database stored as a single file, perfect for development and small applications |
| Microsoft.EntityFrameworkCore.Design | Tools for creating and managing database schema changes (migrations) |
| Microsoft.EntityFrameworkCore.Tools | Adds the dotnet ef command-line tool for running migration commands |
| Microsoft.VisualStudio.Web.CodeGeneration.Design | Scaffolding tool for customizing Identity Razor Pages (e.g., to override the default login page design) |
Run the following commands inside your project folder.
{% tabs %} {% highlight bash tabtitle=".NET CLI" %}
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore dotnet add package Microsoft.AspNetCore.Identity.UI dotnet add package Microsoft.EntityFrameworkCore.Sqlite dotnet add package Microsoft.EntityFrameworkCore.Design dotnet add package Microsoft.EntityFrameworkCore.Tools dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
{% endhighlight %} {% endtabs %}
Add Syncfusion Blazor packages to your project. These packages provide UI components like DataGrid and Charts that you'll use on protected pages.
Run the following commands in the project folder (where the .csproj file is located).
{% tabs %} {% highlight bash tabtitle=".NET CLI" %}
dotnet add package Syncfusion.Blazor.Grid dotnet add package Syncfusion.Blazor.Charts dotnet add package Syncfusion.Blazor.Themes
{% endhighlight %} {% endtabs %}
Create the ApplicationDbContext class that connects ASP.NET Core Identity to your database. This class tells Entity Framework Core how to store and manage Identity data such as users, passwords, and roles.
Create a folder named Data in the project root (same level as Program.cs). Inside that folder, create a file named ApplicationDbContext.cs and add the following code.
{% tabs %} {% highlight c# tabtitle="Data/ApplicationDbContext.cs" %}
using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Identity.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;
namespace BlazorIdentitySyncfusion.Data;
// Database context for ASP.NET Core Identity (users, roles, claims, etc.) public class ApplicationDbContext : IdentityDbContext { public ApplicationDbContext(DbContextOptions options) : base(options) { } }
{% endhighlight %} {% endtabs %}
N> IdentityDbContext<IdentityUser> uses the default IdentityUser class. You can replace IdentityUser with a custom user class (e.g., ApplicationUser : IdentityUser) if you need additional properties like FullName or Department.
Set up the connection string that tells your app where the SQLite database should be created. Entity Framework Core uses this connection string to store Identity data.
Open appsettings.json and add the ConnectionStrings section.
{% tabs %} {% highlight json tabtitle="appsettings.json" %}
{ "ConnectionStrings": { "DefaultConnection": "Data Source=blazor_identity.db" }, "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } }, "AllowedHosts": "*" }
{% endhighlight %} {% endtabs %}
N> SQLite is a simple, file-based database that stores all data in one .db file. It is easy to use and works well for development, testing, and learning. For production apps with many users or heavy traffic, consider switching to SQL Server, PostgreSQL, or MySQL.
Security Warning: Add *.db to your .gitignore file to avoid committing the database file (which contains hashed passwords and personal data) to source control.
Configure your application by registering essential services and middleware in Program.cs. This is the central configuration file where you:
- Connect to the database.
- Enable Identity authentication.
- Register Syncfusion components.
- Configure the request processing pipeline.
Open Program.cs and replace its contents with the following snippets where appropriate.
{% tabs %} {% highlight c# tabtitle="Program.cs" %}
... using BlazorIdentitySyncfusion.Data; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; using Syncfusion.Blazor; ... // Configure EF Core to use SQLite for Identity data. builder.Services.AddDbContext(options => options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));
// Configure Identity with the default UI. builder.Services .AddDefaultIdentity(options => { // Email confirmation is disabled for demo purposes; enable and configure an email sender in production. options.SignIn.RequireConfirmedAccount = false; }) .AddEntityFrameworkStores();
// Add Razor Pages (includes Identity UI). builder.Services.AddRazorPages();
// Enable Blazor authentication state support for CascadingAuthenticationState and AuthorizeRouteView. builder.Services.AddCascadingAuthenticationState();
// Register Syncfusion Blazor services. builder.Services.AddSyncfusionBlazor(); ...
// Serve static files and enable endpoint routing. app.UseStaticFiles(); app.UseRouting();
// Enable authentication and authorization middleware (order matters). app.UseAuthentication(); app.UseAuthorization();
// Enable antiforgery middleware (required for Identity Razor Pages login/logout forms in .NET 8+). app.UseAntiforgery();
// Map Razor Pages endpoints (includes Identity UI). app.MapRazorPages(); ...
{% endhighlight %} {% endtabs %}
Add the required namespaces in Components/_Imports.razor. These namespaces allow you to use authorization features such as [Authorize] and <AuthorizeView>, and they enable Syncfusion components in your Blazor pages.
{% tabs %} {% highlight razor tabtitle="Components/_Imports.razor" %}
@using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Charts
{% endhighlight %} {% endtabs %}
Before adding the Syncfusion theme stylesheet, ensure that no other Syncfusion theme CSS (e.g., material.css, fluent.css) is already referenced to avoid styling conflicts.
Open App.razor and add the following to the <head> and <body> sections.
{% tabs %} {% highlight razor tabtitle="App.razor" %}
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>{% endhighlight %} {% endtabs %}
The _LoginPartial.cshtml file displays login, logout, register, and account management links for ASP.NET Core Identity. It appears in the navigation bar and automatically updates based on the user's sign-in status.
In the project root (next to Program.cs), create a Pages folder and add a Shared subfolder. Inside the Shared folder, create a file named _LoginPartial.cshtml and add the following content.
{% tabs %} {% highlight cshtml tabtitle="Pages/Shared/_LoginPartial.cshtml" %}
@using Microsoft.AspNetCore.Identity @inject SignInManager SignInManager @inject UserManager UserManager
-
@if (SignInManager.IsSignedIn(User))
{
- Hello @User.Identity?.Name!
- Logout } else {
- Register
- Login }
{% endhighlight %} {% endtabs %}
Create a file named _ViewImports.cshtml inside the Pages folder and add the following code. This enables Tag Helpers for all Razor Pages, including the Identity UI pages.
{% tabs %} {% highlight cshtml tabtitle="Pages/_ViewImports.cshtml" %}
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
{% endhighlight %} {% endtabs %}
To apply authorization for Blazor components, update the router in App.razor. This ensures that pages marked with [Authorize] require authentication before rendering.
Replace the existing <body> section in App.razor with the following:
- Wrap the router in
<CascadingAuthenticationState>so Blazor can pass authentication information to all components. - Replace
<RouteView>with<AuthorizeRouteView>so pages can show different content based on the user's sign-in status. - Keep the
<NotAuthorized>and<Authorizing>sections to display messages to the user when needed.
{% tabs %} {% highlight razor tabtitle="App.razor" %}
You are not authorized. Please log in.
Authorizing...
Sorry, there’s nothing at this address.
<ReconnectModal />
...
{% endhighlight %} {% endtabs %}
N> <ReconnectModal /> is a custom component for handling SignalR reconnection UI. If your template does not include it, you can omit this line.
Update your main layout to display authentication options in the header. The <AuthorizeView> component will display different links depending on whether the user is signed in. This gives users an easy way to access login, logout, register, or manage account pages.
Open Components/Layout/MainLayout.razor and replace its content with the following.
N> This example uses Bootstrap classes (d-flex, ms-auto, gap-3). If your project uses different styling, adjust the CSS classes accordingly.
{% tabs %} {% highlight razor tabtitle="MainLayout.razor" %}
@inherits LayoutComponentBase @using Microsoft.AspNetCore.Components.Authorization
<main>
<div class="top-row px-4 d-flex align-items-center">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
<div class="ms-auto d-flex gap-3">
<AuthorizeView>
<Authorized>
<span class="navbar-text">Hello @context.User.Identity?.Name</span>
<a class="nav-link text-dark" href="/Identity/Account/Manage/Index" title="Manage">Manage</a>
<a class="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
</Authorized>
<NotAuthorized>
<a class="nav-link text-dark" href="/Identity/Account/Login">Login</a>
<a class="nav-link text-dark" href="/Identity/Account/Register">Register</a>
</NotAuthorized>
</AuthorizeView>
</div>
</div>
<article class="content px-4">
@Body
</article>
</main>
{% endhighlight %} {% endtabs %}
Create two protected Razor pages named SecureGrid.razor and SecureChart.razor inside the Components/Pages folder.
Apply the [Authorize] attribute to both pages and use them to display the Syncfusion DataGrid and Charts components respectively.
Add Syncfusion® Blazor DataGrid component
This component displays a sample order list using Syncfusion's DataGrid. The @attribute [Authorize] directive ensures only authenticated users can access this page.
{% tabs %} {% highlight razor tabtitle="SecureGrid.razor" %}
@page "/secure-grid" @attribute [Authorize] @rendermode InteractiveServer
Secure Grid
@code { public List Orders { get; set; } = default!;
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 12).Select(i => new Order {
OrderID = 1000 + i,
CustomerID = new[] { "ALFKI","ANATR","ANTON","BLONP","BOLID" }[Random.Shared.Next(5)],
OrderDate = DateTime.Today.AddDays(-i),
Freight = Math.Round(25 + 15 * Random.Shared.NextDouble(), 2)
}).ToList();
}
public class Order
{
public int OrderID { get; set; }
public string? CustomerID { get; set; }
public DateTime OrderDate { get; set; }
public double Freight { get; set; }
}
}
{% endhighlight %} {% endtabs %}
Add Syncfusion® Blazor Charts component
This component displays a column chart showing monthly sales data.
{% tabs %} {% highlight razor tabtitle="SecureChart.razor" %}
@page "/secure-chart" @attribute [Authorize] @rendermode InteractiveServer
Secure Chart
@code { public List Data { get; set; } = new() { new("Jan", 42500), new("Feb", 39100), new("Mar", 45900), new("Apr", 54400), new("May", 49350), new("Jun", 61200) };
public record Point(string Month, double Amount);
}
{% endhighlight %} {% endtabs %}
Update the navigation menu to include links to the secured pages. This makes them easily accessible from any page in the application. When users click these links, they'll be able to access the pages if logged in, or will be prompted to log in if they're not authenticated.
Open Components/Layout/NavMenu.razor and add the following navigation items after the existing menu links.
{% tabs %} {% highlight razor tabtitle="Layout/NavMenu.razor" %} ...
{% endhighlight %} {% endtabs %}
Create the database tables required for ASP.NET Core Identity by running Entity Framework Core migrations. Migrations generate the schema and apply it to your SQLite database.
If you have not installed the EF Core command-line tools, install them first.
{% tabs %} {% highlight c# tabtitle=".NET CLI" %}
dotnet tool install --global dotnet-ef
{% endhighlight %} {% endtabs %}
Then create the migration and update the database.
{% tabs %} {% highlight c# tabtitle=".NET CLI" %}
dotnet ef migrations add CreateIdentitySchema dotnet ef database update
{% endhighlight %} {% endtabs %}
After these commands run, the SQLite database will include the Identity tables such as AspNetUsers, AspNetRoles, and others used for authentication.
N> If you receive an error that a migration with this name already exists, you can either delete the existing migration or choose a different name such as InitialIdentitySetup.
Run the application and verify the authentication flow.
{% tabs %} {% highlight c# tabtitle=".NET CLI" %}
dotnet run
{% endhighlight %} {% endtabs %}
- Open a browser and navigate to the URL shown in the terminal output (typically
https://localhost:5001orhttps://localhost:7xxx). - Click Secure Grid or Secure Chart in the left navigation.
- You will be redirected to the Identity login page (
/Identity/Account/Login) because you are not authenticated. - Click Register and create a new account (email and password).
- After registration, you will be automatically logged in.
- Navigate back to Secure Grid or Secure Chart - the pages should now render successfully with Syncfusion components.
- Click Logout to end the session and verify that accessing the secure pages redirects back to the login page.
Output:
