Repository files navigation

This full-stack solution demonstrates user registration, login, and role-based access control using Angular and .NET. The backend showcasesAuthentication andAuthorization withJWT tokens, demonstrating the use of Authorization policies inminimal 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 usingguards andinterceptors, with all components implemented asstandalone components andsignals.

Example API allows to:

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

Endpoints use different types of authorization policies.

• Clean Architecture AuthApi
• Menu
• Prerequisites
• Installation
• Get Started
  • Run Solution
  • Test Using SwaggerUI
  • Test Using .http file (VS2022)
• Motivation
  • Backend Architecture
    • Key Patterns and Decisions:
  • Frontend Structure
    • JWT Handling
  • Technologies

• .NET SDK 9.0+
• Angular CLI 19+
• Node.js 20.11.1+

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.Frontendnpm install

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 theAuth.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 commandng serve.
   2. In your browser, navigate tohttp://localhost:4200/.

2. Run Backend

   1. Open theAuthSol.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! :)

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

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

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.

The backend followsClean Architecture, with the application layer split intoCore andDomain projects:

• TheCore project contains business rules.
• TheDomain project holds business entities.

• 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 forMediatR.
• Result Pattern: Uses theResult pattern (viaFluentResults package) instead of throwing exceptions. Each handler returns anHttpDataResponse object containing data, error messages, and the HTTP response code.

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.

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

The project usesPrimeNG andPrimeFlex for styling and layout.

• ASP.NET Core 9
• Entity Framework Core InMemory
• Mapster
• SmallApiToolkit
• FluentResuls
• Validot
• GuardClauses
• Angular 19
• PrimeNG
• PrimeFlex