This skill should be used when configuring Supabase Auth for server-side rendering with Next.js App Router, including secure cookie handling, middleware protection, route guards, authentication utilities, and logout flow. Apply when setting up SSR auth, adding protected routes, implementing middleware authentication, configuring secure sessions, or building login/logout flows with Supabase.
Installation
npx claude-plugins install @hopeoverture/worldbuilding-app-skills/supabase-auth-ssr-setup
Contents
Folders: skills
Included Skills
This plugin includes 1 skill definition:
supabase-auth-ssr-setup
This skill should be used when configuring Supabase Auth for server-side rendering with Next.js App Router, including secure cookie handling, middleware protection, route guards, authentication utilities, and logout flow. Apply when setting up SSR auth, adding protected routes, implementing middleware authentication, configuring secure sessions, or building login/logout flows with Supabase.
View skill definition
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:
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:
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
Get these values from your Supabase p