Blazorise LayoutSider not visible to anonymous users

Question

I'm building a new .NET 6.0 application using Blazor Web Server and Blazorise 0.9.5.2.

As presently configured, the sider layout is only visible to logged-in users. Anonymous users see the entire layout except the sider. Comparing the HTTP content in both conditions shows that the only differences between anonymous and logged-in users are the presence or absence of the two nav bar links that depend on authorization, as well as the out-of-the-box display of "Welcome, user" vs. "Login" in the upper right corner. Chrome shows no failures to download CSS or JS in either case.

The MainLayout.razor looks like this:

<Layout Sider="true">
        <LayoutSider>
            <LayoutSiderContent>
                <Bar Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="ThemeContrast.Dark"
                      Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Small">
                    <BarToggler />
                    <BarBrand>
                        <BarItem>
                            <BarLink To="">
                                <BarIcon IconName="_customIcon" />
                                My SIte
                            </BarLink>
                        </BarItem>
                    </BarBrand>
                    <NavMenu />
                </Bar>
            </LayoutSiderContent>
        </LayoutSider>

        <Layout>
            <LayoutHeader Fixed="true">
                <Bar @bind-Visible="@_topbarVisible" Breakpoint="Breakpoint.Desktop" Background="Background.Primary" ThemeContrast="ThemeContrast.Light">
                    <BarBrand>
                        <BarItem>
                            <BarLink To="">
                                <BarIcon IconName="FontAwesomeIcons.CloudSun" />
                                My Site
                            </BarLink>
                        </BarItem>
                    </BarBrand>
                    @* ReSharper disable once UnknownCssClass *@
                    <BarMenu Class="justify-content-end">
                        <BarEnd>
                            <AuthorizeView>
                                <Authorized>
                                    <BarItem>
                                        <Blazorise.Icon Name="FontAwesomeIcons.User" Visibility="Visibility.Visible" />
                                        Hi, @context?.User?.Identity?.Name
                                    </BarItem>
                                </Authorized>
                            </AuthorizeView>
                            <BarItem>
                                <LoginDisplay />
                            </BarItem>
                        </BarEnd>
                    </BarMenu>
                </Bar>
            </LayoutHeader>

            <LayoutContent Padding="Padding.Is4.OnX">
                @Body
            </LayoutContent>

            <LayoutFooter Fixed="true" Padding="Padding.Is4.OnX">
                Copyright &copy;@DateTimeOffset.UtcNow.Year Inner Drive Technology.
            </LayoutFooter>
        </Layout>

    </Layout>

The NavMenu.razor component looks like this:

@using Blazorise.Icons.FontAwesome
<BarMenu>
    <BarStart>
        <BarItem>
            <BarLink To="">
                <BarIcon IconName="FontAwesomeIcons.Home" />
                Home
            </BarLink>
        </BarItem>
        <BarItem>
            <BarLink To="/Current">
                <BarIcon IconName="FontAwesomeIcons.CloudSun" />
                Current
            </BarLink>
        </BarItem>
        <AuthorizeView>
            <Authorized>
                <BarItem>
                    <BarLink To="/ApiStatus">
                        <BarIcon IconName="FontAwesomeIcons.Server" />
                        API Status
                    </BarLink>
                </BarItem>
                <BarItem>
                    <BarLink To="/BuildStatus">
                        <BarIcon IconName="FontAwesomeIcons.Rocket" />
                        Build Status
                    </BarLink>
                </BarItem>
            </Authorized>
        </AuthorizeView>
        <BarItem>
            <BarLink To="/About">
                <BarIcon IconName="FontAwesomeIcons.InfoCircle" />
                About
            </BarLink>
        </BarItem>
    </BarStart>
</BarMenu>

Program.cs contains this section:

builder.Services.AddRazorPages(options =>
{
    options.Conventions.AllowAnonymousToFolder("/");
    options.Conventions.AllowAnonymousToPage("/Index");
    options.Conventions.AllowAnonymousToFolder("/_content");
    options.Conventions.AllowAnonymousToFolder("/Pages");
    options.Conventions.AllowAnonymousToFolder("/Shared");
});

The problem seems to be the presence of the Mode="BarMode.VerticalInline" attribute. (I'll spare you the A/B testing that led to this conclusion.) When the Mode attribute is present, the entire sider is hidden for anonymous users. When it's absent, the entire sider is visible.

Anyone know what's up with this?

Answer 1

Well, this was fun. And all that CORS stuff was a red herring.

The issue: the default AddAuthorization service provider options blocked a request somewhere, so removing it allowed all the page components to load, even while keeping the authentication-required bits hidden.

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to the default policy
    //options.FallbackPolicy = options.DefaultPolicy; // Removed this line
});

Removing the fallback policy fixed this issue.