Blazor WASM- Client breakpoints not working when using Middleware on Server

Question

In Visual Studio Community 2022 Version 17.7.4, with both projects targeting .NET 7.0:

In my Blazor WASM project, I need to implement API key authentication on my API (Server side). I have attempted a Middleware approach. The problem is, that whenever I add the statement:
app.UseMiddleware<ApiKeyAuthMiddleware>(); to my Server project, none of the breakpoints in my Client project is hit:

And currently the client/server API auth code is not working together as expected, as I’m getting my error message: API Key missing. Based on this it seems that the middleware is working.

Though, I can’t step through the client side to check, as the breakpoints are not hit, when using the Middleware.

When I remove the app.UseMiddleware(); line and check the client-side logic, it does seem correct though:

Server project:

Program.cs

.
.
.
app.UseHttpsRedirection();

app.UseMiddleware<ApiKeyAuthMiddleware>();  //This is the problem line. If I remove this, I can debug my client-side again

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();

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

app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");

app.Run();

ApiKeyAuthMiddleware.cs

public class ApiKeyAuthMiddleware
{
    private readonly RequestDelegate _next;
    private readonly IConfiguration _configuration;

    public ApiKeyAuthMiddleware(RequestDelegate next, IConfiguration configuration)
    {
        _next = next;
        _configuration = configuration;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        if(!context.Request.Headers.TryGetValue(AuthConstants.ApiKeyHeaderName, out
            var extractedApiKey))
        {
            context.Response.StatusCode = 401;
            await context.Response.WriteAsync("API Key missing.");
            return;
        }

        var apiKey = _configuration.GetValue<string>(AuthConstants.ApiKeySectionName);
        if(!apiKey.Equals(extractedApiKey))
        {
            context.Response.StatusCode = 401;
            await context.Response.WriteAsync("Invalid API Key.");
        }

        await _next(context);
    }        
}

AuthConstants.cs

public class AuthConstants
{
    public const string ApiKeySectionName = "Authentication:ApiKey";
    public const string ApiKeyHeaderName = "X-Api-Key";
}

AppSettings.json

  "Authentication": {
    "ApiKey": "30d45299230441dda30c0c8fd94b48e7"
  },

Client project

Program.cs

builder.Services.AddScoped(sp => new HttpClient(new AddHeadersDelegatingHandler())
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

AddHeadersDelegatingHandler.cs

public class AddHeadersDelegatingHandler : DelegatingHandler
{
    public AddHeadersDelegatingHandler() : base(new HttpClientHandler())
    {
    }

    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.Headers.Add("X-Api-Key", "30d45299230441dda30c0c8fd94b48e7");
        return await base.SendAsync(request, cancellationToken);
    }
}

How do I solve the problem of the breakpoints not being hit, when I use Middleware in the Server project?

Leave a Comment Cancel reply