SV Starter

An opinionated SvelteKit 2 + Svelte 5 starter for Firebase-authenticated apps. Includes production-ready auth flows, shadcn-svelte UI, Tailwind CSS v4, and server-side sessions synced with Firebase.

Highlights

• Email/password + Google auth (signup, login, reset, verification)
• Secure session cookies via /api/auth/login & /api/auth/logout, protected routes in src/hooks.server.ts
• Firestore users/{uid} profiles hydrating userProfile store
• shadcn-svelte components in lib/components/ui (add more via CLI)
• Tailwind CSS v4 tokens in src/app.css with dark-mode defaults
• Linting, formatting, type-checking, and svelte-package tooling

Tech stack

Quick start

1. Prerequisites: Node.js 20+ and npm 10+
2. Clone & install:

   git clone <repo-url> sv-starter
   cd sv-starter
   npm install
   

3. Setup environment:

   cp env.example .env
   

4. Configure Firebase (see below) and fill .env
5. Run: npm run dev -- --open

Environment variables

Client (VITE_ prefix) and server secrets:

Never commit .env. Use secrets in CI/CD.

Firebase configuration

1. Create Firebase project and add Web App
2. Enable auth providers (Build → Authentication):
   • Email/Password
   • Google (authorize http://localhost:5173 and production domains)
3. Create Firestore database (Native mode). Stores users/{uid} with { uid, email, firstName, lastName, emailVerified, createdAt, updatedAt }
4. Generate service account (Project settings → Service accounts → Generate new private key), copy to .env
5. (Optional) Harden Firestore rules:

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /users/{userId} {
         allow read, write: if request.auth != null && request.auth.uid == userId;
       }
     }
   }
   

Scripts

Export modules from src/lib/index.ts before prepack if publishing.

Architecture

Routes

Routes protected in src/hooks.server.ts: verifies session cookie, stores claims on event.locals.user, redirects unverified/unauthenticated users.

Auth flow

1. Forms call src/lib/firebase/auth.ts helpers
2. ensureServerSession POSTs to /api/auth/login after Firebase auth
3. Server verifies ID token, sets 5-day session cookie, upserts Firestore profile
4. src/hooks.server.ts reads cookie for SSR-aware auth
5. Protected layouts (src/routes/app/+layout.server.ts) fetch Firestore profile, expose via userProfile store

UI & utilities

• shadcn-svelte: Preconfigured via components.json, add components with npx shadcn-svelte@latest add <component>
• Theming: CSS variables in src/app.css
• Auth blocks: src/lib/components/blocks/auth (forms, validation, loading states)
• Stores: src/lib/stores/userStore.ts (userProfile + loading)
• Utils: bodyClassUpdater.ts (body classes), firebase-admin.ts (Admin SDK init)

Extending

• Add pages under src/routes/app/... (auth context provided by +layout)
• Add shadcn-svelte components via CLI

Deployment

Uses @sveltejs/adapter-auto. Choose adapter for your host (adapter-node, adapter-vercel, adapter-cloudflare, etc.). Configure Firebase secrets in hosting environment, ensure HTTPS-only cookies in production.