When you first start to develop Blazor sever-side web applications and for this topic, integrate identity into the application with Azure AD, one of the first things I immediately change in the template is the login display on the top header bar. You’ll notice that most .Net web applications always display the HttpContext User.Identity.Name, essentially a property of the IPrincipal object for the current signed in user. The implementation in Blazor server-side apps is found in the Shared\LoginDisplay.razor component in the project.

The LoginDisplay component is referenced in the MainLayout.razor component.

The easiest way to change the behavior and ideally display the users full name, is to display the “name” claim in the LoginDisplay.razor component from the users claims that are represented from the id_token, which effectively forms the basis for the users session in terms of the security context. This of course excludes any roles, unless you have injected any other role claims from Azure AD or as part of the OIDC flow. Alternatively, the whole user context can be derived within the application itself as required from a variety of sources e.g. roles or the applications internal storage mechanisms.

Updating the Login Display Component

One of the simplest ways to update the display name is to update the LoginDisplay.razor component directly. Information in the security context, within an authorised view, is readily accessible. I make a simple change to pull out the “name” claim from the identity by injecting the AuthenticationStateProvider in the code sample below, then reference the value in @UserName.

@inject AuthenticationStateProvider AuthNStateProvider

<AuthorizeView>
    <Authorized>
        @UserName
        <a href="AzureAD/Account/SignOut">Log out</a>
    </Authorized>
    <NotAuthorized>
        <a href="AzureAD/Account/SignIn">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {

    public string UserName { get; set; }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var authState = await AuthNStateProvider.GetAuthenticationStateAsync();
            var user = authState.User;

            if (authState.User.Identity != null)
            {
                UserName = authState.User.Claims.First(c => c.Type == "name").Value;
            }
        }
        catch
        {
            UserName = "Exception:User display name not set!";
        }
    }
}

Then the signed in users display name is then added to the header.

In my next post I will show how this simple implementation can be expanded to include other pieces of information from the users Azure AD profile.