CODEWITHSUNDEEP
.net-coreblazorprogressive-web-apps
zir
zir

Reputation: 139

How do I change the "Authorising..." message that appears when a Blazor PWA application is being refreshed?

When an asp net hosted BLAZOR Progressive Web Application is refreshed using browser refresh, PWA application performs an authentication roundtrip. During this time span, main content div displays the text: "Authorising...". Where does this message originate from? My objective is to display a spinner-border along with this message so that the user experience an animation. Here is what I know:

But I'm unable to locate the source of default "Authorising..." message.

Upvotes: 9

Views: 3526

Answers (1)

Just the benno
Just the benno

Reputation: 2601

There are two places that need your intention.

First is in your App.razor. The AuthorizeRouteView has a property called Authorizing, where you can add any RenderFragement you want to display during authorizing. Here is the line where the Authorizing... is set.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <span>Your spinner goes here</span>
                </Authorizing>
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

If you have created the app using the default template, you should see an AuthenticationPage. This page has the route @page "/authentication/{action}".

This page content looks like

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter] public string Action { get; set; }
}

You can change the entire template by adding the corresponding RenderFragments which can be found here

Here is an example where every fragment has a non-default value

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action">
    <LoggingIn>
        <span>LoggingIn</span>
    </LoggingIn>
    <Registering>
        <span>Registering</span>
    </Registering>
    <Registering>
        <span>LoggingIn</span>
    </Registering>
    <UserProfile>
        <span>UserProfile is loaded....</span>
    </UserProfile>
    <CompletingLoggingIn>
        <span>CompletingLoggingIn</span>
    </CompletingLoggingIn>
    <LogInFailed>
        <span>Login failed. Reason: @context</span>
    </LogInFailed>
    <LogOut>
        <span>Logout from the application</span>
    </LogOut>
    <LogOut>
        <span>CompletingLogOut</span>
    </LogOut>
    <LogOutFailed>
        <span>Logout failed. Reason: @context</span>
    </LogOutFailed>
    <LogOut>
        <span>LogOutSucceeded</span>
    </LogOut>
</RemoteAuthenticatorView>

@code{
    [Parameter] public string Action { get; set; }
}

Upvotes: 22

Related Questions