Interop error when accessing sessionStorageService on Blazor APP

Question

I'm building a Blazor App, this app use JWT for token generation and refresh token and both tokens needs to be stored in SessionStorageService after login:

Login.razor code

@page "/Account/Login"
@page "/"
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject ISessionStorageService SessionStorage
@inject IHttpClientFactory HttpClientFactory

@using System.ComponentModel.DataAnnotations
@using Blazored.SessionStorage
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Identity
@using Portal.Phantom.BrickellPay.Application.Service
@using Portal.Phantom.BrickellPay.Domain.DataAccess
@using Microsoft.JSInterop
@using static Portal.Phantom.BrickellPay.Infrastructure.Service.TokenService

@inject SignInManager<ApplicationUser> SignInManager
@inject ILogger<Login> Logger
@inject NavigationManager NavigationManager
@inject IdentityRedirectManager RedirectManager
@inject IJSRuntime JS

@code {
    private string? errorMessage;

    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    [SupplyParameterFromForm]
    private InputModel Input { get; set; } = new();

    [SupplyParameterFromQuery]
    private string? ReturnUrl { get; set; }

    private HttpClient HttpClientService;
    public string JwtToken { get; private set; }
    public string RefreshToken { get; private set; }

    protected override async Task OnInitializedAsync()
    {
        HttpClientService = new HttpClient();
        HttpClientService = HttpClientFactory.CreateClient("API");
        var baseUri = NavigationManager.BaseUri;
        HttpClientService.BaseAddress = new Uri(baseUri);        
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;
        string username = "";

        if (user.Identity is not null && user.Identity.IsAuthenticated)
        {
            RedirectManager.RedirectTo("/Dashboard");
        }

        if (HttpMethods.IsGet(HttpContext.Request.Method))
        {
            // Clear the existing external cookie to ensure a clean login process
            await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
        }
    }

    public async Task LoginUser()
    {
        // This doesn't count login failures towards account lockout
        // To enable password failures to trigger account lockout, set lockoutOnFailure: true
        var result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
        if (result.Succeeded)
        {
            Logger.LogInformation("User logged in.");

            var response = await HttpClientService.PostAsJsonAsync("api/auth/login", new { Email = Input.Email, Password = Input.Password });
            if (response.IsSuccessStatusCode)
            {
                var tokenResponse = await response.Content.ReadFromJsonAsync<TokenResponse>();
                JwtToken = tokenResponse.Token;
                RefreshToken = tokenResponse.RefreshToken;

                Logger.LogInformation("Tokens set: JWT Token - {JwtToken}, Refresh Token - {RefreshToken}", JwtToken, RefreshToken);

                // Store tokens in session storage
                await JS.InvokeVoidAsync("sessionStorage.setItem", "jwtToken", JwtToken);
                await JS.InvokeVoidAsync("sessionStorage.setItem", "refreshToken", RefreshToken);

                Logger.LogInformation("Tokens stored in session storage.");

                // Redirect to the dashboard
                RedirectManager.RedirectTo("/Dashboard");
            }
            else
            {
                errorMessage = "Error: Access Token could not be created";   
            }
        }
        else if (result.RequiresTwoFactor)
        {
            RedirectManager.RedirectTo(
                "Account/LoginWith2fa",
                new() { ["returnUrl"] = ReturnUrl, ["rememberMe"] = Input.RememberMe });
        }
        else if (result.IsLockedOut)
        {
            Logger.LogWarning("User account locked out.");
            RedirectManager.RedirectTo("Account/Lockout");
        }
        else
        {
            errorMessage = "Error: Invalid login attempt.";
        }
    }

    private sealed class InputModel
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; } = "";

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; } = "";

        [Display(Name = "Remember me?")]
        public bool RememberMe { get; set; }
    }
}

and I'm getting this error:

InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

    Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
    Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, CancellationToken cancellationToken, object[] args)
    Microsoft.JSInterop.JSRuntime.InvokeAsync<TValue>(long targetInstanceId, string identifier, object[] args)
    System.Threading.Tasks.ValueTask<TResult>.get_Result()
    Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, string identifier, object[] args)
    Components.Account.Pages.Login.LoginUser() in Login.razor

                    await JS.InvokeVoidAsync("sessionStorage.setItem", "jwtToken", JwtToken);

I already try to use OnAfterRenderAsync but it doesn't work, the method was called at any moment.

Any thougts?

Answer 1

This is because of the rendermode. You didn't disable prerender. The prerender is SSR (Server static render), the c# codes have no way to communicate with browser (javascript). So jsinterop wouldn't work.

So one solution is just disable the prerender in App.razor globally <Routes @rendermode="new InteractiveServerRenderMode(false)" />

Another solution is not using sessionStorage to save jwt. Try use cookie becasue you could access it in all rendermode.
1.When interactive(server/WASM), you could use jsinterop to read/write cookie.
2.When prerender(SSR), HttpContext is available. So you could use HttpContext.Request.Cookie to read and use HttpContext.Response.Cookie to write.

        // When SSR use HttpContext Store tokens in cookie 
        if (HttpContext != null)
        {
            HttpContext.Response.Cookies.Append("jwtToken", JwtToken);
            HttpContext.Response.Cookies.Append("refreshToken", RefreshToken);
        }
        // When Interactive use jsinterop to store tokens
        else
        {
            await JS.InvokeVoidAsync("cookieStorage.setItem", "jwtToken", JwtToken);
            await JS.InvokeVoidAsync("cookieStorage.setItem", "refreshToken", RefreshToken);
        }

Reference : https://learn.microsoft.com/en-us/aspnet/core/fundamentals/http-context?view=aspnetcore-8.0#ihttpcontextaccessorhttpcontext-in-razor-components-blazor

HttpContext...The value is always null for interactive rendering.