TanStack Start + Supabase Auth

A production-ready starter template combining TanStack Start (React SSR framework) with Supabase Auth.

Includes email/password authentication, protected routes, user profiles, password reset flow, shadcn/ui components, Tailwind CSS v4, Biome linting, Vitest, GitHub Actions CI/CD, and Vercel deployment config.

reacttypescripttanstack-starttanstack-routersupabasesupabase-authauthenticationprotected-routesshadcn-uitailwindcssvitessrbiomevitestgithub-actionscicdvercelstarter-templateboilerplate
DashboardGitHub

Supabase Auth

Email/password authentication with sign-up, login, password reset, and protected routes out of the box.

TanStack Start

Full-stack React framework with file-based routing, SSR, and type-safe navigation.

shadcn/ui

Beautiful, accessible components built with Radix UI and Tailwind CSS. Ready to customize.

Protected Routes

Auth guard layout with automatic redirects. Uses TanStack Router's beforeLoad hook for server-side checks.

GitHub Actions CI/CD

Automated pipeline with type checking, linting, and tests on every PR. Vercel deployment included.

Production Ready

Biome linting, Vitest testing, Husky pre-commit hooks, and Vercel deployment config out of the box.

See all features in detail

What's Included

  • •TanStack Start — Full-stack React with file-based routing and SSR
  • •Supabase Auth — Email/password authentication
  • •Protected routes — Auth guard layout with redirect
  • •shadcn/ui — Pre-configured Radix UI components
  • •Tailwind CSS v4 — Utility-first styling
  • •Biome — Linting and formatting
  • •Vitest — Testing framework
  • •CI/CD — GitHub Actions for checks and deployment
  • •Husky — Pre-commit hooks

Routes

RouteDescription
/Landing page
/loginSign in / sign up
/logoutSigns out and redirects to /
/forgot-passwordRequest a password reset email
/reset-passwordSet a new password (via email link)
/aboutAbout this project
/featuresFeatures overview
/dashboardProtected — requires authentication otherwise redirects to /login

Key Files

FilePurpose
src/routes/__root.tsxRoot layout with AuthProvider and Header
src/routes/_authenticated.tsxAuth guard layout for protected routes
src/routes/_authenticated/dashboard.tsxExample protected page
src/context/AuthContext.tsxReact context for auth state
src/utils/supabase.tsSupabase client singleton

Quick Start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start local Supabase (requires Docker)

    npm run db:start
  3. 3

    Copy environment files

    cp .env.example .env && cp .env.local.example .env.local
  4. 4

    Reset database, generate types, and seed

    npm run db:reset
  5. 5

    Start dev server

    npm run dev

Learn More

TanStack StartSupabase Docsshadcn/ui