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

Viewed 3382

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

Any ideas?

4 Answers

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

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.

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.

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

Related