Frontend
nextjs-supabase-auth▌
sickn33/antigravity-awesome-skills · updated Apr 8, 2026
$npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill nextjs-supabase-auth
summary
Supabase Auth integration for Next.js App Router with middleware-based session management.
- ›Handles server/client authentication boundaries using @supabase/ssr, protecting routes via middleware and managing cookie-based sessions
- ›Provides patterns for OAuth callbacks, Server Actions for auth operations, and proper token handling across Server and Client Components
- ›Includes anti-patterns to avoid: getSession in Server Components, unlistened client auth state, and manual token storage
skill.md
Next.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
When to Use
This skill is applicable to execute the workflow or actions described in the overview.