Next.js + Supabase Profile Management Starter

A modern starter template for building authenticated user profile management apps with Next.js 15+, Supabase, TypeScript, Tailwind and Zod.

Tech Stack:

• Next.js 15, for the frontend
• Supabase, for the backend
• TypeScript, for type safety
• Tailwind CSS, for styling
• Zod, for validation

Features:

• Full authentication
  • User signup
    • with password (uses server action)
    • with magic link (uses server route)
  • User login
    • with password (uses server action)
    • with magic link (uses server route)
  • Email verification (uses server route)
  • Password recovery (uses server route)
  • Password change (uses server action)
• User profile management (username, full name, avatar, website)
• Protected routes via middleware (anything under /profile requires authentication)
• Zod validation and robust error handling

---

Getting Started

1. Install dependencies:

   yarn install
   # or
   npm install
   # or
   pnpm install
   # or
   bun install

2. Create an initialize your Supabase project:

   • Go to Supabase
   • Create a new project
   • Run the migration file present in the supabase/migrations directory using the SQL Editor

3. Create your environment file:

   Copy the following template into a new file called .env.local in the root of your project, and fill in your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
   NEXT_PUBLIC_SITE_URL=your-site-url

   • NEXT_PUBLIC_SUPABASE_URL: The URL of your Supabase project (from the Supabase dashboard, under Project Settings > Data API)
   • NEXT_PUBLIC_SUPABASE_ANON_KEY: The public anon key for client-side access (from the Supabase dashboard, under Project Settings > API Keys)
   • NEXT_PUBLIC_SITE_URL: The URL of your site for redirecting after authentication (e.g. https://localhost:3000 for local development)

4. Run the development server:

   yarn dev
   # or
   npm run dev
   # or
   pnpm dev
   # or
   bun dev