Preloading Blazor WASM Assemblies on a Plain HTML Login Page

Enhancing Blazor WASM with Seamless Login Integration

Imagine opening a web app where the login page is lightning-fast, lightweight, and simple, but still leads to a full-featured Blazor WASM application. 🚀 This kind of setup combines modern frameworks like Blazor with the timeless simplicity of HTML and JavaScript. But can you preload Blazor's heavy WASM assemblies while your user is still typing in their credentials?

Developers often face the challenge of optimizing the user experience, especially during the initial loading phase. A plain HTML login page allows for quick access, but integrating it with Blazor introduces complexities. Many wonder if they can make the Blazor app "ready to go" while the login page is still active. This is precisely where this topic becomes intriguing.

The idea is to leverage asynchronous operations to download Blazor WASM assemblies during the login page's lifecycle. By the time the user logs in, the application is already preloaded and can start almost instantly. This approach not only improves perceived performance but also maintains a user-friendly design. 🌟

In this article, we'll explore whether this setup is feasible, discuss its potential pitfalls, and offer practical steps to achieve it. By the end, you’ll know how to bridge plain HTML login pages with advanced Blazor WASM apps for a seamless user experience.

Optimizing Blazor WASM Preloading with Simple HTML

The scripts provided in the earlier examples are designed to bridge the gap between a lightweight, fast-loading HTML login page and the more resource-intensive Blazor WASM application. The first script ensures that Blazor's WebAssembly assemblies are preloaded asynchronously during the login page lifecycle. This improves the user experience by allowing the main app to load almost instantly after authentication. For instance, fetching the `blazor.boot.json` file is a critical step, as it contains all the metadata and resources required to bootstrap the Blazor app. This way, users don’t experience delays after submitting their login credentials. 🌐

Another key part of the front-end script is the use of JavaScript promises to handle multiple asynchronous tasks simultaneously. While the assemblies are being fetched, the login functionality is fully operational. This ensures that the app is responsive even while performing background tasks. A great example is how the `Promise.all()` method consolidates the assembly download processes, making it efficient and fail-safe. This approach minimizes potential points of failure during preloading, reducing the risk of users encountering broken or incomplete app loads.

On the back-end side, the ASP.NET API is used to authenticate users securely and return a JSON Web Token (JWT). This token not only validates the user session but also enables the Blazor app to function in a secure environment after login. The use of a `JwtSecurityTokenHandler` in the server code ensures that tokens are generated following industry-standard encryption methods, enhancing security. For instance, a user logging in with valid credentials receives a signed JWT, which can be stored in the browser’s local storage for subsequent requests. 🔒

Incorporating these scripts achieves a smooth, user-friendly workflow. When the login page is loaded, the preloading script starts downloading the Blazor files. Once the user clicks "Login" and is authenticated, the Blazor app is initialized only if the assemblies are ready. Otherwise, the app waits for the download to complete before launching. This approach not only optimizes performance but also provides a seamless experience. A developer could compare this setup to a "dual-engine" car, where one engine is used for basic tasks and the second for heavy lifting. This balance ensures that both developers and users enjoy a better, more responsive application.

// Front-End: HTML + JavaScript solution for preloading Blazor WASM assemblies
document.addEventListener("DOMContentLoaded", async () => {
  // Step 1: Define the Blazor assemblies URL
  const wasmBasePath = "/_framework/blazor.boot.json";
  const preloadAssemblies = async () => {
    try {
      const response = await fetch(wasmBasePath);
      if (response.ok) {
        const data = await response.json();
        const assemblyPromises = data.resources.assembly.map((asm) => fetch(asm));
        await Promise.all(assemblyPromises);
        console.log("Blazor assemblies preloaded successfully.");
      }
    } catch (error) {
      console.error("Failed to preload Blazor assemblies:", error);
    }
  };
  preloadAssemblies();
});
// Login button handler
document.getElementById("login-btn").addEventListener("click", async () => {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  try {
    const response = await fetch("/api/authenticate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password })
    });
    if (response.ok) {
      const token = await response.json();
      localStorage.setItem("jwtToken", token);
      console.log("Authentication successful.");
      // Optionally, trigger Blazor WASM now
      if (typeof Blazor !== "undefined") Blazor.start();
    } else {
      alert("Invalid credentials.");
    }
  } catch (error) {
    console.error("Error during login:", error);
  }
});

using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
[ApiController]
[Route("api/[controller]")]
public class AuthenticateController : ControllerBase
{
    private readonly string key = "Your_Secret_Key_Here";

    [HttpPost]
    public IActionResult Authenticate([FromBody] LoginRequest request)
    {
        if (request.Username == "user" && request.Password == "password")
        {
            var tokenHandler = new JwtSecurityTokenHandler();
            var tokenKey = Encoding.ASCII.GetBytes(key);
            var tokenDescriptor = new SecurityTokenDescriptor
            {
                Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, request.Username) }),
                Expires = DateTime.UtcNow.AddHours(1),
                SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(tokenKey), SecurityAlgorithms.HmacSha256Signature)
            };
            var token = tokenHandler.CreateToken(tokenDescriptor);
            return Ok(tokenHandler.WriteToken(token));
        }
        return Unauthorized();
    }
}
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

Streamlining Blazor WASM Loading for Login Pages

One often-overlooked aspect of optimizing a Blazor WebAssembly application is leveraging the browser's caching mechanisms. When preloading assemblies, these resources can be stored locally in the browser cache for subsequent visits, significantly reducing load times. By using the `Cache-Control` header on the server side, developers can ensure that static resources like assemblies are cached properly. For example, you might set `max-age=31536000` to cache assemblies for a year, which is ideal for resources that rarely change. This approach works seamlessly with the preloading mechanism, enhancing both speed and reliability. 🚀

Another consideration is how Blazor manages updates to the application. Using a preloaded login page means that assembly updates must be carefully handled to prevent stale files from being used. Implementing a version check system within your `blazor.boot.json` fetch logic can address this. By adding a version hash to assembly URLs, you ensure that the browser fetches updated resources whenever the app is redeployed. For instance, adding a timestamp or a Git commit hash ensures that users always get the latest version of the app while avoiding unnecessary downloads. 🌐

Lastly, optimizing user experience during assembly downloads is critical. Incorporating a visual progress indicator or a "loading" animation on the login page can provide feedback to users that something is happening in the background. This reduces user frustration and makes the experience more interactive. By combining techniques like caching, version checks, and visual cues, developers can ensure a smoother and more professional Blazor WASM application deployment.