Logto

# MISSION: Scaffold "Logto" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Logto**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Logto
- **What It Does**: Logto is an open-source identity infrastructure providing OIDC/OAuth 2.1 authentication, multi-tenancy, enterprise SSO, and RBAC for SaaS and AI applications, usable self-hosted or as a managed cloud service.
- **Domain & Category**: Identity & Auth Infrastructure
- **Production Scale**: 6-20 people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: A Koa server backed by a single PostgreSQL database keeps the identity core simple, while Console and Experience ship as separate Vite/React apps and dozens of independently versioned connector packages plug in social and enterprise login providers.
- **Live Website Reference**: https://logto.io
- **Source Repository**: https://github.com/logto-io/logto
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, React, PostgreSQL, Vite, pnpm, Docker, Render, SCSS, Koa, Slonik
- **Primary Language(s)**: TypeScript, SCSS
- **License of the reference repo**: MPL-2.0
- **Frontend**: React — Powers the Console admin dashboard and the Experience sign-in app, both Vite builds.; Vite — Builds and dev-serves both packages/console and packages/experience.; SCSS — Styles Console and Experience components, linted with stylelint.
- **Backend & APIs**: Koa — @logto/core is a Koa-based Node server implementing the OIDC/OAuth provider and management APIs.
- **Data & persistence**: PostgreSQL — Sole datastore for tenants, users, and OIDC state.; Slonik — Typed Postgres query builder used by the schemas package and the CLI migration engine.
- **Infrastructure & deploy**: Docker — Multi-stage Dockerfile builds a production image run alongside Postgres for local testing.; Render — render.yaml defines a one-click Render.com web service backed by a managed Postgres database.; pnpm — Workspace package manager across packages/* and packages/connectors/*.; GitHub Actions — Runs integration tests, CodeQL, penetration tests, and releases across the monorepo.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/logto-io/logto @ c12d89f)
1. **The OIDC/OAuth core server is Koa, not Express**: packages/core/package.json depends on @koa/cors and the Koa ecosystem, making @logto/core a Koa application that implements the OIDC provider, management API, and experience API routes rather than an Express server.
2. **Console, Experience, and Core are separate packages, not one app**: pnpm-workspace.yaml lists packages/*, packages/toolkit/*, and packages/connectors/* as workspace members; packages/console (admin UI) and packages/experience (end-user sign-in flow) are independent Vite builds consumed by @logto/core at runtime.
3. **Social and enterprise connectors are a plugin ecosystem, not hardcoded**: packages/connectors contains dozens of independently versioned packages (connector-alipay-native, connector-wechat-web, connector-apple, and more), linked into the Docker build through the ADDITIONAL_CONNECTOR_ARGS build argument in the Dockerfile.
4. **Database migrations use a typed Slonik query layer, not an ORM**: packages/schemas depends on @silverhand/slonik and ships alterations/ SQL migration scripts run through the logto db alt command, defined as the alteration script in the root package.json.
5. **Render.com is a first-class deploy target alongside Docker**: render.yaml provisions a Docker-based web service plus a managed logto-database Postgres instance, letting users deploy via the render.com button referenced in the README without writing their own compose file.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Vite 6 with TanStack Router for fully type-safe routing. Manage server state and caching via TanStack Query v5 with optimistic UI updates.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL, Slonik): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.