Dashboard

Next.js Supabase Authentication Starter

A complete, production-ready authentication starter template built with Next.js 15, Supabase, Tailwind CSS, and Shadcn/ui. This project provides a solid foundation for building web applications with secure user authentication and modern UI components.

NEXTJS + SUPABASE AUTH - Complete authentication starter template with Next.js 15, Supabase, and modern UI components
๐Ÿš€ Get the Starter Template๐Ÿ“– Try the Demo

โœจ Features

๐Ÿ” Complete Authentication Flow

  • User registration with email verification
  • Secure login/logout functionality
  • Password reset and recovery
  • Protected route middleware
  • Session management

๏ฟฝ๏ฟฝ Modern UI/UX

  • Beautiful, responsive design with Tailwind CSS
  • Supabase UI - Official React components built on shadcn/ui
  • Shadcn/ui components for consistent styling
  • Toast notifications with Sonner
  • Dark/light theme support
  • Mobile-first responsive design

๐Ÿš€ Next.js 15 Features

  • App Router with TypeScript
  • Server-side rendering (SSR)
  • Middleware for route protection
  • Turbopack for fast development

๐Ÿ”’ Security & Best Practices

  • Supabase authentication with SSR support
  • Environment variable management
  • Type-safe development
  • ESLint configuration

๐Ÿ—๏ธ Project Structure

nextjs-supabase-v1/
โ”œโ”€โ”€ app/                          # Next.js App Router
โ”‚   โ”œโ”€โ”€ (public)/                # Public routes
โ”‚   โ”œโ”€โ”€ auth/                    # Authentication pages
โ”‚   โ”‚   โ”œโ”€โ”€ actions/            # Auth server actions
โ”‚   โ”‚   โ”œโ”€โ”€ components/         # Auth UI components
โ”‚   โ”‚   โ”œโ”€โ”€ login/              # Login page
โ”‚   โ”‚   โ”œโ”€โ”€ sign-up/            # Registration page
โ”‚   โ”‚   โ”œโ”€โ”€ forgot-password/    # Password reset
โ”‚   โ”‚   โ””โ”€โ”€ ...                 # Other auth flows
โ”‚   โ”œโ”€โ”€ dashboard/               # Protected dashboard
โ”‚   โ”œโ”€โ”€ protected/               # Protected routes
โ”‚   โ””โ”€โ”€ layout.tsx              # Root layout
โ”œโ”€โ”€ components/                   # Reusable UI components
โ”‚   โ””โ”€โ”€ ui/                     # Shadcn/ui components
โ”œโ”€โ”€ lib/                         # Utility libraries
โ”‚   โ””โ”€โ”€ supabase/               # Supabase configuration
โ”œโ”€โ”€ middleware.ts                # Route protection middleware
โ””โ”€โ”€ types/                       # TypeScript type definitions

๐Ÿš€ Quick Start

Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm
  • Supabase account and project

1. Clone the Repository

git clone <your-repo-url>
cd nextjs-supabase-v1

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Set Up Supabase

  1. Create a new project at supabase.com
  2. Go to Settings โ†’ API to get your project credentials
  3. Create a .env file in the root directory (rename from .env.local if needed):
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

4. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser to see the application.

๐Ÿ”ง Available Scripts

  • npm run dev - Start development server with Turbopack
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint

๐ŸŽฏ Authentication Features

User Registration

  • Email-based signup with verification
  • Form validation and error handling
  • Success/error notifications

User Login

  • Secure authentication with Supabase
  • Session persistence
  • Automatic redirects

Password Management

  • Forgot password functionality
  • Secure password reset via email
  • Password update for authenticated users

Route Protection

  • Middleware-based authentication checks
  • Automatic redirects for unauthenticated users
  • Protected dashboard and routes

๐ŸŽจ UI Components

This project uses the official Supabase UI library built on top of Shadcn/ui and Radix UI primitives. Supabase UI provides pre-built components that seamlessly connect your frontend to your Supabase backend.

Why Supabase UI?

  • ๐Ÿš€ Official Integration - Built and maintained by the Supabase team
  • ๐Ÿ”— Backend Connected - Components automatically connect to your Supabase project
  • ๐ŸŽฏ Production Ready - Battle-tested components used in real applications
  • ๐Ÿ“ฑ Responsive Design - Mobile-first components with modern UX patterns

Available Supabase UI Blocks:

  • Authentication (Password-based & Social)
  • File uploads and management
  • Realtime features (cursors, chat, avatars)
  • Infinite queries and data fetching
  • User management and profiles

Shadcn/ui Components:

  • Button - Various button styles and variants
  • Card - Content containers with consistent styling
  • Dialog - Modal dialogs and overlays
  • Input - Form input fields
  • Label - Accessible form labels
  • Badge - Status indicators and tags
  • Toast - Notification system with Sonner

๐Ÿ”’ Security Features

  • Supabase SSR - Server-side rendering support for authentication
  • Middleware Protection - Route-level security with automatic redirects
  • Environment Variables - Secure credential management
  • Type Safety - Full TypeScript support for better development experience

๐Ÿš€ Deployment

Vercel (Recommended)

  1. Push your code to GitHub
  2. Connect your repository to Vercel
  3. Add environment variables in Vercel dashboard
  4. Deploy automatically on push

Other Platforms

The project can be deployed to any platform that supports Next.js:

  • Netlify
  • Railway
  • DigitalOcean App Platform
  • AWS Amplify

๐Ÿ“ฑ Responsive Design

  • Mobile-first approach
  • Responsive breakpoints for all screen sizes
  • Touch-friendly interface elements
  • Optimized for both desktop and mobile devices

๐ŸŽจ Customization

Styling

  • Modify app/globals.css for global styles
  • Update Tailwind configuration in tailwind.config.js
  • Customize component themes in components.json

Components

  • Add new Shadcn/ui components: npx shadcn@latest add [component]
  • Modify existing components in components/ui/
  • Create custom components in components/

Authentication

  • Extend auth flows in app/auth/
  • Modify middleware behavior in middleware.ts
  • Add custom Supabase functions in lib/supabase/

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

๐Ÿ“„ License

This project is open source and available under the MIT License.

๐Ÿ†˜ Support

If you encounter any issues or have questions:

  1. Check the Supabase documentation
  2. Review Next.js documentation
  3. Open an issue in this repository

๐Ÿ™ Acknowledgments

Happy coding! ๐Ÿš€