seeking assistance to reflect JWT-based authentication and authorization from the API Project to a Blazor WEb APP project

[Aboubakar2]

I'm working on a .NET 9 Blazor Web App (the new hybrid model supporting both SSR and WASM). On the backend, I have a separate ASP.NET Core Web API secured with JWT tokens. On the client side, the Blazor app authenticates users by calling the API, receives a JWT, stores it in localStorage, and attaches it to API requests via the Authorization: Bearer header. I also have a custom AuthenticationStateProvider that reads the token and exposes the user's claims.

This setup works well for rendering authenticated UI using , checking roles, and so on.

However, I want to use the [Authorize] attribute on .razor pages to restrict access at the routing level. As soon as I add [Authorize] to a page, I get this runtime error:

InvalidOperationException: Unable to find the required 'IAuthenticationService' service.
Please add all the required services by calling 'IServiceCollection.AddAuthentication'
I understand that [Authorize] in Blazor Web App SSR mode relies on proper server-side authentication via AddAuthentication() and that it doesn't work if the server can't validate or recognize the user identity. Since I'm only storing the token in localStorage and not sending it in cookies or headers for SSR, the server has no idea who the user is.

I'm trying to figure out if there’s a clean way to support [Authorize] on pages while keeping my existing JWT-based client-side auth flow. I would like to avoid switching to cookie-based auth or duplicating logic.

So my questions are:

Is there a way to make [Authorize] work in a Blazor Web App using only JWT stored in localStorage?

If not, what is the best practice for securing pages (not just content blocks) with a JWT-only setup?

Would sending the token to the server via a custom cookie or header and validating it manually be a viable workaround?

Or what is the best way to reflect that authentication and Authorization with JWT that i have on the API project in the Blazor WEB APP???

Any guidance would be appreciated. Thanks!

// Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();


builder.Services.AddBlazoredLocalStorage();
// Auth Services 
builder.Services.AddAuthenticationCore();
builder.Services.AddCascadingAuthenticationState();

builder.Services.AddScoped<IAuthService, AuthService>();
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

// Add the authentication delegating handler
builder.Services.AddTransient<AuthenticationDelegatingHandler>();


//Adding the Api Service Manager , with who we can access all the api services
builder.Services.AddHttpClient<IApiServiceManager, ApiServiceManager>(client =>
{
    client.BaseAddress = new Uri(builder.Configuration.GetValue<string>("ApiSettings:BaseUrl"));
    client.DefaultRequestHeaders.Add("Accept", "application/json");
})
.AddHttpMessageHandler<AuthenticationDelegatingHandler>();


builder.Services.AddHttpClient<IAuthService, AuthService>(client =>
{
    client.BaseAddress = new Uri(builder.Configuration.GetValue<string>("ApiSettings:BaseUrl"));
    client.DefaultRequestHeaders.Add("Accept", "application/json");
});


builder.Services.ConfigureHttpJsonOptions(options =>
{
    options.SerializerOptions.Converters.Add(new JsonStringEnumConverter(JsonNamingPolicy.CamelCase));

});


var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();


app.UseAntiforgery();

app.UseAuthentication();
app.UseAuthorization();

app.MapStaticAssets();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(Eduli.SharedComponents.Components.App.EduliApp).Assembly);

app.Run();

// AuthService.cs

public interface IAuthService
{
    Task<bool> LoginAsync(LoginDto loginDto);
    Task<bool> RegisterAsync(RegisterDto registerDto);
    Task LogoutAsync();
    Task<bool> IsAuthenticatedAsync();
    Task<string?> GetTokenAsync();
    Task<ClaimsPrincipal> GetClaimsPrincipalAsync();
    Task<string?> GetUserNameAsync();
    Task<string?> GetUserEmailAsync();
    Task<List<string>> GetUserRolesAsync();
}

public class AuthService(HttpClient httpClient, ILocalStorageService localStorage, AuthenticationStateProvider authStateProvider) : IAuthService
{
    private readonly HttpClient _httpClient = httpClient;
    private readonly ILocalStorageService _localStorage = localStorage;
    private readonly AuthenticationStateProvider _authStateProvider = authStateProvider;
    private readonly string _tokenKey = "authToken";

    public async Task<bool> LoginAsync(LoginDto loginDto)
    {
        try
        {
            var json = JsonSerializer.Serialize(loginDto);
            var content = new StringContent(json, Encoding.UTF8, "application/json");

            var response = await _httpClient.PostAsync("/api/auth/login", content);

            if (response.IsSuccessStatusCode)
            {
                var responseContent = await response.Content.ReadAsStringAsync();
                var loginResponse = JsonSerializer.Deserialize<LoginResponse>(responseContent, new JsonSerializerOptions
                {
                    PropertyNameCaseInsensitive = true
                });

                if (loginResponse != null && !string.IsNullOrEmpty(loginResponse.Token))
                {
                    await _localStorage.SetItemAsync(_tokenKey, loginResponse.Token);
                    SetAuthorizationHeader(loginResponse.Token);
                   
                    await ((CustomAuthStateProvider)_authStateProvider).MarkUserAsAuthenticated(loginResponse.Token);
                    return true;
                }
            }
            return false;
        }
        catch
        {
            return false;
        }
    }

    public async Task<bool> RegisterAsync(RegisterDto registerDto)
    {
        try
        {
            var json = JsonSerializer.Serialize(registerDto);
            var content = new StringContent(json, Encoding.UTF8, "application/json");

            var response = await _httpClient.PostAsync("/api/auth/register", content);
            return response.IsSuccessStatusCode;
        }
        catch
        {
            return false;
        }
    }

    public async Task LogoutAsync()
    {
        await _localStorage.RemoveItemAsync(_tokenKey);
        await ((CustomAuthStateProvider)_authStateProvider).MarkUserAsLoggedOut();

    }

    public async Task<bool> IsAuthenticatedAsync()
    {
        var token = await GetTokenAsync();

        if (string.IsNullOrEmpty(token))
            return false;

        try
        {
            var jwtHandler = new JwtSecurityTokenHandler();
            var jwt = jwtHandler.ReadJwtToken(token);

            // Vérifier si le token n'est pas expiré
            return jwt.ValidTo > DateTime.UtcNow;
        }
        catch
        {
            return false;
        }
    }

    public async Task<string?> GetTokenAsync()
    {
        try
        {
            return await _localStorage.GetItemAsync<string>(_tokenKey);
        }
        catch
        {
            return null;
        }
    }

    public async Task<ClaimsPrincipal> GetClaimsPrincipalAsync()
    {
        var token = await GetTokenAsync();

        if (string.IsNullOrEmpty(token))
            return new ClaimsPrincipal(new ClaimsIdentity());

        try
        {
            var jwtHandler = new JwtSecurityTokenHandler();
            var jwt = jwtHandler.ReadJwtToken(token);

            var identity = new ClaimsIdentity(jwt.Claims, "jwt");
            return new ClaimsPrincipal(identity);
        }
        catch
        {
            return new ClaimsPrincipal(new ClaimsIdentity());
        }
    }

    public async Task<string?> GetUserNameAsync()
    {
        var claimsPrincipal = await GetClaimsPrincipalAsync();
        return claimsPrincipal.FindFirst(ClaimTypes.Name)?.Value;
    }

    public async Task<string?> GetUserEmailAsync()
    {
        var claimsPrincipal = await GetClaimsPrincipalAsync();
        return claimsPrincipal.FindFirst(ClaimTypes.Email)?.Value;
    }

    public async Task<List<string>> GetUserRolesAsync()
    {
        var claimsPrincipal = await GetClaimsPrincipalAsync();
        return claimsPrincipal.FindAll(ClaimTypes.Role).Select(c => c.Value).ToList();
    }

    private void SetAuthorizationHeader(string token)
    {
        _httpClient.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", token);
    }

    // Méthode pour initialiser le token au démarrage
    public async Task InitializeAsync()
    {
        var token = await GetTokenAsync();
        if (!string.IsNullOrEmpty(token) && await IsAuthenticatedAsync())
        {
            SetAuthorizationHeader(token);
        }
    }

}

public class CustomAuthStateProvider(ILocalStorageService localStorage, HttpClient httpClient) : AuthenticationStateProvider
{
    private readonly HttpClient _httpClient = httpClient;
    private readonly ILocalStorageService _localStorage = localStorage;

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        try
        {
            var token = await _localStorage.GetItemAsync<string>("authToken");

            if (string.IsNullOrEmpty(token))
            {
                return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
            }

            if (IsTokenExpired(token))
            {
                await _localStorage.RemoveItemAsync("authToken");
                return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
            }

            var claims = ParseClaimsFromJwt(token);
            var identity = new ClaimsIdentity(claims, "jwt");
            var user = new ClaimsPrincipal(identity);

            return new AuthenticationState(user);
        }
        catch
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }
    }

    public async Task MarkUserAsAuthenticated(string token)
    {
        var claims = ParseClaimsFromJwt(token);
        var identity = new ClaimsIdentity(claims, "jwt");
        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
    }

    public async Task MarkUserAsLoggedOut()
    {
        var identity = new ClaimsIdentity();
        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
    }

    private bool IsTokenExpired(string token)
    {
        try
        {
            var payload = token.Split('.')[1];
            var jsonBytes = ParseBase64WithoutPadding(payload);
            var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);

            if (keyValuePairs.TryGetValue("exp", out var exp))
            {
                var expTime = DateTimeOffset.FromUnixTimeSeconds(Convert.ToInt64(exp));
                return expTime <= DateTimeOffset.UtcNow;
            }

            return true;
        }
        catch
        {
            return true;
        }
    }

    private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
    {
        var payload = jwt.Split('.')[1];
        var jsonBytes = ParseBase64WithoutPadding(payload);
        var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);

        var claims = new List<Claim>();

        foreach (var kvp in keyValuePairs)
        {
            if (kvp.Key == "sub")
                claims.Add(new Claim(ClaimTypes.NameIdentifier, kvp.Value.ToString()));
            else if (kvp.Key == "email")
                claims.Add(new Claim(ClaimTypes.Email, kvp.Value.ToString()));
            else if (kvp.Key == "name")
                claims.Add(new Claim(ClaimTypes.Name, kvp.Value.ToString()));
            else if (kvp.Key == "role")
                claims.Add(new Claim(ClaimTypes.Role, kvp.Value.ToString()));
            else
                claims.Add(new Claim(kvp.Key, kvp.Value.ToString()));
        }

        return claims;
    }

    private byte[] ParseBase64WithoutPadding(string base64)
    {
        switch (base64.Length % 4)
        {
            case 2: base64 += "=="; break;
            case 3: base64 += "="; break;
        }
        return Convert.FromBase64String(base64);
    }
}