Blazor Webassembly Authenticated Event

Question

When authenticating users with Microsoft.AspNetCore.Components.WebAssembly.Authentication, in a Blazor Webassembly application on the client side app that is hosted on ASP.NET Core (latest, blazor), when/how to call an action every time a user is authenticated? Even if they come back to the app and have an active session.

Update 2020-07-15: The problem I am trying to overcome is that we have a service that goes to Graph API once a user logs in (MSAL) to get their info and profile image. After they log in, I use the RemoteAuthenticatorView.OnLogInSucceeded event to know when they actually logged in. Trouble is, if they then refresh the page (F5), the service loses the Graph info. I guess what I'm actually trying to achieve is to persist session data.

Answer 1

To overcome this, I so far settled with the workaround to use the Authorized section in razor of the LoginDisplay component, to trigger the service to check if the service user info is empty and then go to Graph again instead of trying to store in in localstorage or something like that... Then, I have user info displaying components subscribe to an event in the service to know when the user info needed updated to call StateHasChanged().

If there is a better solution to persisting service data across page refreshes, I am all eyes.

Answer 2

I'm totally sure what you mean by "every time they are authenticated".

If you want to take an action on EVERY event (like a page load) then you could do it by embedding an AuthorizedView in your page:

<AuthorizeView>
    <Authorized>
        ... do action for authorized users ...
    </Authorized>
    <NotAuthorized>
        ... do action for un-authorized users ...
    </NotAuthorized>
</AuthorizeView>

If you want to trigger an action whenever the Authentication action is taken you can do it in OnParametersSet and looking at the Action to see what type of authentication event it is.

also see: https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-3.1#customize-the-authentication-user-interface

It may be better to create custom RenderFragments for the specific Actions - it will depend on what you want to do I guess.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@using System.Text.Json
@using System.Security.Claims

<RemoteAuthenticatorView Action="@Action" />

@inject ILogger<Authentication> logger

@code{
    [Parameter]
    public string Action { get; set; }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        logger.LogInformation($"Action: {Action}");

        //
        // DO YOUR ACTION HERE
        //
    }
}

Answer 3

One way to solve this is to make a component that wraps your application, and check if the user is authenticated in the OnInitialized(). That, combined with subscribing to AuthenticationStateProvider.AuthenticationStateChanged worked for me. I posted a more detailed solution here.