DEV Community: Dominic Pascasio

Blazor Web App - WebAssembly Hosted in .NET8 and .NET9

Dominic Pascasio — Fri, 30 May 2025 04:46:00 +0000

Notice: We already have a project template for Standalone Blazor WebAssembly for .NET 9. This tutorial is no longer relevant.

If you don't need Blazor server interactivity and rendering, and you just want to load WebAssembly resources to the client first before rendering and running anything, this is the starter template configuration for you.

Project Template

dotnet new blazor -o MyApp -f net9.0 -int WebAssembly -ai

-o MyApp - output
-f net9.0 - target framework
-int WebAssembly
- Adds a separate WASM project and reference it in .csproj.
- Adds package reference Microsoft.AspNetCore.Components.WebAssembly.Server to allow serving the separate WASM project.
- Add WASM components in the DI services using
```
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();
```
- Serve WASM components in the ASP.NET pipeline.
```
app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MyApp.Client._Imports).Assembly);
```
-ai - all interactive, applies the config at the top level (HeadOutlet and Routes). Also moves MainLayout and NavMenu to the separate WASM project.

This creates MyApp.sln, MyApp and MyApp.Client project folders. If you want to add WebApi, configure it in MyApp project.

This still has prerendering! To remove it entirely, edit MyApp/Components/App.razor:

Change this:

<HeadOutlet @rendermode="InteractiveWebAssembly" />
...
<Routes @rendermode="InteractiveWebAssembly" />

to this:

<HeadOutlet @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />
...
<Routes @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" />

Note: Server prerendering gives unintended output and behavior when you want to run things in WebAssembly like redirect in AuthorizeRouteView>NotAuthorized. Removing server prerendering means removing the illusion of quick initial load.

Authentication/Authorization

If you want to authorize access to pages entirely on WebAssembly, allow anonymous on blazor components in MyApp/Program.cs:

app.MapRazorComponents<App>()
    .AllowAnonymous() //disables server-side authorization for Blazor
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MyApp.Client._Imports).Assembly);

Note: Server-side authorization of Blazor prevents you from loading the entire WebAssembly app when you type secure page in the address bar (e.g.: "/profile"). Since we will authorize in the client-side, we can bypass server authorization.

Warning! Client side is not secure. When page access / authorization is done on the client-side, there should be a final validation and authorization in your Web API when processing requests.

Final Thoughts:

This does not cover PWA but it can be a starting point.

React - Simple Component with Pagination

Dominic Pascasio — Sat, 03 May 2025 02:23:37 +0000

A code snippet for a React component with a simple pagination.

When user clicks prev/next button, update query string (page, pageSize) via navigate() - this URL update does not reload the page.
At first load and when useEffect([location.search]) sees location.search (query string) changed, populateMyList() runs.
When populateMyList() fetches data, setMyList() and setLoading() are called. Those setState calls trigger a render to reflect the new data.

import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate  } from 'react-router-dom';

export function MyList() {

    //this stores and tracks our data
    const [myList, setMyList] = useState({ totalCount: 0, data: [] });
    const [loading, setLoading] = useState(true);

    //we need this to get and manipulate our querystring (page, pageSize)
    const location = useLocation();
    const navigate = useNavigate();
    const queryParams = new URLSearchParams(location.search);

    //set default page and pageSize if not in the URL
    const page = Number(queryParams.get('page')) || 1; 
    const pageSize = Number(queryParams.get('pageSize')) || 10; 

    const dataUrl = new URL('mylistdata', window.location.origin);
    dataUrl.searchParams.append('page', page);
    dataUrl.searchParams.append('pageSize', pageSize);

    //function to fetch data from the server
    const populateMyList = async () => {
        const response = await fetch(dataUrl);
        const data = await response.json();
        setMyList(data);
        setLoading(false);
    };

    //calls populate when querystring changed (page, pageSize)
    useEffect(() => {
        populateMyList();
    }, [location.search]); 

    //event handler to move to the previous page
    const goToPrevPage = () => {
        const params = new URLSearchParams();
        if(page > 1) {
            params.set('page', page - 1);
            params.set('pageSize', pageSize);
            navigate(`?${params.toString()}`);
        }
    };

    //event handler to move to the next page
    const goToNextPage = () => {
        const params = new URLSearchParams();
        params.set('page', page + 1);
        params.set('pageSize', pageSize);
        navigate(`?${params.toString()}`);
    };

    //this will be used to determine if we can go to the previous or next page
    const hasPrevPage = page > 1;
    const hasNextPage = myList.totalCount > page * pageSize;

    //function for rendering the actual list    
    const renderMyList = (list) => (
        <ul>
            {list.map(item => (
            <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );

    return (
        <div>
            <h1 id="listLabel">My List</h1>
            {loading ? <p><em>Loading...</em></p> : renderMyList(myList.data)}
            <button onClick={goToPrevPage} disabled={!hasPrevPage}>Prev</button>
            <button onClick={goToNextPage} disabled={!hasNextPage}>Next</button>
        </div>
    );
}

ASP.NET Core - Custom Token Authentication

Dominic Pascasio — Tue, 21 Feb 2023 02:15:27 +0000

This is a quick reference on how to create a custom token authentication.

For a simple demonstration, we will check the header of the request if it contains our token.

Warning! In real world, using plain text as your token is not the proper way to secure your application.

Create custom authentication scheme options and handler:

using Microsoft.AspNetCore.Authentication;

public class MyAuthenticationOptions :         
    AuthenticationSchemeOptions
{
    public const string DefaultScheme = "MyAuthenticationScheme";
    public string TokenHeaderName { get; set; } = "MyToken";
}

For authentication handler:

using Microsoft.AspNetCore.Authentication;
using Microsoft.Extensions.Options;
using System.Security.Claims;
using System.Text.Encodings.Web;

public class MyAuthenticationHandler :         
    AuthenticationHandler<MyAuthenticationOptions>
{
    public MyAuthenticationHandler         
        (IOptionsMonitor<MyAuthenticationOptions> options, 
        ILoggerFactory logger, UrlEncoder encoder, 
        ISystemClock clock)
        : base(options, logger, encoder, clock) 
    { }
   protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
    {
        //check header first
        if (!Request.Headers 
            .ContainsKey(Options.TokenHeaderName))
        {
            return AuthenticateResult.Fail($"Missing header: {Options.TokenHeaderName}");
        }

        //get the header and validate
        string token = Request 
            .Headers[Options.TokenHeaderName]!;

        //usually, this is where you decrypt a token and/or lookup a database.
        if(token!= "supersecretecode")
        {
            return AuthenticateResult
                .Fail($"Invalid token.");
        }
        //Success! Add details here that identifies the user
        var claims = new List<Claim>()
        {
            new Claim("FirstName", "Juan")
        };

        var claimsIdentity = new ClaimsIdentity
            (claims, this.Scheme.Name);
        var claimsPrincipal = new ClaimsPrincipal 
            (claimsIdentity);

        return AuthenticateResult.Success
            (new AuthenticationTicket(claimsPrincipal, 
            this.Scheme.Name));
    }
}

builder.Services.AddAuthentication
    (MyAuthenticationOptions.DefaultScheme)
    .AddScheme<MyAuthenticationOptions, MyAuthenticationHandler>
    (MyAuthenticationOptions.DefaultScheme, 
        options => { });

This does the same thing as AddJwtBearer and AddCookie, you can create an extension method if you like.

Add authentication to the pipeline. Make sure it comes before authorization and endpoints.
```
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();
```

You can now set your endpoint to accept only authenticated users.

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController

You can also access the claims you set in your authentication handler via User in your controllers:

var claim = User.Claims.Where(c => c.Type == "FirstName").FirstOrDefault();

In other classes, you can inject ClaimsPrincipal to access the user. Register in DI where to get the ClaimsPrincipal when required:

builder.Services.AddHttpContextAccessor();
builder.Services.AddTransient<ClaimsPrincipal>(s => s.GetService<IHttpContextAccessor>().HttpContext.User);

Then in your class, add ClaimsPrincipal to your constructor:

public class MyService
{
    public MyService(ClaimsPrincipal user) 
    {

Blazor WASM - Shared State Between Layout and Page

Dominic Pascasio — Tue, 27 Sep 2022 17:29:46 +0000

We can easily share state data between components (e.g. a page and a layout), but changing the data from either of them does not automatically re-renders the other if necessary.

Create a class that contains the data. The class should have an event which we will use to notify the subscribers (our components).

using System.Collections.ObjectModel;

public class NamesService{
    private readonly List<string> _names = new List<string>();
    public ReadOnlyCollection<string> Names { 
        get { return _names.AsReadOnly(); } 
    } 
    //the event
    public event Action? StateChanged;
    public void AddName(string name) {
        _names.Add(name); 
        StateChanged?.Invoke(); //raise the event
    }
}

We are using event. Dependents (blazor components) of this class should subscribe to StateChanged event.

Note that we are returning a readonly collection to avoid adding data directly, dependents should use AddName instead to raise the event.

Register the state container in DI as a Singleton. In your Program.cs.
```
builder.Services.AddSingleton<NamesService>();
```
Since we do not want to create a new instance of NamesService everytime we switch the page, we will make it a singleton.

Subscribe to StateChanged event from our component. In our layout for example:

@inherits LayoutComponentBase
@implements IDisposable
@inject NamesService NamesService
<!-- some code goes here -->
<span>@NamesState.Names.Count</span>
<button @onclick="Add">Add</button>
<!-- some code goes here -->
@Body
<!-- some code goes here -->
@code {
    protected override void OnInitialized() {
        NamesService.StateChanged += this.StateHasChanged; // subscribe
    }
    protected void Add() {
        NamesService.Add("from layout: " + DateTime.UtcNow.ToString()); // add random data
    }
    public void Dispose() {
        NamesService.StateChanged -= this.StateHasChanged; // unsubscribe
    }
}

Things to note:

We use @inject to get the instance of the NamesService.
When the component is initialized (OnInitialized), we subscribe to NamesService.StateChanged with the component's StateHasChanged method.
We implement IDisposable, so that we can unsubscribe from NamesService.StateChanged when the page is disposed.

In our page, it is the same:

@page "/test"
@implements IDisposable
@inject NamesService NamesService
<ul>@foreach(var name in NamesState.Names)
{ <li>@name</li> }
</ul>
<button @onclick="Add">Add</button>
@code {
    protected override void OnInitialized() {
        NamesService.StateChanged += this.StateHasChanged; // subscribe
    }
    protected void Add() {
        NamesService.Add("from page: " + DateTime.UtcNow.ToString()); // add random data
    }
    public void Dispose() {
        NamesService.StateChanged -= this.StateHasChanged; // unsubscribe
    }
}

To summarize, when the NamesService.Add() is called, it raises the event NamesService.StateChanged, all subscribers of the event will be notified, in our example, StateHasChanged of our components will be called.

Our components can now add data and the changes should reflect to all subscribing components.

Resources

Microsoft Docs - Event
Microsoft Docs - Service Lifetime
Microsoft Docs - StateHasChanged
Microsoft Docs - State Management

ASP.NET Core - Tiny Chat App using SignalR

Dominic Pascasio — Fri, 02 Sep 2022 23:08:39 +0000

Warning! This code is for demonstration purposes only.

Create an empty ASP.NET web app:
```
dotnet new web -o TinyChat
```

In your Program.cs, add SignalR service, set to serve static files and map the SignalR hub.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();
var app = builder.Build();

app.UseStaticFiles();
app.MapHub<ChatHub>("/ChatHub");
app.Run();

In your project directory, add ChatHub.cs that contains:

using Microsoft.AspNetCore.SignalR;

public class ChatHub : Hub
{
    // this can be invoked from the client -- web browser in our example
    public async Task SendMessage(string username, string message)
    {
        // invoke ReceiveMessage on all clients connected
        await Clients.All.SendAsync("ReceiveMessage", username, message);
    }
}

Add folder wwwroot in the project directory. Then add chat.html which contains:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <input id='usernameInput' placeholder='username' />
        <input id='messageInput' placeholder='message' />
        <button id='sendButton'>Send</button>
        <ul id='conversationList'></ul>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.8/signalr.min.js'></script>
        <script src='/chat.js'></script>
    </body>
</html>

In wwwroot, add chat.js which contains:

"use strict";
document.addEventListener('DOMContentLoaded', function() {
var connection = new signalR.HubConnectionBuilder().withUrl("/ChatHub").build();

// Handler for receiving a message. This will be invoked by the server.
connection.on("ReceiveMessage", function (username, message) {
    var messageItem = document.createElement("li");
    messageItem.textContent = `${username}: ${message}`; 

    var conversationList = document.querySelector("#conversationList");
    conversationList.prepend(messageItem);
});

// Initiate connection and set callback for error.
connection.start().then(function () {

}).catch(function (err) {
    return console.error(err.toString());
});

// Handler for sending message to the server.
document.querySelector("#sendButton").addEventListener("click", function (event) {
    var username = document.querySelector("#usernameInput").value;
    var message = document.querySelector("#messageInput").value;

    connection.invoke("SendMessage", username, message)
    .catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});
});

Run the app using dotnet run and go to https://localhost:<port>/chat.html.

Resource
Microsoft Docs

ASP.NET Core - Write a Simple JWT Authentication

Dominic Pascasio — Wed, 31 Aug 2022 15:32:02 +0000

This is just a simple implementation of JWT authentication to get you started.

Add the package Microsoft.AspNetCore.Authentication.JwtBearer
You need a secret key, store it using user-secrets:
```
dotnet user-secrets init
dotnet user-secrets set "Authentication:JwtSecret" "thisismysecret"
```
Warning! User secret feature is not intended to be used in production.

In your Program.cs or Startup.cs:

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.IdentityModel.Tokens;
using System.Text;

Add the service:

builder.Services
    .AddAuthentication()
    .AddJwtBearer("JwtScheme", options => {
        options.TokenValidationParameters = new TokenValidationParameters 
        {
            ValidIssuer = "https://localhost:<port>",
            ValidAudience = "https://localhost:<port>",
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,                
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(builder.Configuration["Authentication:JwtSecret"])),
        };
})

Tell MVC that users should be authenticated and with JWTScheme.

builder.Services.AddControllers(options => {
    options.Filters.Add(new AuthorizeFilter
        (new AuthorizationPolicyBuilder()
            .RequireAuthenticatedUser()
            .AddAuthenticationSchemes("JwtScheme")
            .Build()));
})

Alternatively, you can use Authorize attribute for each controller or endpoint, specifying the scheme(s) to be allowed:

[Authorize(AuthenticationSchemes = "JwtScheme")]
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase { ... }

In the HTTP Request pipeline, add before mapping controllers:

app.UseAuthentication();
app.UseAuthorization();

In your authentication controller:

using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
.
.
//inject `IConfiguration` to `_configuration` in the constructor.

In your login method, add [AllowAnonymous] attribute. Then:

//validate credentials and get user details here
var key = Encoding.ASCII.GetBytes(_configuration["Authentication:JwtSecret"]);
var claims = new List<Claim>
    {
        new Claim("sub", user.Id),
        new Claim("name", user.FullName)
    };
var tokenDescriptor = new SecurityTokenDescriptor
    {
        Subject = new ClaimsIdentity(claims),
        Issuer = "https://localhost:<port>",
        Audience = "https://localhost:<port>",
        Expires = DateTime.UtcNow.AddDays(7),
        SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature),

    };

var tokenHandler = new JwtSecurityTokenHandler();
var token = tokenHandler.CreateToken(tokenDescriptor);
return tokenHandler.WriteToken(token);

The login method will return the token generated.

In your client's HTTP request, add the Authorize header with the value Bearer <the token generated>. You can test it via Postman or any testing program you prefer.

Resource
auth0 - Claims
Infoworld Article - JWT
Microsoft Docs - User Secrets

ASP.NET Core - Write a Simple Cookie Authentication

Dominic Pascasio — Fri, 26 Aug 2022 14:45:00 +0000

Here is a quick guide on writing cookie authentication without using ASP.NET Identity.

Add authentication service and HttpContextAccessor.

builder.Services.AddAuthentication("MyAuthScheme")
    .AddCookie("MyAuthScheme", options => {
        options.LoginPath = "/Login";
        options.LogoutPath = "/Logout";        
        options.AccessDeniedPath = "/AccessDenied";
    });

builder.Services.AddHttpContextAccessor();

Note that "MyAuthScheme" will be used throughout.

Configure HTTP request pipeline.

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();
app.MapControllers();

In your login page, add:

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authorization;
using System.Security.Claims;

In your login page constructor, inject _httpContextAccessor like so:

private readonly IHttpContextAccessor _httpContextAccessor;
public Login(IHttpContextAccessor httpContextAccessor){ 
    _httpContextAccessor = httpContextAccessor;
}

Actual login:

// Validate login credentials here and get user details.

var claims = new List<Claim>
{
    new Claim(ClaimTypes.NameIdentifier, user.Id),
    new Claim(ClaimTypes.Name, user.Username),
    new Claim(ClaimTypes.Email, user.Email)
    // add or remove claims as necessary    
};

var claimsIdentity = new ClaimsIdentity(claims, "MyAuthScheme");

await _httpContextAccessor.HttpContext
    .SignInAsync("MyAuthScheme",
        new ClaimsPrincipal(claimsIdentity),
        new AuthenticationProperties());

// Redirect here

This code creates a cookie with the name .AspNetCore.MyAuthScheme.

Sign out codes:

await _httpContextAccessor.HttpContext
            .SignOutAsync("MyAuthScheme");

// Redirect to login or other page

This removes the cookie .AspNetCore.MyAuthScheme

You can now put Authorize attribute on your pages, controllers or enpoints that require authenticated users.

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class ProductsController : BaseController { ... }

Or you can specify scheme(s):

[Authorize(AuthenticationSchemes = "MyAuthScheme,JwtScheme")]

To check manually or to access claims in Controller or Razor page:

if(User.Identity.IsAuthenticated) {

    var username = User.Identity.Name;
    var email = User.Claims.Where(i => i.Type == "Email").FirstOrDefault().Value;
}

To access in .cshtml:

@if(User.Identity.IsAuthenticated) {
    <p>@User.Identity.Name</p>
    <p>@User.Claims.Where(i => i.Type == "Email").FirstOrDefault().Value</p>
}

In other parts of the website, inject IHttpContextAccessor:

if(_httpContextAccessor.HttpContext
    .User.Identity.IsAuthenticated) {
    //do something
}

Resource

Microsoft Docs - Authentication

.NET - Create a Simple Scaffolding Tool

Dominic Pascasio — Wed, 24 Aug 2022 05:53:00 +0000

We will use Text Template Transformation Toolkit also known as T4.

Create a console application.
```
dotnet new console -o MyTool
```

Create a template file ClassTemplate.tt in the project directory.

<#@ output extension=".cs" #>
<#@ template language="C#" hostspecific="true" #>
<#@parameter type="System.String" name="ClassName" #>
public class <#=ClassName#>
{  }

To process the template, we need a templating engine, Mono.TextTemplating is an open source implementation for that.
```
dotnet add package Mono.TextTemplating
```

In Program.cs, write the code for processing the template.

var className = args[0];
var templatePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "ClassTemplate.tt");
var outputPath = Path.Combine(Directory.GetCurrentDirectory(), className); 
var generator = new Mono.TextTemplating.TemplateGenerator();

var session = generator.GetOrCreateSession();
session.Add("ClassName", className);

generator.ProcessTemplate(templatePath, outputPath);

Go to the desired directory and run:
```
ProjectA> dotnet run path/to/MyTool Person
```
This creates Person.cs in ProjectA directory:
```
public class Person
{  }
```

If you want to install and run it as a dotnet tool, read this.

Resource

Microsoft Docs

.NET - Create a Simple CLI Tool

Dominic Pascasio — Tue, 23 Aug 2022 21:02:00 +0000

.NET CLI tools are basically console applications with different configuration.

Create a console application.
```
dotnet new console -o MyTool
```

Write something.

Console.WriteLine($"Hello, {args[0]}!");

Edit .csproj file.

<ItemGroup>
    <PackAsTool>true</PackAsTool>
    <ToolCommandName>MyTool</ToolCommandName>
    <PackageOutputPath>./nupkg</PackageOutputPath>
</ItemGroup>

Create a nuget package.
```
dotnet pack
```

Install the tool globally.

dotnet tool install --global --add-source path/to/nupkg MyTool

Use the tool.
```
dotnet MyTool "John"
```
Output:
```
Hello, John!
```

Resource

Microsoft Docs