changing authorization layoutt in Blazor WASM

Question

I have a Blazor WASM app. it authorizes using Auth0 Azure mixed with a local db.

how can I change the app.razor authorizing portion to use a different layout to the rest of the router?

    <CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                  <p> authorizing...</p> @*THIS PART*@
                </Authorizing> 
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>
              

I don't want to be able to see the main layout while it is authorizing and to use a similar layout to the index.html which is just a stylized logo with a loading wheel

at the moment it has the authorizing text in the @body of the main layout

Answer 1

Inside your Shared folder Create a new layout lets say LoginLayout and change your App.razor to reference the new layout as follows:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(LoginLayout)">
                <Authorizing>
                  <p> authorizing...</p>
                </Authorizing> 
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(LoginLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

The Loging layout should include this line: @inherits LayoutComponentBase

Then inside your LoginLayout you could have a reference to the login component i.e. <LoginComponent /> as follows:

@inherits LayoutComponentBase
@inject NavigationManager _navigationManager

<SpinnerComponent></SpinnerComponent>
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="/login" class="navbar-brand padding-0">
                    <img src="images/logo.svg" alt="company logo" id="leftMenuLogo">
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <LoginComponent />
        </ul>
    </nav>
    <div class="content-wrapper">
        <div class="container-fluid d-flex flex-column container-fluid-max" style="">
            @Body
        </div>
    </div>
    <FooterComponent />
</div>

(Optional) Inside your <LoginComponent /> you could add a page directive if you want users to be redierected to it easily via navigation manager i.e. _navigationManager.NavigateTo("/login");

Finally when the user completes authentication you redirect them to index i.e. _navigationManager.NavigateTo("/");.

Inside the index page you should add a @page "/" and a @layout MainLayout. If you want more code please let me know exactly what you want and I will post.