Clean Architecture AuthApi

This full-stack solution demonstrates user registration, login, and role-based access control using Angular and .NET. The backend showcases Authentication and Authorization with JWT tokens, demonstrating the use of Authorization policies in minimal API endpoints and adding custom claims through middleware. These are all implemented following Clean Architecture and various design patterns. The frontend illustrates managing JWT tokens using guards and interceptors, with all components implemented as standalone components and signals.

Example API allows to:

• register user
• login user
• change user role
• get user and service info

Endpoints use different types of authorization policies.

Menu

• Prerequisites
• Installation
• Get Started
  • Run Solution
  • Test Using SwaggerUI
  • Test Using .http file (VS2022)
• Motivation
  • Backend Architecture
  • Frontend Structure
  • Technologies

Prerequisites

• .NET SDK 8.0+
• Angular CLI 18+
• Node.js 18.19.1+

Installation

To install the project using Git Bash:

1. Clone the repository:

   git clone https://github.com/Gramli/AuthApi.git

2. Navigate to the project directory:

   cd AuthApi/src

3. Install the backend dependencies:

   dotnet restore

4. Navigate to the frontend directory and install dependencies:

   cd Auth.Frontend
   npm install

Get Started

Run Solution

Expected IDE

• Backend: Visual Studio 2019+ or JetBrains Rider 2024.2.7+
• Frontend: Visual Studio Code 1.94.2+ or WebStorm 2024.2.4+

1. Run Frontend

   1. Open the Auth.Frontend project folder:
      • In WebStorm, use the run or debug button to start the project.
      • In VS Code, run the project in the terminal using the command ng serve.
   2. In your browser, navigate to http://localhost:4200/.

2. Run Backend

   1. Open the AuthSol.sln project in Rider or Visual Studio.
   2. Use the run button to start the backend project.

3. Once both the frontend and backend are running, you’re all set to start using the app. Enjoy! :)

Test Using SwaggerUI

Select the Auth.API startup item in VS or Rider and try it.

Test Using .http file (VS2022)

• Go to Tests/HttpDebugTests folder and open debug-tests.http file (in VS2022
• Send Login request
• Obtain jwtToken from response and use it in another requests in Authorization header

Motivation

The primary goal of this project is to create a practical example of authorization and authentication using Minimal API and Clean Architecture, while also enhancing my skills with Angular.

Backend Architecture

The backend follows Clean Architecture, with the application layer split into Core and Domain projects:

• The Core project contains business rules.
• The Domain project holds business entities.

Key Patterns and Decisions:

• CQRS Pattern: Separates handlers into commands and queries, with repositories structured similarly.
• No MediatR: Minimal API supports injecting handlers directly into endpoint map methods, eliminating the need for MediatR.
• Result Pattern: Uses the Result pattern (via FluentResults package) instead of throwing exceptions. Each handler returns an HttpDataResponse object containing data, error messages, and the HTTP response code.

Frontend Structure

The Angular frontend is organized into two main folders:

• Core: Contains "feature" components (each with specific feature logic).
• Shared: Stores common components, services, and extensions shared between feature components.

JWT Handling

This example demonstrates JWT token management on the client side. After obtaining the token from the API, it is stored in local storage via the JwtTokenService. The AuthorizeGuard checks if the client already has a token to protect routes, and authInterceptor automatically adds the token header to every request.

The project uses PrimeNG and PrimeFlex for styling and layout.

Technologies

• ASP.NET Core 8
• Entity Framework Core InMemory
• Mapster
• SmallApiToolkit
• FluentResuls
• Validot
• GuardClauses
• Moq
• Xunit
• Angular 18