Redirect to login in Blazor Server Azure B2C Authentication

Question

Trying to redirect the unauthenticated users to login page instead of showing a blank Index page.

I tried to modify app.razor to redirect as below:

 <NotAuthorized>
                @if (!context.User.Identity.IsAuthenticated)
                {
                    <RedirectToLogin />
                }
                else
                {
                    <p>
                        You are not authorized to access 
                        this resource.
                    </p>
                }
            </NotAuthorized>

That didn't work. Breakpoint on " @if (!context.User.Identity.IsAuthenticated)" never gets hit.

I also tried to add @code section to MainLayout.razor as below:

  [CascadingParameter] protected Task<AuthenticationState> AuthStat { get; set; }

    protected async override Task OnInitializedAsync()
    {
        base.OnInitialized();
        var user = (await AuthStat).User;
        if (!user.Identity.IsAuthenticated)
        {
            navMan.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(navMan.Uri)}");
        }
    }

THat goes in some kind of redirect loop i assume because I get a error saying

"Request filtering is configured on the Web server to deny the request because the query string is too long."

and Requested URL:

 https://localhost:44385/authentication/login?returnUrl=https%3A%2F%2Flocalhost%3A44385%2Fauthentication%2Flogin%3FreturnUrl%3Dhttps%253A%252F%252Flocalhost%253A44385%252Fauthentication%252Flogin%253FreturnUrl%253Dhttps%25253A%25252F%25252Flocalhost%25253A44385%25252Fauthentication%25252Flogin%25253FreturnUrl%25253Dhttps%2525253A%2525252F%2525252Flocalhost%2525253A44385%2525252Fauthentication%2525252Flogin%2525253FreturnUrl%2525253Dhttps%252525253A%252525252F%252525252Flocalhost%252525253A44385%252525252Fauthentication%252525252Flogin%252525253FreturnUrl%252525253Dhttps%25252525253A%25252525252F%25252525252Flocalhost%25252525253A44385%25252525252Fauthentication%25252525252Flogin%25252525253FreturnUrl%25252525253Dhttps%2525252525253A%2525252525252F%2525252525252Flocalhost%2525252525253A44385%2525252525252Fauthentication%2525252525252Flogin%2525252525253FreturnUrl%2525252525253Dhttps%252525252525253A%252525252525252F%252525252525252Flocalhost%252525252525253A44385%252525252525252Fauthentication%252525252525252Flogin%252525252525253FreturnUrl%252525252525253Dhttps%25252525252525253A%25252525252525252F%25252525252525252Flocalhost%25252525252525253A44385%25252525252525252Fauthentication%25252525252525252Flogin%25252525252525253FreturnUrl%25252525252525253Dhttps%2525252525252525253A%2525252525252525252F%2525252525252525252Flocalhost%2525252525252525253A44385%2525252525252525252Fauthentication%2525252525252525252Flogin%2525252525252525253FreturnUrl%2525252525252525253Dhttps%252525252525252525253A%252525252525252525252F%252525252525252525252Flocalhost%252525252525252525253A44385%252525252525252525252Fauthentication%252525252525252525252Flogin%252525252525252525253FreturnUrl%252525252525252525253Dhttps%25252525252525252525253A%25252525252525252525252F%25252525252525252525252Flocalhost%25252525252525252525253A44385%25252525252525252525252Fauthentication%25252525252525252525252Flogin%25252525252525252525253FreturnUrl%25252525252525252525253Dhttps%2525252525252525252525253A%2525252525252525252525252F%2525252525252525252525252Flocalhost%2525252525252525252525253A44385%2525252525252525252525252F

Please can someone suggest how a user can be redirected to the login page if not authenticated in Blazor Server side project with Azure B2C Authentication?

Answer 1

You can force the user to login with the below changes

Approach 1:

_Host.Cshtml Add the below code

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h4>Not authorized.</h4>
                </NotAuthorized>
                <Authorizing>
                    <h4>Authentication in progress...</h4>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

MainLayout.razor

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <AuthorizeView>
        <NotAuthorized></NotAuthorized>            
        <Authorized>
            <div class="top-row px-4 auth">
                <LoginDisplay />
                <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
            </div>
            <div class="content px-4">
                @Body
            </div>
        </Authorized>
    </AuthorizeView>
</div>

Approach 2:

Another way For redirecting the user to login page Please make the below changes

_Host.Cshtml

<environment include="Staging,Production">            
            <component render-mode="ServerPrerendered" type="typeof(App)" />
        </environment>
        <environment include="Development">
            <component render-mode="Server" type="typeof(App)" />
        </environment>

Create RedirectToLogin.razor

@inject NavigationManager Navigation


@code {  

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        Navigation.NavigateTo("/AzureADB2C/Account/SignIn");
        return base.OnAfterRenderAsync(firstRender);
    }
}

MainLayout.razor

<div class="main">
    <div class="top-row px-4 auth">
        <LoginDisplay />
        <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        <AuthorizeView>
            <Authorized>
                @Body
            </Authorized>
            <NotAuthorized>
                <Blazor_B2C.Pages.RedirectToLogin></Blazor_B2C.Pages.RedirectToLogin>
            </NotAuthorized>
        </AuthorizeView>
    </div>
</div>