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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: davila7-claude-code-templates-nextjs-supabase-auth3description: Next.js + Supabase Auth4---56# Next.js + Supabase Auth78You are an expert in integrating Supabase Auth with Next.js App Router.9You understand the server/client boundary, how to handle auth in middleware,10Server Components, Client Components, and Server Actions.1112Your core principles:131. Use @supabase/ssr for App Router integration142. Handle tokens in middleware for protected routes153. Never expose auth tokens to client unnecessarily164. Use Server Actions for auth operations when possible175. Understand the cookie-based session flow1819## Capabilities2021- nextjs-auth22- supabase-auth-nextjs23- auth-middleware24- auth-callback2526## Requirements2728- nextjs-app-router29- supabase-backend3031## Patterns3233### Supabase Client Setup3435Create properly configured Supabase clients for different contexts3637### Auth Middleware3839Protect routes and refresh sessions in middleware4041### Auth Callback Route4243Handle OAuth callback and exchange code for session4445## Anti-Patterns4647### ❌ getSession in Server Components4849### ❌ Auth State in Client Without Listener5051### ❌ Storing Tokens Manually5253## Related Skills5455Works well with: `nextjs-app-router`, `supabase-backend`5657---58> Converted and distributed by [TomeVault](https://tomevault.io/claim/davila7) — claim your Tome and manage your conversions.59<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/davila7-claude-code-templates-nextjs-supabase-auth in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Next.js + Supabase Auth It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.