JWT authentication Blazor Web App

[redowl3]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

It seems impossible (or at least not obvious) to implement JWT authentication with Blazor Web Apps. I have seen many related issues raised but rather than add to the noise can you either point me to existing code or provide a minimal code on how to actually do this? I am using global InteractiveServer rendermode.

Just to add, I've tried using GitHub CoPilot (all models including Claude Sonnet) to help and they have had no luck, which must be a bad sign right?!

Thanks

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

9

Anything else?

No response

[LucianoCBarilari]

Is your problem related to .NET 9? Because this works well on .NET 8.?

If you're looking for a way to implement JWT, I have a project where JWT is working as expected.

Package Used

<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.6" />

Code Snippet in Program.cs

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(options =>
{
    options.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
    {
        ValidateIssuer = false,
        ValidateAudience = false,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        ValidIssuer = builder.Configuration["JwtSettings:Issuer"],
        ValidAudience = builder.Configuration["JwtSettings:Audience"],
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["JwtSettings:SecretKey"] ?? throw new InvalidOperationException("SecretKey not found.")))
    };
});

User Services Code

public class UserServices(IConfiguration configuration, DataContext dataContext) : IUserServices
{
    private readonly IConfiguration _configuration = configuration; 
    private readonly DataContext _DataContext = dataContext;

    // User authentication method
    public string Login(User UserLogin)
    {
        User CurrentUser = new();
        string Result = string.Empty;

        try
        {
            CurrentUser = _DataContext.Users.First(x => x.UserAccount == UserLogin.UserAccount);

            if (CurrentUser != null)
            {
                var passwordHasher = new PasswordHasher<User>();
                var passwordVerificationResult = passwordHasher.VerifyHashedPassword(CurrentUser, CurrentUser.UserPassword, UserLogin.UserPassword);

                if (passwordVerificationResult == PasswordVerificationResult.Success)
                {
                    var TokenHandler = new JwtSecurityTokenHandler();
                    var Key = Encoding.ASCII.GetBytes(_configuration["JwtSettings:SecretKey"] ?? throw new InvalidOperationException("SecretKey not found."));
                    var TokenDescriptor = new SecurityTokenDescriptor
                    {
                        Subject = new ClaimsIdentity(new Claim[]
                        {
                            new Claim(ClaimTypes.NameIdentifier, CurrentUser.UserAccount),
                            new Claim(ClaimTypes.Name, CurrentUser.UserNameAndLastName),
                            new Claim(ClaimTypes.Email, CurrentUser.UserEmail),
                            new Claim(ClaimTypes.Role, CurrentUser.Role.ToString())
                        }),
                        Expires = DateTime.UtcNow.AddMonths(1),
                        SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(Key), SecurityAlgorithms.HmacSha256Signature)
                    };

                    var Token = TokenHandler.CreateToken(TokenDescriptor);
                    Result = TokenHandler.WriteToken(Token);
                }
                else
                {
                    Result = "Incorrect password";
                }
            }
            else
            {
                Result = "User not found";
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }

        return Result;
    }

    public TokenValidationParameters GetValidationParameters()
    {
        return new TokenValidationParameters
        {
            ValidateIssuer = false,
            ValidateAudience = false,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = _configuration["JwtSettings:Issuer"],
            ValidAudience = _configuration["JwtSettings:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JwtSettings:SecretKey"] ?? throw new InvalidOperationException("Secret Key not found")))
        };
    }
}

---

Consuming the Services Client-Side

AuthenticateUserAsync Method with Local Storage Integration

var jwt = await localStorage.GetItemAsync<string>("jwt");

// If the JWT does not exist in local storage or is invalid, authenticate the user and retrieve a new JWT
if (string.IsNullOrEmpty(jwt) || !await IsJwtValid(httpClient, jwt))
{
    try
    {
        jwt = await AuthenticateUserAsync(httpClient);
        if (!string.IsNullOrWhiteSpace(jwt))
        {
            // Save the new JWT in local storage
            await localStorage.SetItemAsync("jwt", jwt);
        }
        else
        {
            throw new Exception("An error occurred while validating the access token.");
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error during authentication: {ex.Message}");
        // Handle the error as needed
    }
}

// Configure the authorization header
httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", jwt);

/// <summary>
/// Asynchronously authenticates a user by sending their credentials to an authentication API endpoint.
/// Retrieves authentication-related configuration values from `_configuration`, including the authentication URL, username, password, and email.
/// Validates that all necessary configuration values are present and throws an exception if any are missing.
/// Handles exceptions that may occur during the authentication process, logging them to the console.
/// The method returns a JWT if authentication is successful, or an empty string if authentication fails or encounters an error.
/// </summary>
/// <returns>A JWT if authentication is successful, or an empty string if authentication fails or encounters an error.</returns>
async Task<string> AuthenticateUserAsync(HttpClient httpClient)
{
    try
    {
        // Validate the configuration
        if (string.IsNullOrEmpty(authenticationUrl) || string.IsNullOrEmpty(UserAccount) || string.IsNullOrEmpty(userPassword) || string.IsNullOrEmpty(userEmail))
        {
            throw new InvalidOperationException("Authentication configuration is incomplete.");
        }

        // Create a User object using authentication details from the configuration
        User CurrentUser = new User
        {
            UserAccount = UserAccount ?? string.Empty,
            UserPassword = userPassword ?? string.Empty,
            UserEmail = userEmail ?? string.Empty
        };

        var content = new StringContent(JsonSerializer.Serialize(CurrentUser), Encoding.UTF8, "application/json");
        var response = await httpClient.PostAsync(authenticationUrl, content);

        if (!response.IsSuccessStatusCode)
        {
            throw new HttpRequestException($"Authentication error: {response.StatusCode} {response.ReasonPhrase}");
        }
        else
        {
            jwt = await response.Content.ReadAsStringAsync();
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error during authentication: {ex.Message}");
        // Handle the error as needed
    }

    return jwt ?? string.Empty;
}

IsJwtValid Method

/// <summary>
/// Checks the validity of a JWT (JSON Web Token) by sending an HTTP GET request to a designated URL.
/// </summary>
/// <param name="jwt">The JWT to be validated.</param>
/// <returns>True if the JWT is valid; otherwise, false.</returns>
async Task<bool> IsJwtValid(HttpClient httpClient, string jwt)
{
    if (string.IsNullOrEmpty(jwt) || string.IsNullOrEmpty(IsValidUrl))
    {
        return false;
    }

    try
    {
        // Send an HTTP GET request to the validation URL with the JWT as a query parameter
        HttpResponseMessage response = await httpClient.GetAsync($"{IsValidUrl}?jwt={jwt}");

        // Return true if the HTTP response indicates success (200-299 range)
        return response.IsSuccessStatusCode;
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
        return false;
    }
}

---

Let me know if this is what you are looking for!!

[redowl3]

Hi Luciano, thanks for the response, very much appreciated!

Does this solution work when using a Blazor Web App that is using global InteractiveServer render mode? In our scenario we are calling a 3rd party API that is returns a valid JWT, we need to use the claims within the JWT to create a ClaimsPrincipal that we can then use to sign in with.

Previous to .Net 8 we were sending the token to a razor page and using HttpContext.Signin but this no longer works for some reason. Once again, many thanks for the response.

[LucianoCBarilari]

The behavior and implementation details can vary depending on whether your Blazor app is a Web App Server, WebAssembly, or Auto. In my case, I decided to split the Server and WASM into separate functionalities. Despite being part of the same project, they communicate through API calls, leveraging HttpClient.

However, keep in mind that HttpContext.SignIn does not work when using Interactive Server Mode. If you encounter this issue, you can apply the following workaround:

<body>
    <Routes @rendermode="RenderModeForPage" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? RenderModeForPage => 
        HttpContext.Request.Path.StartsWithSegments("/Account") 
            ? null 
            : InteractiveServer;
}

This snippet is discussed in detail on [Stack Overflow](https://stackoverflow.com/questions/77599233/blazor-net-8-and-global-interactivity-issue-with-identity).

Recommendations for HttpContextAccessor

To handle HttpContext in Razor Components or Blazor apps, refer to the official documentation:

• [ASP.NET Core Fundamentals: HttpContext](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/http-context?view=aspnetcore-8.0#ihttpcontextaccessorhttpcontext-in-razor-components-blazor)

Managing RenderMode

For a deeper understanding of RenderMode in Blazor, check the documentation here:

• [Blazor Components: Render Modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0)

---

I hope this helps you. I believe the key is to provide a clear description of the project, including some details, but without revealing any sensitive or confidential information.

[redowl3]

Thanks Luciano, much appreciated I will take a look.

[ahelland]

It is by no means impossible to implement JWT-based authentication in .NET. It is however slightly confusing at times to find the necessary docs and samples for your specific use case which in turn can make it hard to get right.

You have the following in the code for for an API that validates a token:

builder.Services.AddAuthentication()
    .AddJwtBearer("Bearer", jwtOptions =>
    {

If you have for instance Okta as an IdP you would have something like this on the server-side Blazor to acquire a token:

builder.Services.AddAuthentication("MicrosoftOidc")
    .AddOpenIdConnect("MicrosoftOidc", oidcOptions =>
    {

And if you want to use the new feature in Entra where you can use a user-assigned managed identify you would use the following:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddCookie("MicrosoftOidc")
    .AddMicrosoftIdentityWebApp(microsoftIdentityOptions =>
    {

And that doesn't touch upon things like which OAuth flow to use, if you want a BFF-pattern in your web app, and a number of other things :)