Can't get Azure AD B2C to work with BlazorBootstrap

[imsam67]

I'm having trouble implementing Azure AD B2C in my Blazor WASM Standalone app (targeting .NET 9) if I also use Blazor Bootstrap in the project.

I start with a brand new Blazor WASM project following this document here.

Issuing the dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --client-id "{CLIENT ID}" --domain "{TENANT DOMAIN}" -o {PROJECT NAME} -ssp "{SIGN UP OR SIGN IN POLICY}" command creates a fresh new Blazor WASM Standalone project.

At this point, everything works perfectly fine, including user authentication.

I then add BlazorBootstrap to the project following this document here.

I then update my MainLayout to the following:

@inherits LayoutComponentBase

<Microsoft.AspNetCore.Components.Authorization.AuthorizeView>
    <Authorized>
        <BlazorBootstrapLayout StickyHeader="true">

            <HeaderSection>
                <div class="d-flex justify-content-start">
                    <Icon Name="IconName.List" role="button" @onclick="ToggleSidebar" />
                    <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
                </div>
                <div>
                    <LoginDisplay />
                </div>
                <ThemeSwitcher Class="ps-3 ps-lg-2" Position="DropdownMenuPosition.End" />
            </HeaderSection>

            <SidebarSection>
                <Sidebar @ref="sidebar"
                         Href="/"
                         ImageSrc="images/logo/logo_small.png"
                         Title="My App"
                         DataProvider="SidebarDataProvider" />
            </SidebarSection>

            <ContentSection>
                @Body
            </ContentSection>

            <FooterSection>
                Footer links...
            </FooterSection>

        </BlazorBootstrapLayout>
    </Authorized>
    <NotAuthorized>
        <BlazorBootstrapLayout StickyHeader="true">
            <HeaderSection>
                <div>
                    <LoginDisplay />
                </div>
            </HeaderSection>
            <ContentSection>
                <div class="alert alert-danger" role="alert">
                    You are not logged in.
                </div>
            </ContentSection>
        </BlazorBootstrapLayout>
    </NotAuthorized>
</Microsoft.AspNetCore.Components.Authorization.AuthorizeView>

@code {

    Sidebar sidebar = default!;
    IEnumerable<NavItem>? navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/", IconName = IconName.ColumnsGap, Text = "Dashboard"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToggleSidebar() => sidebar.ToggleSidebar();
}

This is pretty much what's in the starter template. The only very minor changes I made are changing the text from "Home" to "Dashboard" along with its icon. That's it!

I also do NOT change any of the files that come with Azure AD B2C setup e.g. RedirectLogin.razor, Authentication.razor, etc.

At this point, trying to login stops working. When I click the "Log In", I see that the URL in the browser change to authentication/login as it should but nothing happens at all.

Normally, a login popup should open which it does prior to adding BlazorBootstrap to my project. Once I add it and change MainLayout.razor to the code above, clicking "Log In" does not work anymore.

Any idea why this may be happening or any suggestions?

[imsam67]

Fixed the issue by adding missing @Body in <NotAuthorized> section. See full answer and GitHub repo for code at https://stackoverflow.com/questions/79458237/azure-ad-b2c-login-redirect-not-working-in-blazor-wasm-standalone