I created a new Blazor WASM app targeting .NET 8 -- 8.0.8 to be more specific. The app uses Azure AD B2C for user management and I want to use a different layout for pages designed for public/unauthenticated users.
I was able to get the template that comes out of the box working fine but obviously that template uses a single layout.
I tried using the solution suggested by Steve Sanderson here but when I implemented that clicking the "Login" link no longer works. It doesn't open the popup with user sign-in/sign up page hosted by Azure AD B2C. It also throws the following error:
Here are the changes I've made:
First, I created a very simple PublicLayout.razor that looks like this:
@inherits LayoutComponentBase<div style="height: 100%;"><main><div class="top-row px-4 auth"><LoginDisplay /></div><article class="content px-4"><div style="position: absolute; top: 50%; left: 50%;"><div style="text-align: center;"><img src="images/logo.png" alt="My App" width="350" /><p style="font-size: 36px; font-weight: bold; color: #d7d7d7;"> Hello stranger!</p></div></div></article></main></div>I then updated App.razor to the following as suggested by Sanderson in response to the GitHub question:
<CascadingAuthenticationState><AuthorizeView><Authorized> @RouterWithLayout(typeof(MainLayout))</Authorized><NotAuthorized> @RouterWithLayout(typeof(PublicLayout))</NotAuthorized></AuthorizeView></CascadingAuthenticationState>@code { RenderFragment RouterWithLayout(Type layoutType) => __builder => {<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><AuthorizeRouteView RouteData="@routeData" DefaultLayout="@layoutType" /><FocusOnNavigate RouteData="@routeData" Selector="h1" /></Found><NotFound><PageTitle>Not found</PageTitle><LayoutView Layout="@layoutType"><p>Sorry, there's nothing at this address.</p></LayoutView></NotFound></Router> };}Any suggestions on how I can use a different layout for the public/unauthenticated pages of my Blazor WASM app?