After upgrading to .Net 5.0 my blazor WASM app started getting stuck on "Authorizing..." (it gets stuck when the user was already logged in, first load with redirect to login screen works fine, so I have to clear the cache if I want it to work) and "Completing login..." (with a URL like https://localhost:5001/authentication/login-callback?code=51FEF78805049242F1092A249B1746393790AE956B1FC2136092AE0924B3FB42&scope=openid%20profile%20email%20MyApp.WebAPI&state=e8bffbd2b93f44dc8a261cf6d65c6165&session_state=eE0yRtJI0fkjptvZSIfiUsvuHAQoyNStmS_kv--Wcv0.DCACB551F4CC63841C2615456DD4B9BF) - if I go to localhost:5001 after it got stuck on "Completing login..." I am finally logged in.
Initially it was working fine on most modern computers and the issue was only visible on slow computers (~8 year old laptop for instance). However, while I tried to understand the issue and fix it, I managed to brake it completely on my developer laptop as well, where the main branch still works mostly fine.
Creating a new ASP.Net Core app with authentication with IdentityServer4 works just fine, no issues there.
My issue looks similar to https://github.com/dotnet/aspnetcore/issues/26195 - however, I'm using only IdentityServer4 and I don't see any exceptions in the developer console.
I tried to reduce the code to a bare minimum, so here is the Program.cs
:
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddApiAuthorization();
builder.Services.AddSingleton<IStringLocalizer>(serviceProvider =>
{
var factory = serviceProvider.GetRequiredService<IStringLocalizerFactory>();
return factory.Create(typeof(SharedResource));
});
builder.Services.AddLocalization();
builder.Services
.AddBlazorise()
.AddBootstrapProviders();
builder.Logging.SetMinimumLevel(LogLevel.Trace);
var host = builder.Build();
host.Services.UseBootstrapProviders();
await host.RunAsync();
}
the App.razor
:
@inject IStringLocalizer S
<ThemeManager>
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
<NotAuthorized>
@if (context.User.Identity?.IsAuthenticated ?? false)
{
<p>@S["You don't have enough permissions to access this page."]</p>
}
else
{
<RedirectToLogin />
}
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<NotFoundError>
</NotFoundError>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
</ThemeManager>
The MainLayout.razor
:
@inherits Microsoft.AspNetCore.Components.LayoutComponentBase
<header>
</header>
<main>
@Body
</main>
The Authentication.razor
:
@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@if (Action == "logged-out")
{
<RedirectToLogin RedirectBackToRoot="true"></RedirectToLogin>
}
@code{
[Parameter]
public string? Action { get; set; }
}
The problem is, that it just gets stuck and I don't even see what could be wrong. The one dependency I have here is on https://github.com/stsrki/Blazorise - however, I added the same dependency also to the new application, and that one still works.
Any idea how I could identify the issue?
The answer was, that the reference of the JS library pace.js broke the authentication. A new version of the library was released (and automatically updated) around the same time, we upgraded to .Net 5.0 so not sure if it was a .Net 5 issue or the library issue.