I am using Blazor WebAssembly for my application. After user authentication, I need to make a database call to fetch some custom properties of the user (GetUserProfile). I want to expose this UserProfile to the entire app using a cascading parameter to avoid making additional database calls in child components whenever the UserProfile is needed.

The problem I’m encountering is that the @Body is already rendered before the UserProfile fetch is completed, resulting in a null UserProfile exception. Since the UserProfile is fetched asynchronously, it isn’t available immediately upon authentication. Adding a delay before accessing UserProfile in child components temporarily resolves the issue, but this approach is unsustainable and unreliable.

Is there a more robust way to solve this problem and ensure that UserProfile is available throughout the app without encountering null reference exceptions?

Here are my code snippets

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <CascadingValue Value="@UserProfile" Name="UserProfile">
                @* <AuthorizeView></AuthorizeView> *@
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">

                    <Authorizing>
                        @* <LoadUserProfile /> *@
                    </Authorizing>
                    <NotAuthorized>
                        @if (context.User.Identity?.IsAuthenticated != true)
                        {
                            <RedirectToLogin />
                        }
                        else
                        {
                            <p role="alert">You are not authorized to access this resource.</p>
                        }
                    </NotAuthorized>
                </AuthorizeRouteView>
                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
            </CascadingValue>
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <div>
                    <p role="alert">Sorry, there's nothing at this address.</p>
                </div>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

MainLayout.razor

@* @if (UserProfile != null) { *@

@Body

@* }
else
{
    <LoadUserProfile />
} *@

<Spinner />

MainLayout.razor.cs

[Inject] IUserProfileService UserProfileService { get; set; } = null!;
protected UserProfileDto UserProfile { get; set; } = null!;

protected async override Task OnInitializedAsync()
{
    AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
    NavigationManager.LocationChanged += LocationChanged;
    await Configure(AuthState);
}

protected override bool ShouldRender()
{
    Console.WriteLine("main layout should render");
    //return UserProfile != null;
    return true;
}

private async void OnAuthenticationStateChanged(Task<AuthenticationState> task)
{
    await LoadUserProfile(task);
}


private async Task LoadUserProfile(Task<AuthenticationState> authStateTask)
{
    if (authStateTask is null) return;

    var user = (await authStateTask).User;
    if (user.Identity?.IsAuthenticated ?? false)
    {
        UserProfile = await UserProfileService.GetUserProfile(); 
        Data = BuildMenu(UserProfile);
        StateHasChanged();
    }
}

I even tried with Authentication.razor.cs

[CascadingParameter] protected UserProfileDto UserProfile { get; set; } = null!;

private async Task OnLoginSucceeded()
{
    Console.WriteLine("Login succeeded");
    UserProfile = await UserProfileService.GetUserProfile();
    //NavManager.NavigateTo("mainlayout");
}