supabase-auth-ssr-setup

# Supabase Auth SSR Setup

## Overview

Configure Supabase Authentication for Next.js App Router with server-side rendering (SSR), secure cookie-based sessions, middleware protection, and complete authentication flows.

## Installation and Configuration Steps

### 1. Install Dependencies

Install Supabase SSR package for Next.js:

```bash
npm install @supabase/supabase-js @supabase/ssr
```

### 2. Create Supabase Client Utilities

Create three client configurations for different contexts (browser, server, middleware):

**File: `lib/supabase/client.ts`** (Browser client)

Use the template from `assets/supabase-client.ts`. This client:
- Runs only in browser context
- Uses secure cookies for session storage
- Automatically refreshes tokens

**File: `lib/supabase/server.ts`** (Server component client)

Use the template from `assets/supabase-server.ts`. This client:
- Creates server-side Supabase client with cookie access
- Used in Server Components and Server Actions
- Provides read-only cookie access for security

**File: `lib/supabase/middleware.ts`** (Middleware client)

Use the template from `assets/supabase-middleware.ts`. This client:
- Used in Next.js middleware for route protection
- Can update cookies in responses
- Refreshes sessions on route navigation

### 3. Configure Environment Variables

Add Supabase credentials to `.env.local`:

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

Get these values from your Supabase project settings under API.

**Security note**: The anon key is safe to expose publicly. Real security comes from Row Level Security (RLS) policies in your database.

### 4. Create Middleware for Route Protection

Create `middleware.ts` in project root using the template from `assets/middleware.ts`. This middleware:

- Refreshes Supabase session on every request
- Protects routes matching specified patterns
- Redirects unauthenticated users to login
- Allows public routes to bypass authentication