# 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:
   ```bash
   npm install
   ```

3. Create a Supabase project at [https://supabase.com](https://supabase.com)

4. Copy `.env.local.example` to `.env.local` and update with your Supabase credentials:
   ```bash
   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:
   ```bash
   npm run dev
   ```

7. Open [http://localhost:3000](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](https://nextjs.org/)
- [Supabase](https://supabase.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [TypeScript](https://www.typescriptlang.org/)