Blazor  

JWT Authentication in Blazor (.NET 10)

JSON Web Token (JWT) is a secure way to authenticate users in modern web applications. In a Blazor application built with ASP.NET Core, JWT is commonly used when the frontend communicates with a protected Web API.

This article explains how JWT authentication works and how to implement it in a Blazor application using .NET 10.

1. What is JWT?

A JSON Web Token is a compact token used to securely transmit information between the client and server.

A JWT consists of three parts:

Header.Payload.Signature

Example:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
.
eyJzdWIiOiIxMjMiLCJuYW1lIjoiU2hhZmFldCIsInJvbGUiOiJBZG1pbiJ9
.
abc123signature

Each part contains encoded information about the user and the token signature.

2. JWT Authentication Flow in Blazor

The authentication process works as follows:

  1. User enters username and password in the Blazor UI

  2. The client sends login request to the API

  3. The API validates the user credentials

  4. If valid, the API generates a JWT token

  5. The client stores the token (local storage or cookie)

  6. Every API request includes the token in the header

Authorization: Bearer <JWT Token>

This allows the server to verify the user's identity.

3. Creating JWT Authentication in ASP.NET Core

First install the JWT package:

Microsoft.AspNetCore.Authentication.JwtBearer

Microsoft.AspNetCore.Authentication.JwtBearer

builder.Services.AddAuthentication("Bearer")
.AddJwtBearer(options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true
    };
});

This configuration tells the application how to validate incoming tokens.

4. Generating a JWT Token

After validating the user's credentials, the API generates a token.

Example:

var tokenHandler = new JwtSecurityTokenHandler();

var tokenDescriptor = new SecurityTokenDescriptor
{
    Subject = new ClaimsIdentity(new[]
    {
        new Claim(ClaimTypes.Name, user.Username),
        new Claim(ClaimTypes.Role, "Admin")
    }),
    Expires = DateTime.UtcNow.AddHours(1),
    SigningCredentials = new SigningCredentials(
        new SymmetricSecurityKey(key),
        SecurityAlgorithms.HmacSha256Signature)
};

var token = tokenHandler.CreateToken(tokenDescriptor);

return tokenHandler.WriteToken(token);

This token will be sent to the client after successful login.

5. Protecting API Endpoints

You can secure API endpoints using the Authorize attribute.

[Authorize]
[HttpGet("profile")]
public IActionResult GetProfile()
{
    return Ok("Authorized user data");
}

Only users with valid JWT tokens can access this endpoint.

6. Using JWT in Blazor

In a Blazor application:

  1. User logs in

  2. JWT token is stored in LocalStorage

  3. The token is attached to every API request

Example HTTP header:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

This ensures that only authenticated users can call protected APIs.

7. Best Practices

For production applications:

  • Use HTTPS for all requests

  • Use Access Token + Refresh Token

  • Store tokens securely (HttpOnly cookie if possible)

  • Set short expiration time for tokens

These practices improve security in real-world applications.

Conclusion

JWT authentication is widely used for securing modern applications. By integrating JWT with Blazor and ASP.NET Core, developers can build scalable and secure authentication systems suitable for APIs and single-page applications.

Membership not found