Svelte Supabase Starter

A production-ready starter template built with SvelteKit, Supabase, shadcn/svelte, and Tailwind CSS v4.

Features

• Authentication — Email/password sign-up & sign-in, GitHub OAuth, forgot/reset password, email verification resend
• Session Management — Secure server-side JWT validation via safeGetSession(), cookie-based SSR with @supabase/ssr
• Route Protection — Hooks-based auth guard + layout-level redirects for protected and public routes
• UI Components — 22+ shadcn/svelte components (data table, sidebar, charts, drawers, dropdowns, and more)
• Dashboard — Sample dashboard with interactive charts, drag-and-drop data table, and section cards
• Database — Profiles table migration with RLS policies and auto-profile creation trigger
• Type Safety — Full TypeScript with typed Supabase client (SupabaseClient<Database>) and Zod schema validation
• CSRF Protection — Origin-based CSRF middleware for mutation endpoints

Tech Stack

Layer	Technology
Framework	SvelteKit + Svelte 5
Auth & Database	Supabase (@supabase/ssr, @supabase/supabase-js)
Styling	Tailwind CSS v4
UI Components	shadcn/svelte (bits-ui, vaul-svelte, svelte-sonner)
Charts	LayerChart + D3
Data Table	TanStack Table + DND Kit
Validation	Zod
Icons	Tabler Icons, Lucide

Getting Started

Prerequisites

• Node.js 18+
• A Supabase project (or use the local dev setup below)

Installation

1. Clone and install:

git clone <repo-url> && cd svelte-supabase
npm install

2. Configure environment:

cp .env.example .env

Fill in your Supabase project URL and publishable key from your Supabase dashboard.

3. Run the migration:

Apply the profiles table migration to your Supabase project via the SQL editor or the Supabase CLI:

npx supabase db push

4. Start developing:

npm run dev

Local Supabase Development

To run Supabase locally with Docker:

npx supabase start

This starts a local Supabase instance using the config in supabase/config.toml. The local dashboard is available at http://127.0.0.1:54323.

Project Structure

src/
├── hooks.server.ts              # Supabase client + auth guard
├── app.d.ts                     # Global type definitions
├── lib/
│   ├── components/
│   │   ├── auth/                # Login, signup, forgot/reset password forms
│   │   ├── dashboard/           # Data table, charts, section cards
│   │   ├── layout/              # Sidebar, navigation, header
│   │   └── ui/                  # shadcn/svelte components
│   ├── schemas/                 # Zod validation schemas
│   ├── types/
│   │   └── database.ts          # Supabase Database type (generated)
│   ├── utils/
│   │   └── csrf.ts              # CSRF protection
│   └── utils.ts                 # Tailwind class merge helpers
├── routes/
│   ├── (app)/                   # Protected routes (requires auth)
│   │   ├── dashboard/           # Dashboard page
│   │   └── sign-out/            # Sign-out action
│   ├── (auth)/                  # Public auth routes
│   │   ├── sign-in/             # Login page
│   │   ├── sign-up/             # Registration page
│   │   ├── forgot-password/     # Password reset request
│   │   ├── reset-password/      # New password form
│   │   └── auth/                # Callback, confirm, error endpoints
│   ├── +layout.svelte           # Root layout (auth listener, toaster)
│   ├── +layout.server.ts        # Session hydration
│   ├── +layout.ts               # Browser/server Supabase client
│   └── +error.svelte            # Global error page
supabase/
├── config.toml                  # Local dev configuration
├── migrations/                  # Database migrations
│   └── 00000000000000_init.sql  # Profiles table + RLS + trigger
└── seed.sql                     # Seed data placeholder

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run check	Type-check with svelte-check
npm run db:types	Generate TypeScript types from Supabase schema

GitHub OAuth Setup

1. Create a GitHub OAuth app at github.com/settings/developers
2. Set the callback URL to https://<your-project-ref>.supabase.co/auth/v1/callback
3. Add the client ID and secret to your Supabase dashboard under Auth > Providers > GitHub
4. For local development, set them in your .env and supabase/config.toml

Deployment

This template uses @sveltejs/adapter-auto which automatically selects the right adapter for your deployment target (Vercel, Netlify, Cloudflare, etc.).

npm run build

Make sure to set PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_PUBLISHABLE_KEY as environment variables in your hosting platform.