Before trying this sample, please make sure that you have completed the Getting Started section.

Blazor applications can use the AuthorizeView component from the Microsoft.AspNetCore.Components.Authorization namespace. This component allows developers to show different content to anonymous users and to users who are logged in. Blazorade ID completely supports this component as shown in the sample below.

@using Microsoft.AspNetCore.Components.Authorization
@using Blazorade.Id.Services
@using Blazorade.Id.Model

@inject IAuthenticationService authService

<AuthorizeView>
    <Authorized Context="authState">
        <h2>Welcome @authState.User.Identity?.Name</h2>

        <button
            @onclick="async () => await this.authService.SignInAsync(new SignInOptions { Prompt = Prompt.Select_Account })">
            Change user
        </button>

        <button
            @onclick="async () => await this.authService.SignOutAsync()">
            Sign out
        </button>
    </Authorized>
    <NotAuthorized>
        <button @onclick="async () => await this.authService.SignInAsync()">Sign in</button>
    </NotAuthorized>
</AuthorizeView>

This is of course a very simple example, but that is intentional. It shows you how you can have users sign in, change the user account they have signed in with (without signing the other user account out), and signing out from the application and clear all token stores.

If Blazorade ID can resolve the end session endpoint to your Identity Provider, then the sample above will take the user to the end session endpoint, sign the user out at the IdP, and take you back to your application.

In the <Authorized> render fragment you can do whatever you need with the AuthenticationState available through the Context parameter. The AuthenticationState.User property returns a ClaimsPrincipal object that was created by the IAuthenticationService in Blazorade ID when the user signed in.