CLAUDE.md Template: Angular Material + FastAPI API Key Management

Overview

CLAUDE.md Template is a structured Claude Code starter tailored for teams building an Angular Material frontend with a FastAPI backend and an API key management workflow. This page provides a copyable CLAUDE.md template block you can paste into Claude Code to bootstrap architecture, rules, and checks for this stack.

When to Use This CLAUDE.md Template

• When you require a repeatable CLAUDE.md blueprint for Angular Material + FastAPI API key management.
• When you want consistent UI backend authentication using API keys rather than session cookies.
• When onboarding team members with a fixed structure for API key issuance, rotation, and auditing.

Copyable CLAUDE.md Template

# CLAUDE.md

Project role: Full-stack Developer building an Angular Material frontend with a FastAPI backend that uses API keys for service authentication.

Architecture rules:
- Use FastAPI for backend endpoints. Implement API key-based authentication using APIKeyHeader from fastapi.security.
- Angular Material UI communicates with the backend via a REST API; ensure CORS is properly configured.
- Separate concerns: frontend, backend, and shared types; use Pydantic for data validation.

File structure rules:
backend/
  app/
    main.py
    api/
      v1/
        api_key.py
    core/
      config.py
    models/
    schemas/
  tests/
frontend/
  src/
    app/
      components/
      services/
  angular.json
  package.json

Authentication rules:
- API keys are sent via header X-API-Key.
- API keys are stored hashed in the database; do not store plaintext keys.
- Create API keys with a unique 32-64 character value; use a secure RNG.

Database rules:
- Postgres is used to store api_keys with fields: id, key_hash, key_label, created_at, expires_at, is_active.
- Use Alembic migrations for schema changes.

Validation rules:
- Backend validates key length and format; rejects invalid keys with 401.
- Frontend validates input forms for API key creation with basic length checks.

Security rules:
- HTTPS in prod; set up HSTS.
- Do not log API keys; mask keys in logs.
- Enable CORS only for the frontend domain.

Testing rules:
- Backend: unit tests for API key creation, hashing, and validation; integration tests for key authorization.
- Frontend: unit tests for API service; end-to-end tests for key issuance flows using a mocked backend.

Deployment rules:
- Docker Compose with backend and frontend services; environment variables for DB_CONNECTION and API_BASE_URL.
- Use CI to run tests on push.

Things Claude must not do:
- Do not echo real API keys in logs or output.
- Do not bypass authentication or disable security checks.
- Do not generate weak/random keys; avoid predictable values.

Recommended Project Structure

backend/
  app/
    api/
      v1/
        api_key.py
    core/
      config.py
    models/
    schemas/
  tests/
frontend/
  src/
    app/
      components/
      services/
  angular.json
  package.json

Core Engineering Principles

• Principle of least privilege for API key access.
• Explicit API key handling with clear audit trails.
• Separation of concerns between frontend and backend responsibilities.
• Idempotent API operations for key creation and revocation.
• Defensive programming and input validation at the boundary.

Code Construction Rules

• Backend: use FastAPI with APIKeyHeader for authentication and a dependency to enforce key checks.
• Backend: hash API keys with a strong algorithm (e.g., Argon2) and never store plaintext keys.
• Frontend: use Angular Material components; ensure API calls supply the API key header via an interceptor.
• Shared types should live in a common package and be consumed by both frontend and backend types where possible.
• Do not expose API keys in frontend code or logs.

Security and Production Rules

• Enforce HTTPS in production and enable HSTS.
• Store API keys in a secure vault or database with rotation strategy and expirations.
• Limit API key scope and revoke unused keys promptly.
• Log minimal data; never log full keys or key hashes where not needed.
• Configure CORS to allow only the frontend origin.

Testing Checklist

• Unit tests for API key creation, hashing, and validation logic.
• Integration tests for API key authentication on backend endpoints.
• End-to-end tests for key issuance, retrieval, and revocation flows in a mocked environment.
• Frontend tests verifying API calls include the API key header and handle 401s gracefully.
• Deployment tests to verify containerized services start correctly and interoperate.

Common Mistakes to Avoid

• Storing plaintext API keys or leaking them in logs.
• Using API keys in query strings or URLs; prefer headers.
• Weak RNGs or predictable key generation.
• Neglecting key rotation or auditing capabilities.

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Skill files and templates for rapid, reliable FastAPI backend generation.

FAQ

What is a CLAUDE.md Template?

A copyable Claude Code starter for a specific stack; this one targets Angular Material on the frontend with FastAPI API key management.

Which stack does this template cover?

Angular Material frontend and FastAPI backend with API key management, hashing, and rotation.

How do I use the CLAUDE.md block?

Copy the CLAUDE.md block from the template and paste it into Claude Code to bootstrap your project rules and structure.

How are API keys secured in FastAPI?

Keys are stored hashed in Postgres and validated via a FastAPI dependency that checks the X-API-Key header.

What about deployment?

Containerize backend and frontend; use docker-compose and CI pipelines to validate tests before deployment.