How do I get the access token from a blazor (server-side) web app?

The following code snippets provide a way to retrieve the access token issued when a user is authenticated with IdentityServer4 provider. In order to get the
access token you can use the HttpContext object, but since Blazor is SignalR-based, you’ll have to do it the only time the HttpContext object is available, when the connection to your application is an HTTP connection, and not a WebSocket connection.

After retrieving the access token, you need to pass it to your Blazor app, and store it in a local storage. My code also provide a way to parse the access token, if necessary.

• Add a file to the Pages folder and name it _Host.cshtml.cs

• Add this code to the file:

   public class HostAuthenticationModel : PageModel
   {
       public async Task<IActionResult> OnGet()
       {
           if (User.Identity.IsAuthenticated)
           {
              var token = await HttpContext.GetTokenAsync("access_token");
              AccessToken = token;
  
           }
      return Page();
   }
  
   public string AccessToken { get; set; }
   }
  

Note: I’ve name the the PageModel class: HostAuthenticationModel
You’ll need some of these:

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.Linq;
using System.Threading.Tasks;


• Next we have to pass the value stored in the AccessToken property to the Blazor App:

In the _Host.cshtml file add the model directive at the top portion of the file:

@model HostAuthenticationModel

Add a new attribute to the component Tag Helper like this:

param-AccessToken="Model.AccessToken"

Final result:

 <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" 
                 param-AccessToken="Model.AccessToken"/>
 </app>

The param-AccessToken attribute requires you to define a property named AccessToken in the App component which will get the access token from the page model.

• Next define the property which will receive the access token

• And then override the OnAfterRenderAsync method from which we call a method to
  store the access token in the local storage.

  @code{
     [Parameter]
     public string AccessToken { get; set; }
  
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
          {
              await tokenStorage.SetTokenAsync(AccessToken);
          }
     }
   }
  

Also place the following at the top of the App component:

@inject AccessTokenStorage tokenStorage

• Next you’ll have to create the AccessTokenStorage service like this:

  Create a class named AccessTokenStorage at the root of your app, and add the
  following code:

  public class AccessTokenStorage
  {
  private readonly IJSRuntime _jsRuntime;

  public AccessTokenStorage(IJSRuntime jsRuntime)
  {
      _jsRuntime = jsRuntime;
  }
  
  public async Task<string> GetTokenAsync()
      => await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "accessToken");
  
  public async Task SetTokenAsync(string token)
  {
      if (token == null)
      {
          await _jsRuntime.InvokeAsync<object>("localStorage.removeItem", 
                                                          "accessToken");
      }
      else
      {
          await _jsRuntime.InvokeAsync<object>("localStorage.setItem", 
                                                 "accessToken", token);
      }
  
  
   }
  }
  

I guess no explanation is needed here… Here’s some using directives you may need

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Security.Claims;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.JSInterop;


Add the following to the Startup.ConfigureServices


services.AddHttpClient();
services.AddScoped<AccessTokenStorage>();


Note: the above code should be used with the code I provide in my answer here