MyApp - .NET + Angular JWT Template

Superset Integration Available on Other Branches:

Branch	Description
main	This branch - Base .NET + Angular + JWT template
superset-init	Guest token integration for embedded Superset dashboards
superset-sso	Full SSO + Guest Token + Chart Builder with Row Level Security

---

This is a simple starter template for building web applications with:

• .NET 10 Web API with JWT authentication
• Angular 21 frontend with standalone components
• PostgreSQL database
• Clean Architecture (Core, Infrastructure, Api layers)
• Docker Compose for development

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Angular App   │────▶│   .NET API      │────▶│   PostgreSQL    │
│   (Frontend)    │     │   (Backend)     │     │   (Database)    │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │
        │ HTTP + JWT            │
        ▼                       ▼
┌─────────────────┐     ┌─────────────────┐
│  Auth Guard     │     │  JWT Auth       │
│  Interceptor    │     │  Identity       │
└─────────────────┘     └─────────────────┘

Project Structure

├── MyApp.Api/                    # .NET Web API (Presentation Layer)
│   ├── Controllers/
│   │   ├── AuthController.cs     # Login, Register, Me endpoints
│   │   └── CompanyController.cs  # Company CRUD
│   ├── Extensions/               # Service registration extensions
│   ├── Program.cs                # Application entry point
│   └── appsettings.json          # Configuration
│
├── MyApp.Core/                   # Domain Layer
│   ├── Entities/
│   │   ├── ApplicationUser.cs    # User entity (extends IdentityUser)
│   │   └── Company.cs            # Company entity
│   ├── DTOs/
│   │   └── Auth/                 # Login/Register DTOs
│   └── Interfaces/               # Repository & service interfaces
│
├── MyApp.Infrastructure/         # Infrastructure Layer
│   ├── Data/
│   │   ├── ApplicationDbContext.cs
│   │   └── Migrations/
│   ├── Repositories/             # Repository implementations
│   ├── Services/
│   │   └── AuthService.cs        # JWT authentication logic
│   └── DependencyInjection.cs    # Infrastructure DI registration
│
├── Frontend/                     # Angular Application
│   ├── src/
│   │   ├── app/
│   │   │   ├── login/            # Login page component
│   │   │   ├── dashboard/        # Dashboard page component
│   │   │   ├── guards/           # Route guards (auth.guard.ts)
│   │   │   ├── interceptors/     # HTTP interceptors (auth.interceptor.ts)
│   │   │   ├── services/         # Services (auth.service.ts)
│   │   │   ├── app.routes.ts     # Route configuration
│   │   │   └── app.config.ts     # App configuration
│   │   └── index.html
│   ├── package.json
│   └── angular.json
│
└── docker-compose.yml            # Docker services

Features

Backend (.NET)

JWT Authentication

• User registration with email/password
• Login returns JWT token with claims
• Protected endpoints with [Authorize] attribute
• Token includes: userId, email, firstName, lastName

Clean Architecture

• Core: Entities, interfaces, DTOs (no dependencies)
• Infrastructure: Database, repositories, external services
• Api: Controllers, middleware, configuration

Entity Framework Core

• PostgreSQL provider (Npgsql)
• ASP.NET Core Identity for user management
• Code-first migrations

Frontend (Angular)

Authentication Flow

• Login page with form validation
• JWT token stored in localStorage
• Automatic token injection via HTTP interceptor
• Route protection with auth guard

Key Components

Component	Description
Login	Login form with email/password
Dashboard	Protected welcome page with user info

Services & Guards

File	Purpose
auth.service.ts	Handles login, logout, token storage, user state
auth.guard.ts	Protects routes, redirects unauthenticated users
auth.interceptor.ts	Adds JWT token to HTTP requests

Routes

Path	Component	Protected
/login	Login	No
/dashboard	Dashboard	Yes

API Endpoints

Authentication

Method	Endpoint	Description	Auth
POST	/api/auth/register	Register new user	No
POST	/api/auth/login	Login, returns JWT	No
GET	/api/auth/me	Get current user info	Yes

Request/Response Examples

Register:

POST /api/auth/register
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "Password123!",
  "firstName": "John",
  "lastName": "Doe"
}

Login:

POST /api/auth/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "Password123!"
}

Response:
{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "message": "Login successful"
}

Get Current User:

GET /api/auth/me
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

Response:
{
  "id": "guid",
  "email": "user@example.com",
  "firstName": "John",
  "lastName": "Doe"
}

Configuration

Backend - JWT Settings (appsettings.json)

{
  "JwtSettings": {
    "SecretKey": "YourSuperSecretKeyThatIsAtLeast32CharactersLong!",
    "Issuer": "MyApp",
    "Audience": "MyAppUsers",
    "ExpirationMinutes": "60"
  },
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Port=5432;Database=myappdb;Username=postgres;Password=postgres"
  }
}

Frontend - API URL (environment.ts)

export const environment = {
  production: false,
  apiUrl: 'https://localhost:5001/api'
};

Getting Started

Prerequisites

• .NET 10 SDK
• Node.js 18+ and npm
• Docker & Docker Compose
• Angular CLI (npm install -g @angular/cli)

1. Start Database

docker-compose up -d postgres

2. Run Migrations

cd MyApp.Api
dotnet ef database update --project ../MyApp.Infrastructure

3. Run API

cd MyApp.Api
dotnet run

API will be available at: https://localhost:5001

4. Run Angular Frontend

cd Frontend
npm install
ng serve

Frontend will be available at: http://localhost:4200

Angular Development

Install Dependencies

cd Frontend
npm install

Development Server

ng serve
# or with specific port
ng serve --port 4200

Build for Production

ng build --configuration production

Build output will be in Frontend/dist/

Run Tests

ng test

Generate New Component

ng generate component components/my-component
# or shorthand
ng g c components/my-component

Generate New Service

ng generate service services/my-service

Docker

Run Everything with Docker Compose

docker-compose up -d

This starts:

• PostgreSQL on port 5432
• .NET API (configured in Dockerfile)

Docker Compose Services

Service	Port	Description
postgres	5432	PostgreSQL database
myapp.api	-	.NET Web API

Development

Adding a New Migration

cd MyApp.Api
dotnet ef migrations add MigrationName --project ../MyApp.Infrastructure

Applying Migrations

dotnet ef database update --project ../MyApp.Infrastructure

JWT Token Claims

The JWT token includes these claims:

{
  "sub": "user-guid",
  "email": "user@example.com",
  "firstName": "John",
  "lastName": "Doe",
  "jti": "unique-token-id",
  "iat": 1234567890,
  "exp": 1234571490,
  "iss": "MyApp",
  "aud": "MyAppUsers"
}

Security Notes

• Change SecretKey in production (minimum 32 characters)
• Use HTTPS in production
• Store secrets in environment variables or secret manager
• Token expiration is configurable (default: 60 minutes)
• JWT token is stored in localStorage (consider httpOnly cookies for production)

Next Steps

To add Superset dashboard integration, check out:

• superset-init branch - For embedded dashboard viewing
• superset-sso branch - For full Superset access with SSO