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; }
}