how to change Blazor WASM identity net core 3.1 messages "You are logged out", "checking login state" and "authorizing"? - asp.net-core

Question

I need to know how to personalize and/or change language for this messages, I suppose it has to do with IdentityServer4.
Any ideas?

Answer 1

What you are looking for is the RemoteAuthenticatorView .
You can find more details for your answer in the official documentation.
#page "/security/{action}"
#using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="#Action">
#*authentication/login*
<LoggingIn></LoggingIn>
#*authentication/login-callback*
<CompletingLoggingIn></CompletingLoggingIn>
#*authentication/login-failed*
<LogInFailed></LogInFailed>
#*authentication/logout*
<LogOut></LogOut>
#*authentication/logout-callback*
<CompletingLogOut></CompletingLogOut>
#*authentication/logout-failed*
<LogOutFailed></LogOutFailed>
#*authentication/logged-out*
<LogOutSucceeded></LogOutSucceeded>
#*authentication/profile*
<UserProfile></UserProfile>
#*authentication/register*
<Registering></Registering>
</RemoteAuthenticatorView>
#code{
[Parameter]
public string Action { get; set; }
}

Answer 2

It is necessary to add some tags in Authentication.razor component:
#page "/authentication/{action}"
#using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="#Action">
<LogInFailed>
<div class="alert alert-danger" role="alert">#strLogInFailed</div>
</LogInFailed>
<LogOut>
<div class="alert alert-info" role="alert">#strLogOut</div>
</LogOut>
<LogOutSucceeded>
<div class="alert alert-success" role="alert">#strLogOutSucceeded</div>
</LogOutSucceeded>
<LoggingIn>
<div class="alert alert-info" role="alert">#strLoggingIn</div>
</LoggingIn>
<CompletingLoggingIn>
<div class="alert alert-success" role="alert">#strCompletingLoggingIn</div>
</CompletingLoggingIn>
</RemoteAuthenticatorView>
#code {
[Parameter] public string Action { get; set; }
string strLogInFailed = "Your login was not successful.";
string strLogOut = "Trying to close your session.";
string strLogOutSucceeded = "Your session has been closed successfully.";
string strLoggingIn = "Redirecting to the login screen.";
string strCompletingLoggingIn = "Your login was successful.";
}
I found how to do it in: Custom Authentication User Interface which, by the way, explains a lot on
How to Secure Blazor WebAssembly with IdentityServer4
After read it, I also check the RemoteAuthenticatorView Class
Even accomplished this, still persist the "Authorizing..." message.

Answer 3

To change the message "Authorizing..."
Need to add
<Authorizing>
<h1>Authorization in progress</h1>
<p>Only visible while authorization is in progress.</p>
</Authorizing>
to file App.razor
<CascadingAuthenticationState>
<Router AppAssembly="#typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="#routeData"
DefaultLayout="#typeof(MainLayout)">
<NotAuthorized>
<h1>Sorry</h1>
<p>You're not authorized to reach this page.</p>
<p>You may need to log in as a different user.</p>
</NotAuthorized>
<Authorizing>
<h1>Authorization in progress</h1>
<p>Only visible while authorization is in progress.</p>
</Authorizing>
</AuthorizeRouteView>
</Found>
<NotFound>
<LayoutView Layout="#typeof(MainLayout)">
<h1>Sorry</h1>
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
You can find more details official documentation.

Answer 4

You can use the <Authorizing> tag to override the default text.
<AuthorizeView>
<Authorizing>
<p class="authorizing">Authorizing...</p>
</Authorizing>
<Authorized>
<p class="authorized">Welcome, #context.User.Identity.Name!</p>
</Authorized>
<NotAuthorized>
<p class="not-authorized">You're not authorized, #(context.User.Identity.Name ?? "anonymous")</p>
</NotAuthorized>
</AuthorizeView>
Source:
https://github.com/dotnet/aspnetcore/blob/1ed72f8f5f14dfc5a4ebc9d5d116d63792caa7fc/src/Components/test/testassets/BasicTestApp/AuthTest/AuthorizeViewCases.razor