There are several posts online about Blazor Web Assembly (also known as Blazor WASM) apps displaying the message “Completing login…” when a user logs in. There appear to be many different possible causes of this bug, but I didn’t find anything online which described the problem I had, so I thought I’d write up my own experiences.

Bug description

When a user logged into the application I was working on, they were not redirected to the home page, as you would expect. Instead they were shown the message “Completing login…”. The basic structure of the page was displayed (e.g. a navigation menu down the side, a header at the top) but the only actual content was “Completing login…”.

The user was logged in, and they could use the app normally by using the navigation menu to access any page they had access to, but it was an odd experience for the user.

Error messages

The message which was obviously visible on screen was “Completing login…”, but a different message was briefly shown before that one. It disappeared too fast to read, but I recorded the screen (using ShareX) and went through the recording slowly, which revealed the following message:

There was an error trying to log you in: 'interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors.'

This was my first clue to the root cause of this behaviour. It seems that there were somehow 2 attempts to login, or perform related actions, happening at the same time.

Around the same time, I realised that an exception was being thrown, but swallowed by some error handling code. The error handler was losing some of the context, but the original exception was:

Microsoft.AspNetCore.Components.WebAssembly.Authentication.AccessTokenNotAvailableException: 'api://<clientId>/API.Access' at Microsoft.AspNetCore.Components.WebAssembly.Authentication.AuthorizationMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)

Putting this together with the previous message led me to a working theory, which in turn led me to the solution.

Explanation

When the user first navigated to the app they were not logged in, so they were redirected to the login process. An API request was made before this happened, which was not authenticated. This is why the exception was thrown, as the access token hadn’t been retrieved from the authentication process yet. Upon receiving this response, the client initiated the login process a second time, which explains the interaction_in_progress error.

Now that I had a fairly good idea that something along these lines was happening, I could look for possible culprits. I started with the AccessTokenNotAvailableException, checked what API request was taking place at the time, and what code had triggered it.

I found that the navigation menu was loading a feature switch from an API in order to check which menu items should be displayed. The navigation menu itself was being rendered before authentication had occurred, which is why this API request was triggered before the user had authenticated themselves.

Solution

Once I found this, the solution was simple - I changed the layout so that the navigation menu was only displayed when the user was authenticated. It was as simple as this:

Before

<NavMenu />

After

<AuthorizeView>
    <Authorized>
        <NavMenu />
    </Authorized>
</AuthorizeView>

After that, the login & redirect process worked fine.

Conclusion

It took a long time to work out what the problem was, but once I discovered the root cause then it was easy to fix, and easy to be confident that the fix explained the bug.