I created a Blazor WASM app for testing Okta authentication and API Authorization. I followed the instructions in this YouTube video. Since I am testing getting access token for an API authorization, I added an http request to an API server running on localhost to the Claims.Razor page. I added a custom message handler so that every request would include the Bearer token (access token) returned from my Okta authorization server. This is the code for the message handler (which works very well until the user’s session expires):
class AuthHeaderHandler : DelegatingHandler
{
private IAccessTokenProvider _accessTokenProvider;
public AuthHeaderHandler(IAccessTokenProvider accessTokenProvider)
{
this._accessTokenProvider = accessTokenProvider ?? throw new ArgumentNullException(nameof(accessTokenProvider));
}
protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
try
{
var token = await _accessTokenProvider.RequestAccessToken();
var t = token.TryGetToken(out AccessToken accessToken);
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", accessToken?.Value ?? string.Empty);
return await base.SendAsync(request, cancellationToken).ConfigureAwait(false);
}
catch(Exception ex)
{
throw;
}
}
}
This is the contents of the claims.razor page:
@page "/claims"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Configuration
@attribute [Authorize]
@inject HttpClient httpClient
@inject IConfiguration Configuration
<AuthorizeView >
<Authorized>
<h2>
Hello @context.User.Identity.Name,
here's a list of your claims:
</h2>
<ul>
@foreach (var claim in context.User.Claims)
{
<li>@claim.Type:<b>@claim.Value</b></li>
}
</ul>
<p>This component demonstrates fetching data from the server.</p>
@if (serverMessages == null)
{
<p><em>Loading...</em></p> }
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Text</th>
</tr>
</thead>
<tbody>
@foreach (var message in serverMessages.Messages)
{
<tr>
<td>@message.Date.ToShortDateString()</td>
<td>@message.Text</td>
</tr>
}
</tbody>
</table>}
</Authorized>
<NotAuthorized>
<p>Sorry you must login first.</p>
</NotAuthorized>
</AuthorizeView>
@code {
private ServerMessages serverMessages;
protected override async Task OnInitializedAsync()
{
try
{
serverMessages = await httpClient.GetFromJsonAsync<ServerMessages>(Configuration["ServerApi:MessagesEndpoint"]);
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
}
public class ServerMessage
{
public DateTime Date { get; set; }
public string Text { get; set; }
}
public class ServerMessages
{
public IList<ServerMessage> Messages { get; set; }
}
}
The problem is that this line in the custom message handler var token = await _accessTokenProvider.RequestAccessToken(); fails if the user’s session has expired which makes perfect sense. My question is how do I force a redirect to the login page when the session expires before calling the RequestAccessToken() method. I thought that wrapping the page markup in the tag would take care of the redirect but it doesn’t.
Also, I notice that the browser session storage holds the id_token even after its expiry. Is this correct?
Are there any docs or examples that show how to manage the session expiration in a Blazor WASM app, i.e. force a redirect to login when the session expires or at least notify the user?