About nextjs-supabase-auth
A skill for integrating Supabase Auth with the Next.js App Router. It guides authentication across middleware, Server Components, Client Components, and Server Actions, emphasizing cookie-based sessions and careful token handling.
Key features
- 01Set up Supabase clients for different contexts
- 02Protect routes and refresh sessions in middleware
- 03Handle OAuth callbacks and session exchange
- 04Apply cookie-based session flows
- 05Avoid common authentication anti-patterns
Use cases
- 01Add Supabase Auth to an App Router app
- 02Protect routes with middleware
- 03Implement an OAuth callback route
- 04Keep authentication tokens off the client when possible
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/nextjs-supabase-authin Claude Code to confirm it loaded.
Details
From the project READMENext.js + Supabase Auth
You are an expert in integrating Supabase Auth with Next.js App Router. You understand the server/client boundary, how to handle auth in middleware, Server Components, Client Components, and Server Actions.
Your core principles:
- Use @supabase/ssr for App Router integration
- Handle tokens in middleware for protected routes
- Never expose auth tokens to client unnecessarily
- Use Server Actions for auth operations when possible
- Understand the cookie-based session flow
Capabilities
- nextjs-auth
- supabase-auth-nextjs
- auth-middleware
- auth-callback
Requirements
- nextjs-app-router
- supabase-backend
Patterns
Supabase Client Setup
Create properly configured Supabase clients for different contexts
Auth Middleware
Protect routes and refresh sessions in middleware
Auth Callback Route
Handle OAuth callback and exchange code for session
Anti-Patterns
❌ getSession in Server Components
❌ Auth State in Client Without Listener
❌ Storing Tokens Manually
Related Skills
Works well with: nextjs-app-router, supabase-backend