Getting the current user in a blazor component

Question

I am trying to grab the user that is logged in the Blazor app on .NET Core 5.0 by doing just the cmd @context.User.Identity.Name, but when I run the program it just shows "Welcome, "

So I then saw a potential work around for this which is to Inject a AuthenticationStateProvider property, call GetAuthenticationStateAsync and get User from it.

Attempting to do so:

Index.razor:

@page "/"
@inject AuthenticationStateProvider GetAuthenticationStateAsync

<AuthorizeView>
    <Authorized>
        <h3>Welcome, <b>@name</b></h3>
    </Authorized>
    <NotAuthorized>
        <h3>You are signed out!!</h3>
    </NotAuthorized>
</AuthorizeView>

@code{

    protected override async Task OnInitializedAsync()
    {
        var authstate = await GetAuthenticationStateAsync.GetAuthenticationStateAsync();
        var user = authstate.User;
        var name = user.Identity.Name;
    }
}

The issue is, whenever I do @name in the <h3> it says the name 'name' does not exist in the current context. I even tried moving the @code {} before the <AuthorizeView> but it still says the same thing. Is there a reason why I cannot call the @name?

FOLLOW UP

I attempted to do the following inside of my Index.razor and doing it this way did not work, still displayed as in the screenshot. Any help would be greatly appreciated!

@page "/"
@inject AuthenticationStateProvider GetAuthenticationStateAsync

<AuthorizeView>
    <Authorized>
        <h3>Welcome, <b>@GetAuthenticationStateAsync.GetAuthenticationStateAsync().Result.User.Identity.Name</b></h3>
    </Authorized>
    <NotAuthorized>
        <h3>You are signed out!!</h3>
    </NotAuthorized>
</AuthorizeView>

DEBUG ATTEMPT

SECOND ATTEMPT, I still get the same result as in the screenshot when doing this when I attempt to use Rene's suggestion

@page "/"
@inject AuthenticationStateProvider GetAuthenticationStateAsync

<AuthorizeView>
    <Authorized>
        <h3>Welcome, <b>@Name</b></h3>
    </Authorized>
    <NotAuthorized>
        <h3>You are signed out!!</h3>
    </NotAuthorized>
</AuthorizeView>

@code{

    private string Name;

    protected override async Task OnInitializedAsync()
    {
        var authstate = await GetAuthenticationStateAsync.GetAuthenticationStateAsync();
        var user = authstate.User;
        var name = user.Identity.Name;
        Name = name;
    }
}

Answer 1

Your name variable is declared within the scope of the method. Just declare a Name property above the method override just as you would in a class. Then you can Set its value in the method and read it in razor.

Answer 2

It looks like your issue might be that there is no data stored in "@GetAuthenticationStateAsync.GetAuthenticationStateAsync().Result.User.Identity.Name". Try running in debug with a breakpoint at that location and see if there's any value stored in Name.

Answer 3

Edit: UserManager<TUser> isn't supported in Razor Components. https://docs.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-5.0

---

In order to identify and manipulate the currently authenticated user, I am using UserManager (Microsoft.AspNetCore.Identity.UserManager) to get the authenticated user assigned to my ApplicationUser object (my Blazor Server App uses ASP.NET Core Identity), which I can then manipulate further along with my other entities.

1st, I inject UserManager:

2nd, I expose the authentication state as a cascading parameter, and declare a ClaimsPrincipal (which describes the current user).

3rd, In my OnInitializedAsync() Method, I get the ClaimsPrincipal from my authentication state, and use UserManager's GetUserAsync() to get the ApplicationUser object returned (I also redirect to Login if the user is not Authenticated):