Blazor Webassembly Authentication is verry slow

Question

hi I have created a blazor webassembly project, which uses an API to fetch data and authorize. The authentication works fine, the problem is the app is very slow. For example to login procedure can take up to 5 seconds through the bazor app, while procedure is verry fast if I call the login action through the API. What am I doing wrong? Here is the blazor code for the authentication. I have not included the API code since the authentication is fast thorugh postman

Login.razor

@page "/login"
@inject IAuthService AuthService
@inject NavigationManager NavigationManager
@using System.Net.Http
@inject HttpClient Http

<h1>Register</h1>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Please enter your details</h5>
        <EditForm Model="UserLoginViewModel" OnValidSubmit="HandleRegistration">
            <DataAnnotationsValidator />
            <ValidationSummary />

            <div class="form-group">
                <label for="email">Email address</label>
                <InputText Id="email" class="form-control" @bind-Value="UserLoginViewModel.Email" />
                <ValidationMessage For="@(() => UserLoginViewModel.Email)" />
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <InputText Id="password" type="password" class="form-control" @bind-Value="UserLoginViewModel.Password" />
                <ValidationMessage For="@(() => UserLoginViewModel.Password)" />
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </EditForm>
    </div>
</div>

<h2 value="@test" innderHtml="@test" text="@test"></h2>

@code {
    string test = "wow";
    private UserLoginViewModel UserLoginViewModel = new UserLoginViewModel();



    private async Task HandleRegistration()
    {

        var result = await AuthService.Login(UserLoginViewModel);

        if (result.Successful)
        {
            NavigationManager.NavigateTo("/");
        }
    }

}

Authservice -> Login-function

public async Task<LoginResult> Login(UserLoginViewModel model)
        {

            var loginAsJson = JsonSerializer.Serialize(model);
            var response = await _httpClient.PostAsync("Account/Login", new StringContent(loginAsJson, Encoding.UTF8, "application/json"));
            LoginResult loginResult = JsonSerializer.Deserialize<LoginResult>(await response.Content.ReadAsStringAsync(), new JsonSerializerOptions { PropertyNameCaseInsensitive = true });


            if (!response.IsSuccessStatusCode)
                return loginResult;


            await _localStorage.SetItemAsync("authToken", loginResult.Token);
            ((ApiAuthenticationStateProvider)_authenticationStateProvider).MarkUserAsAuthenticated(model.Email);
            _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", loginResult.Token);


            return loginResult;

        }

Thank you!

Answer 1

This probably is not your issue, but I ran into the same thing recently. My authentication time in Blazor WebAssembly jumped from less a second to several seconds. I tracked it down to denying x-frames.

I think this is only going to affect a hosted Blazor WebAssembly application that is using ASP.NET Identity for Authentication. In other words, anyone that checked Individual Accounts when setting up a hosted project.

As soon as I setup NWebSpec and added this line it became very slow:

app.UseXfo(xfo => xfo.Deny());

I resolved the issue by switching to same origin:

app.UseXfo(xfo => xfo.SameOrigin());

Leaving this here in case anyone else stumbles on this issue.