How should I parse and store authenticated user in a Blazor server app?

I have a blazor server app where I am storing user's jwt token in localstorage. Then I have a base page called AuthenticatedPageBase, in this page, I am accessing the identify and parse the user's info out of the token like this:

 protected AuthenticatedUser _user { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var authState = await AuthState;
        if (authState.User.Identity != null && authState.User.Identity.IsAuthenticated)
        {
            _user = AuthenticatedUser.FromIdentity((ClaimsIdentity)authState.User.Identity);
            if(_user == null)
            {
                _nav.NavigateTo("/auth/logout", true);
            }
        }
        else
        {
            //the authenticated page base requires user to be authenticated, if not, redirect to 
            _nav.NavigateTo("/auth/logout", true);
        }
    }

In the FromIdentity() function, I am simply reading the claim's value and assigning them to the AuthenticatedUser class so that all the inherited pages can have access to the authenticated user.

First of all, I do not know if this is the right way or right place to do this. Because every single page in the app pretty much inherits from this base page (including component too), so this OnIntializedAsync() is called every SINGLE time.

So my question is, how should I structure my app so that every page could easily have access to the authenticated user's information? Of course, I would prefer this is done only once, maybe when user first login and somehow stores it in memory?

I know I am definitely not doing this correctly (I got this implementation from a yt video). Hopefully someone can show me the correct way to do this.

Thanks!

You could follow this part of the document Create a Scoped Service to hold the authenticated user:

public class AuthenticationService
{
    public event Action<ClaimsPrincipal>? UserChanged;
    private ClaimsPrincipal? currentUser;

    public ClaimsPrincipal CurrentUser
    {
        get { return currentUser ?? new(); }
        set
        {
            currentUser = value;

            if (UserChanged is not null)
            {
                UserChanged(currentUser);
            }
        }
    }
}

Create a CustomAuthentication Provider depends on AuthenticationState and subscribe to
AuthenticationService.UserChanged event

public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
    private AuthenticationState authenticationState;

    public CustomAuthenticationStateProvider(AuthenticationService service)
    {
        authenticationState = new AuthenticationState(service.CurrentUser);

        service.UserChanged += (newUser) =>
        {
            NotifyAuthenticationStateChanged(
                Task.FromResult(new AuthenticationState(newUser)));
        };
    }

    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        Task.FromResult(authenticationState);
}

Regist it:

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

assign the claims you read from token:

AuthenticationService.CurrentUser = AuthenticatedUser.FromIdentity((ClaimsIdentity)authState.User.Identity);

Now as the doucment describes :

> AuthenticationStateProvider is the underlying service used by the
> AuthorizeView component and CascadingAuthenticationState component to
> obtain the authentication state for a user.

Add the codes to different razor componets ,You would find the authenticated user has been shared between pages:

<AuthorizeView>
    <Authorized>
        <p>Hello, @context.User.Identity.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>You're not authorized.</p>
    </NotAuthorized>
</AuthorizeView>