Blazor WebAssembly with Clean Architecture

Question

I am working on a proof of concept project using Blazor WebAssembly. The project already has a React front end that I am hoping to replicate in Blazor.

I have the following projects in my solution:

• Domain - contains entities and does not reference any other layers
• Application - references the domain and contains DTOs, commands/queries (using MediatR/Dapper), validators (using FluidValidation) and interfaces for subsequent layers to implement
• Persistence – references application and uses EF Core to store the domain models in the database
• API - a Web API that registers everything using DI and exposes the commands/queries from the application layer via controllers
• React Front End - uses AJAX to talk to the API

I would like to reference the Application layer in a Blazor WebAssembly project so that I can reuse the validation rules that exist against the DTOs. Would it be possible for somebody to step though the code in the browser and extract sensitive information, such as connection strings, from the commands/queries?

For example, a simple query may look like this and stepping through the code would allow the IDbConnection to be inspected:

public class PayCategoryListQueryHandler
    : IRequestHandler<PayCategoryListQuery, PayCategoryListQueryVm>
  {
    private readonly IDbConnection _connection;

    public PayCategoryListQueryHandler(IDbConnection connection)
    {
      _connection = connection;
    }

    public async Task<PayCategoryListQueryVm> Handle(PayCategoryListQuery query, CancellationToken cancellationToken)
    {
      {
        var viewModel = new PayCategoryListQueryVm();

        viewModel.AddRange(
          await _connection.QueryAsync<PayCategoryListItemDto>(
            "SELECT Id, Description, MakeAttendedTimeZero, IsOffSite, IsVisibleToClient FROM PayCategory ORDER BY Description"));

        return viewModel;
      }
    }
  }

Do I need to extract the DTOs and their validation a separate layer that does not contain any database access code to prevent the connection string being leaked?

Clarification

To try and clarify the issue I would like to try and explain my situation a bit better.

My current application uses a React front end with Formik and Yup providing the validation. This means that each time a change is made to a validation rule I need to reflect it in two places – the Application layer and the React application. I was hoping that moving to Blazor would alleviate the duplication by only having to maintain validation rules in the Application layer.

The architecture I am currently using is based upon the NorthwindTraders sample application.

Using that example, CreateCustomerCommand makes use of CreateCustomerCommandValidator which will respond to POST requests via CustomersController. In order to use this for client-side validation in Blazor WebAssembly I would currently need to reference the Application layer.

Given this scenario should all the commands (not command handlers) and validators be moved to a separate project which could then be referenced by Blazor. The command handlers could remain in the Application layer therefore removing any database access code.

Answer 1

Create a new dotnet.standard-project called something like, MyProject.Domain.Shared. There you put all communication (poco-)classes.

The Shared-Project is consumed by your Domain-Project, Application-Layer and Client-Layer. The Domain-Project is consumed by the Application-Layer and Persistence-Layer.

In the Shared-Project you put:

• DTOs
• Requests
• Responses
• Validators

In the Application-Project you put:

• Request Handlers
• Response Handlers

In the Domain-Project you put:

• Domain-Objects
• Repository-Interfaces
• Handlers which consumes the requests and produce responses)