Blazor wasm cookie authentication

Question

I am working on a blazor wasm app and want to authenticate at a WebApi (different base url). My problem is that blazor HttpClient does not respect cookies send by Server. Do you have any hints/idea how to solve this?

In the code below I am trying to attach cookie which I got from the server by the first request (successfull authentication)

Porgram.cs

    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("#app");

        builder.Services.AddScoped<CustomDelegatingHandler>();

        builder.Services.AddHttpClient("ServerAPI", client => client.BaseAddress = new Uri("https://test.myserver.com")).AddHttpMessageHandler<CustomDelegatingHandler>();

        builder.Services.AddScoped<IHttpService, HttpService>();

        builder.Services.AddScoped<ILoginService, LoginService>();
        builder.Services.AddScoped<ISuncenterService, SuncenterService>();

        await builder.Build().RunAsync();
    }

CustomDelegatingHandler.cs looks like this

    private readonly IJSRuntime JSRuntime;
    public CustomDelegatingHandler(IJSRuntime jSRuntime) : base()
    {
        JSRuntime = jSRuntime;
    }

    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
        const string prm = "cookie";
        string cookie = await JSRuntime.InvokeAsync<string>("blazorExtensions.GetCookie", new[] { prm 
  });
        Console.WriteLine($"{prm}: {cookie}");
        request.Headers.Add(prm, cookie);
        return await base.SendAsync(request, cancellationToken);
    }

Yes. Final CustomDelegatingHandler.cs looks like this: public class CustomDelegatingHandler : DelegatingHandler { protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include); return await base.SendAsync(request, cancellationToken); } } And I added custom domain to my heroku host (I was hosting it on heroku), without adding custom domain it was working only with Firefox, not chromium. — Besso
This info about chromium browsers might be usefull too: blog.heroku.com/chrome-changes-samesite-cookie — Besso
Thanks for your feedback :) On my side, I switched to JWT (Json Web Token) solution. — Bronzato

JeremyW JeremyW · Accepted Answer · 2021-04-30T20:25:33

You need to set the credentials option on the request. The credentials option, as explained by the MDN link, controls whether the browser sends cookies on cross-origin requests - such as requests to your (different base url) WebAPI:

The credentials read-only property of the Request interface indicates whether the user agent should send cookies from the other domain in the case of cross-origin requests.

The C# way of doing this for a request is:

request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

The three choices for the option are Omit, SameOrigin, or Include:

Omit advises the browser never to send credentials (such as cookies or HTTP auth headers).

SameOrigin advises the browser to send credentials (such as cookies or HTTP auth headers) only if the target URL is on the same origin as the calling application.

Include advises the browser to send credentials (such as cookies or HTTP auth headers) even for cross-origin requests.

Blazor wasm cookie authentication

1 Answers