asp.net-coreblazorlocal-storagedelegatinghandlerjavascript-interop

Blazor - LocalStorageService not working in DelegatingHandler


I am using the Blazored.LocalStorage library to store JWT tokens returned from an API's login method. I then use it again on every other API call to retrieve it and send it as a bearer token. I am moving my previously functional hard coded HTTP clients to using the Refit library as well as a DelegatingHandler for adding the JWT token to the Authorization header of every request. The handler looks like this :

internal sealed class AuthenticationHandler(ILocalStorageService storageService) : DelegatingHandler
{
    private readonly ILocalStorageService _storageService = storageService;

    protected async override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        var authToken = await _storageService.GetItemAsStringAsync("test", cancellationToken);

        if (!string.IsNullOrEmpty(authToken))
            request.Headers.Authorization = new AuthenticationHeaderValue("bearer", authToken);

        return await base.SendAsync(request, cancellationToken);
    }
}

Here is how I register my Refit clients :

builder.Services.AddRefitClient<ISomeRefitClientInterface>(refitSettings)
    .ConfigureHttpClient(options =>
    {
        options.BaseAddress = new Uri(config["APIs:MainAPI"]!);
        options.Timeout = TimeSpan.FromMinutes(5);
    })
    .AddHttpMessageHandler<AuthenticationHandler>()
    .AddHttpMessageHandler<LoggingHandler>()
    .AddHttpMessageHandler<RetryHandler>();

The 2 last handlers work perfectly but the AuthenticationHandler wants absolutely nothing to do with local storage as it throws the following exception : JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendererd. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

Prerendering is disabled globally across my entire application and local storage works perfectly fine in any component's OnInitializedAsync method (which would not be the case if prerendering was on). Prior to using Refit, I had hardcoded my HTTP clients and the auth was being done in an identical way but without the use of a DelegatingHandler. Every client inherited from a common base class and the logic to add the token to the auth header was in there and being called manually for every request.

A quick google search reveals similar issues reported on GitHub with no resolution that I can see. It seems that librairies using Javascript interop simply do not work from within DelegatingHandlers as I have tried Blazored.SessionStorage with identical results.

Is there any way of accessing local storage from a DelegatingHandler?


Solution

  • I FINALLY figured this out! Turns out you can get the logged in user (and the auth token if you've mapped it to some sort of claim) directly from Blazor's AuthenticationStateProvider from within a DelegatingHandler. A few bells and whistles are required to get DI to play correctly with IHttpClientFactory but this is all detailed here : https://learn.microsoft.com/en-us/aspnet/core/blazor/security/server/additional-scenarios?view=aspnetcore-8.0&preserve-view=true#access-authenticationstateprovider-in-outgoing-request-middleware