auth-supabase-complete

Files (30)

• PROGRESS.md
• README.md
• SKILL.md
• 01-browser-auth.tsx · examples/
• 02-server-component-auth.tsx · examples/
• 03-api-route-auth.ts · examples/
• 04-admin-api-route.ts · examples/
• 05-middleware.ts · examples/
• 06-social-auth.tsx · examples/
• 07-profile-setup.tsx · examples/
• manifest.yaml
• package-lock.json
• package.json
• MIDDLEWARE_GUIDE.md · references/
• RLS_PATTERNS.md · references/
• auth.ts · src/
• client.ts · src/
• index.ts · src/
• require-auth.ts · src/
• route-matcher.ts · src/
• server.ts · src/
• auth.test.ts · tests/
• client.test.ts · tests/
• auth-flows.test.ts · tests/e2e/
• index.test.ts · tests/
• require-auth.test.ts · tests/
• route-matcher.test.ts · tests/
• server.test.ts · tests/
• tsconfig.json
• vitest.config.ts

SKILL.md (first lines)

# Auth Supabase Complete

Complete Supabase authentication patterns for Next.js applications with server-side rendering, Row Level Security, and production-ready examples.

## When to Use

Use this skill when building Next.js applications that need:
- User authentication (email/password + OAuth)
- Server-side auth with Next.js 14+ App Router
- Row Level Security (RLS) patterns
- Protected API routes with middleware
- Admin/role-based access control
- Session management in middleware
- Profile management

**Don't use this skill if:**
- You're using Next.js Pages Router (this uses App Router only)
- You need a different auth provider (not Supabase)
- You're building a simple static site without auth

## Stack

- Next.js 14+ (App Router)
- Supabase Auth + Database
- TypeScript (strict mode)
- @supabase/ssr (Server-Side Rendering)
- @supabase/supabase-js
- Vitest (testing)

## Quick Start

### 1. Install Dependencies

```bash
npm install @supabase/ssr @supabase/supabase-js
npm install -D @project-forge/auth-supabase-complete
```

### 2. Setup Environment Variables

```bash
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key  # For admin operations
```

### 3. Create Configuration

```typescript
// lib/config.ts
export const supabaseConfig = {
  supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
  supabaseAnonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
}
```

### 4. Use in Server Components

```typescript
import { getUser } from '@project-forge/auth-supabase-complete/auth'
import { supabaseConfig } from '@/lib/config'

export default async function DashboardPage() {
  const user = await getUser(supabaseConfig)

  if (!user) redirect('/auth/login')

  return <div>Welcome {user.email}</div>
}
```

### 5. Protect API Routes

```typescript
import { requireAuth } from '@project-forge/auth-supabase-complete/require-auth'
import { supabaseConfig } from '@/lib/config'

export async function GET(request: NextRequest) {
  const { user, error, supabase } = await requireAuth(supabaseConfig, request)

  if (error) return error  // 401 Unauthorized

  // Use authenticated supabase client with RLS
  const { data } = await supabase.from('posts').select('*')
  return NextResponse.json({ data })
}
```

## Key Features

### Three Server Clients

The skill provides three types of Supabase clients for different Next.js contexts:

1. **Server Component Client** - Uses `cookies()` from `next/headers`
```typescript
import { createClient } from '@project-forge/auth-supabase-complete/server'
const supabase = await createClient(config)
```

2. **Route Handler Client** - Uses `NextRequest` cookies
```typescript
import { createRouteHandlerClient } from '@project-forge/auth-supabase-complete/server'
const supabase = createRouteHandlerClient(config, request, response)
```

3. **Service Role Client** - Bypasses RLS for admin operations
```typescript
import { createServiceClient } from '@project-forge/auth-supabase-complete/server'
const supabase = createServiceClient(config)
```

### Auth Utilities

Five helper functions for common auth operations:

- `signOut(config, redirectUrl?)` - Sign out with redirect
- `getUser(config)` - Get current authenticated user
- `getProfile<T>(config, tableName?)` - Fetch user profile

From JimmyBlanquet/project-forge, MIT.

More from JimmyBlanquet/project-forge