create-copycoder-auth

Next.js Supabase Auth Boilerplate

This is a boilerplate for Next.js applications with Supabase authentication. It includes a complete authentication flow with protected routes and middleware.

Features

• 🔐 Authentication with Supabase
• 🛡️ Protected routes with middleware
• 🎨 Styled with Tailwind CSS
• 📱 Responsive design
• 🔄 Type-safe with TypeScript

Getting Started

1. Clone this repository

2. Install dependencies:

   npm install

3. Create a Supabase project at https://supabase.com

4. Copy .env.local.example to .env.local and update with your Supabase credentials:

   cp .env.local.example .env.local

5. Update the environment variables in .env.local:

   NEXT_PUBLIC_SUPABASE_URL=your-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   

6. Run the development server:

   npm run dev

7. Open http://localhost:3000 with your browser to see the result.

Project Structure

• /app - Next.js 13 app directory
  • /auth - Authentication pages (login, callback)
  • /dashboard - Protected dashboard page
• /lib - Utility functions and configurations
  • supabase.ts - Supabase client configuration

Authentication Flow

1. Users can sign in/up through the /auth/login page
2. After successful authentication, they are redirected to /dashboard
3. Protected routes are handled by the middleware
4. Unauthenticated users are redirected to the login page
5. Authenticated users are redirected away from auth pages

Technologies Used

• Next.js 13
• Supabase
• Tailwind CSS
• TypeScript