I have a server app that connects to a custom login server, receives a JWT, and stores it in session storage for use throughout the app. I use <AuthorizeView> to contain restricted content, but it always resolves to <NotAuthorized> until I refresh the page. After the page is refreshed, the login state is correctly propagated and <Authorized> is visible. This also happens during logout — any authorization change.

I have a custom AuthenticationStateProvider that overrides GetAuthenticationStateAsync(). During this method, I retrieve the auth token from session storage. I am pretty sure that while waiting for this task, the app renders, and doesn’t wait for the authentication state to resolve. Thus, causing the issue. (maybe?)

CustomAuthStateProvider.cs

public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {        
        var result = await protectedSessionStore.GetAsync<string>("authToken");
        var token = result.Success ? result.Value : string.Empty;
        
        var identity = string.IsNullOrWhiteSpace(token)
            ? new ClaimsIdentity()
            : new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt");
        
        var task = Task.FromResult(new AuthenticationState(new ClaimsPrincipal(identity)));
        NotifyAuthenticationStateChanged(task);
        return await task;
    }

I then inject it like this
Program.cs

builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

In Login, I have a form that takes a username/password, sends an HTTP request to the login endpoint, gets a JWT, and authenticates the user with it.

This is where the behavior becomes unexpected. Instead of the components on the screen re-rendering to reflect the new authorization status, they stay the same. Even when I navigate away from the page (via <a>) it doens’t update. It ONLY updates when I refresh.
Login.razor

<AuthorizeView>
    <Authorized>
        @{ Navigation.NavigateTo("/"); }
    </Authorized>
</AuthorizeView>

<EditForm Model="@Model" FormName="Login" OnValidSubmit="HandleLogin">    
    <InputText @bind-Value="Model.Username" placeholder="Username" />
    <InputText @bind-Value="Model.Password" type="password" />
    <button type="submit">Login</button>
</EditForm>

@code {
    [SupplyParameterFromForm]
    public LoginModel Model { get; set; } = new();
    
    private async Task HandleLogin(EditContext obj) => await HandleLoginInternal();

    private async Task HandleLoginInternal()
    {
        var response = await Http.PostAsJsonAsync("User/login", Model);
        if (response.IsSuccessStatusCode)
        {
              var token = await response.Content.ReadAsStringAsync();
              await ProtectedSessionStore.SetAsync("authToken", token);
              await AuthStateProvider.ChangeUser(token);
              StateHasChanged();
        }
    }

    public class LoginModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

I’ve noticed that <AuthorizeView> never shows <Authorizing>, leading me to believe that the app thinks it has the authentication state before it actually does. I’d like to fix this issue, as it allows logged in users to access pages they shouldn’t while logged in (for example, the login page)

I’ve tried a lot of disjointed things to get this to work, specifically adding StateHasChanged() to the end of HandleLoginInternal() but it doesn’t do anything. I expect the page to redirect to "/", and the navbar to say “Logout” instead of “Login” upon authorization.

Any ideas? Thanks! I have no idea what I’m doing wrong as I’m new to Blazor and ASP.NET.