Replace Zitadel's built-in login v1 with a fully custom SvelteKit-based login experience using Zitadel Session API v2. Keeps the existing OIDC authorization code flow (Auth.js handles token exchange) while providing branded login, signup, password reset, and TOTP pages. - Enable Login V2 in docker-compose, assign IAM_LOGIN_CLIENT role in setup script - Add server-only Zitadel API client ($lib/server/zitadel.ts) with session, user, and auth-request management functions - Create reusable auth UI components (AuthCard, FormField, FormError, LoadingButton) - Rewrite login page with email/password form and TOTP second factor support - Add signup page with auto-login after registration - Add password reset flow (request + verify pages) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| .env.example | ||
| docker-compose.dev.yml | ||
| README.md | ||
| setup-zitadel.sh | ||
| zitadel-healthcheck.yaml | ||
PVM Docker Dev Environment
Local development stack with Zitadel auth, PostgreSQL, and DragonflyDB.
Services
| Service | Description | Port |
|---|---|---|
| zitadel | Zitadel v3 identity provider (OIDC/OAuth2) | 8080 |
| zitadel-db | PostgreSQL 16 for Zitadel (internal, not exposed) | — |
| pvm-db | PostgreSQL 16 for PVM application data | 5432 |
| dragonfly | DragonflyDB (Redis-compatible cache) | 6379 |
Quick Start
# Copy env file and adjust if needed
cp .env.example .env
# Start all services
docker compose -f docker-compose.dev.yml up -d
# Check status
docker compose -f docker-compose.dev.yml ps
# View Zitadel logs (first startup takes ~30-60s)
docker compose -f docker-compose.dev.yml logs -f zitadel
Zitadel Admin Console
Once Zitadel finishes initializing (watch the logs for "server is listening"), open:
- Console URL: http://localhost:8080/ui/console
- Username:
admin - Password: value of
ZITADEL_ADMIN_PASSWORDin your.env(default:Admin1234!)
First-Time Zitadel Setup
After the first docker compose up, configure Zitadel for PVM:
- Log in to the admin console at http://localhost:8080/ui/console
- Create a project called "PVM"
- Create an application within the project:
- Name: "PVM Web"
- Type: Web
- Auth method: PKCE (recommended for SvelteKit)
- Redirect URIs:
http://localhost:5173/auth/callback/zitadel - Post-logout URIs:
http://localhost:5173
- Note the Client ID — you'll need it for SvelteKit's
AUTH_ZITADEL_ID - (Optional) Configure social login providers under Settings > Identity Providers:
- Google, Apple, Facebook — each requires an OAuth app from the respective developer console
Connecting from the PVM Backend
# PostgreSQL (PVM app database)
DATABASE_URL=postgres://pvm:pvm-dev-password@localhost:5432/pvm
# DragonflyDB (Redis-compatible)
REDIS_URL=redis://localhost:6379
# Zitadel issuer (for OIDC/JWT validation)
ZITADEL_URL=http://localhost:8080
Stopping & Cleanup
# Stop services (data is preserved in volumes)
docker compose -f docker-compose.dev.yml down
# Stop and delete all data (fresh start)
docker compose -f docker-compose.dev.yml down -v