Blazor WASM hosted with IndividualB2C: Choose layout based on authentication state

[jaldinger]

I have tried to implement the solution explained in this issue and SteveSandersonMS answer:

Originally posted by @SteveSandersonMS in #26122 (comment)

But this solution seems to prevent the RedirectToLogin component from working, with the following error whenever accessing a page with the [Authorize] attribute set:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at Microsoft.AspNetCore.Components.WebAssembly.Authentication.AuthorizationMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
at Microsoft.Extensions.Http.Logging.LoggingScopeHttpMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
at System.Net.Http.HttpClient.SendAsyncCore(HttpRequestMessage request, HttpCompletionOption completionOption, Boolean async, Boolean emitTelemetryStartStop, CancellationToken cancellationToken)
at System.Net.Http.Json.HttpClientJsonExtensions.d__9`1[[BlazorPortal.Shared.WeatherForecast[], BlazorPortal.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at BlazorPortal.Client.Pages.FetchData.OnInitializedAsync() in C:\Users\JoergAldinger\source\repos\BlazorPortal\Client\Pages\FetchData.razor:line 48
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Is there anything that can be done to get the redirect to work with this scheme?

[jaldinger]

Additional info

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <CustomRouteView RouteData="@routeData" />
            @*<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>*@
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(LoginLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

LoginLayout.razor

@inherits LayoutComponentBase

<div class="card">
    <div class="card-body">
        <p><a href="authentication/login">Log in</a></p>
        @Body
    </div>
</div>

As for the exception: Only the fetchdata throws it. The counter page, even though I added the [Authorize] attribute to it, does not (probably because it doesn't need to communicate with the backend). Yet, even though not authenticated and showing the "blank" layout, the counter component still works, which it probably should not...

[mkArtakMSFT]

Thanks for contacting us.
it looks like in this particular case you'll need a custom AuthorizeRouteView implementation.
We recommend you post your detailed question to StackOverflow to get faster resolution.