DEV Community

Mohsin Afzal
Mohsin Afzal

Posted on

Blazor JWT Authentication with Radzen & .NET 10: Complete Starter Template

#blazor #authentication #dotnet #webdev

Learn secure authentication in Blazor with this production-ready starter
template. JWT tokens, cookies, Radzen UI, and clean architecture explained.

The Problem: Authentication is Complicated

Building a secure Blazor application with authentication can be overwhelming:

  • JWT vs Cookie authentication—which one?
  • How do you handle token refresh?
  • Where do you store secrets?
  • How do you integrate Radzen components with auth?
  • What's the best project structure?

This template answers all these questions in one place.

👉 Want to skip the setup? Clone the repo and have authentication
running in 5 minutes. No need to understand everything right now!

If you're looking for a quick-start template that demonstrates Blazor authentication with JWT tokens, Radzen components, and a clean .NET 10 architecture, this guide is for you.

I've created a production-ready starter template that integrates all the best practices for authentication in Blazor applications. Let me walk you through it and show you how to use it to accelerate your projects.

What is Blazor JWT Token Starter?

Blazor JWT Token Starter is a comprehensive template demonstrating secure authentication in Blazor applications with a separation of concerns architecture. It combines:

  • ✅ Blazor Server-side rendering with interactive components
  • ✅ JWT Bearer authentication for secure API communication
  • ✅ Cookie-based authentication for the Blazor app
  • ✅ Radzen UI components for a professional, polished interface
  • ✅ Clean architecture with Domain, Application, Infrastructure, and Shared layers
  • ✅ .NET 10 with modern ASP.NET Core features

Whether you're building an enterprise application or experimenting with secure authentication patterns, this template saves you hours of setup time.

Repository Structure

The template follows a layered architecture pattern:

BlazorJWTTokenStarter/
├── WebAPI/ # ASP.NET Core Web API (JWT Authentication)
├── WebApp/ # Blazor Server Application (Cookie Auth)
├── Domain/ # Domain entities and interfaces
├── Application/ # Business logic and security services
├── Infrastructure/ # Database and external dependencies
└── Shared/ # Shared DTOs and utilities (45% C#, 31% HTML, 19% CSS, 5% JS)

Key Components

  1. WebAPI Project - JWT Token Authority The API project is your authentication server. Key features:
  • JWT Bearer Authentication: Configured in Program.cs with industry-standard token validation
  • Token Settings: Secure key management through appsettings.json
  • Authentication Controller: Issues tokens based on user credentials
  • Scalar API Reference: Built-in interactive API documentation 
// JWT configuration from Program.cs
builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,

        ValidIssuer = jwtSettings.Issuer,
        ValidAudience = jwtSettings.Audience,
        IssuerSigningKey = new SymmetricSecurityKey(
            Encoding.UTF8.GetBytes(jwtSettings.Key))
    };
});
Enter fullscreen mode Exit fullscreen mode
  1. WebApp Project - Blazor Client Application The Blazor Server app handles user interactions with secure authentication:
  • Cookie Authentication: Secure, server-side session management
  • Login/Logout Endpoints: Minimal APIs for authentication flow
  • Radzen Components: Beautiful, ready-to-use UI elements
  • Current User Context: Service to access authenticated user information 
// Cookie authentication setup
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.LoginPath = "/login";
        options.LogoutPath = "/logout-user";
        options.Cookie.HttpOnly = true;
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
        options.ExpireTimeSpan = TimeSpan.FromMinutes(30);
        options.SlidingExpiration = true;
    });
Enter fullscreen mode Exit fullscreen mode
  1. Domain Layer - Business Rules Contains core domain logic:
  • User entities and constants
  • Interface definitions for repositories
  • Domain-specific business rules
  1. Application Layer - Security & Services Handles authentication logic:
  • JWT token generation and validation
  • User authentication services
  • Security configuration
  1. Shared Layer - Common DTOs Reusable data transfer objects:
  • ApiResponse.cs - Standardized API responses
  • ResultDto.cs - Result types for operations
  • LoginRequest - User login credentials

Getting Started: Quick Setup Guide

Prerequisites

  • .NET 10 SDK or later
  • Visual Studio 2022 or VS Code
  • Basic knowledge of C# and Blazor

Step 1: Clone the Repository

git clone https://github.com/mafzal88/BlazorJWTTokenStarter.git
cd BlazorJWTTokenStarter
Enter fullscreen mode Exit fullscreen mode

Step 2: Update Configuration
Edit WebAPI/appsettings.json with your JWT settings:

{
  "JwtSettings": {
    "Key": "your-secret-key-here-min-32-chars",
    "Issuer": "YourAppName",
    "Audience": "YourAppUsers",
    "DurationInMinutes": 60
  },
  "ConnectionStrings": {
    "DefaultConnection": "your-database-connection-string"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Run the Applications
Terminal 1 - Start WebAPI:

cd WebAPI
dotnet run
# Runs on https://localhost:5001
# Visit https://localhost:5001/scalar/v1 for API documentation
Enter fullscreen mode Exit fullscreen mode

Terminal 2 - Start WebApp:

cd WebApp
dotnet run
# Runs on https://localhost:5002
Enter fullscreen mode Exit fullscreen mode

Step 4: Test Authentication

  • Navigate to https://localhost:5002
  • Click "Login"
  • Use your test credentials
  • On success, you'll be authenticated and see the user dashboard

Core Authentication Flow 

User → Blazor App (WebApp) 
  ↓
Login Form (Radzen Components)
  ↓
POST /login-user (Minimal API)
  ↓
Validate against WebAPI
  ↓
Create Claims & Cookie
  ↓
Redirect to Dashboard
Enter fullscreen mode Exit fullscreen mode

Why This Template is Powerful

🎯 Production-Ready
Security best practices implemented
Secure cookie handling with HttpOnly and SameSite flags
Token validation on every request
30-minute sliding expiration with auto-refresh
🧩 Modular Architecture
Clear separation of concerns
Easy to extend with business logic
Testable service layer
Reusable shared components
🎨 UI/UX with Radzen
Professional-looking forms and components
Responsive design out-of-the-box
Theme support with cookie persistence
Custom notification system
⚡ Modern .NET Stack
.NET 10 latest features
Minimal APIs for lightweight endpoints
Built-in OpenAPI/Swagger support
Async/await throughout

Full code :
https://github.com/mafzal88/BlazorJWTTokenStarter

Top comments (0)