Skip to main content
affpapa.org
RU EN
skill

nextjs-supabase-auth · davila7 — Claude Code skill for Supabase Auth

Guides the agent through Supabase Auth in Next.js App Router: middleware, OAuth callback, protected routes and cookie-based sessions.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/nextjs-supabase-auth
Open on GitHub

What nextjs-supabase-auth does

This skill sets the boundaries for auth work in App Router projects. The agent keeps track of the server/client split: where a session gets read, where it gets refreshed, what must stay out of the browser. Middleware, Server Components, Client Components and Server Actions each get their own treatment.

Three patterns are covered. Configuring Supabase clients for different contexts. Middleware that guards routes and refreshes the session. A callback route that trades an OAuth code for a session. The skill also lists anti-patterns, among them calling getSession inside Server Components and keeping tokens by hand.

It builds on @supabase/ssr and cookie sessions, so a project still on @supabase/auth-helpers will need its dependencies reworked first. Pairs with the nextjs-app-router and supabase-backend skills.

What it helps with

  • guard routes in middleware without dropping the session
  • exchange an OAuth code for a session in the callback route
  • separate Supabase clients for server and browser
  • drop getSession calls from Server Components
  • stop storing tokens manually

Example prompts for the agent

  • Wire up Supabase login in App Router with @supabase/ssr
  • Add middleware that refreshes the session and blocks private routes
  • Create a callback route that turns an OAuth code into a session

How to install nextjs-supabase-auth

1claude-code-templates

npx claude-code-templates@latest --skill development/nextjs-supabase-auth

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill nextjs-supabase-auth -a claude-code

3Manually: put the files in place

~/.claude/skills/nextjs-supabase-auth/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nextjs-supabase-auth/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nextjs-supabase-auth

How do I install nextjs-supabase-auth in Claude Code?

With the templates CLI: npx claude-code-templates@latest --skill development/nextjs-supabase-auth. Or through the skills CLI: npx skills add davila7/claude-code-templates --skill nextjs-supabase-auth -a claude-code.

What does nextjs-supabase-auth do?

It steers the agent through Supabase Auth in Next.js App Router: client setup, middleware, the OAuth callback and protected routes.

What do I need before using it?

A Next.js App Router project and a Supabase backend. The integration relies on @supabase/ssr and cookie sessions.

Similar skills

All skills for Backend and APIs →

nextjs-supabase-auth by other authors comes first.

nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. CX Codex +1 6,600installs mcp-builder official anthropics This skill walks through building an MCP server in TypeScript or Python, from reading the protocol spec to writing tests and evaluation questions. 130,949installs claude-api official anthropics Reference skill for the Claude API and Anthropic SDK that enforces valid model IDs, adaptive thinking, and streaming. 74,198installs lark-im larksuite This skill lets an agent work with Lark IM messages, chats, files, and interactive cards. Use it when coding tasks need access to team conversations. CX Codex +1 472,900installs lark-event larksuite Listens to Lark/Feishu events and streams them as NDJSON. Use it for bots, message processing, and long-running subscribers. CX Codex +1 466,800installs caveman-discover JuliusBrussee Finds and labels every LLM workflow in your repository so Caveman Cloud breaks down spend by actual job rather than grouping everything into one bucket. CX Codex +1 104,400installs migration JuliusBrussee Enforces reversible, compatibility-safe transitions for schema, data, and API updates. Useful whenever data loss or rollout downtime is unacceptable. CX Codex +1 103,900installs

From the same set238

The whole set →
performance-budget-guard A Claude hook that measures your Next.js JS bundle after a build and blocks the deploy when it goes over the performance budget. 393installs memory-spring-cleaning Walks through CLAUDE.md and markdown docs, checks the rules written there against the actual code, and drops what no longer holds. 391installs interactive-documentation A slash command that builds documentation with runnable code examples, playgrounds and API testing. Useful once a plain README stops being enough. 372installs agents-crewai A Claude skill for assembling teams of autonomous agents with roles, memory, and sequential or hierarchical task execution. 371installs testing-patterns A Claude skill that hands the agent Jest testing patterns: data factories, module mocks and the red-green-refactor loop. 365installs code-review-checklist A skill that walks a reviewer through context, functionality, quality, security, performance and tests. Useful on pull requests and audits. 365installs vercel-environment-sync A hook that inspects environment variables after an .env edit and points you to the right Vercel sync commands. Useful when local and deployed values drift apart. 363installs log Writes a finished task's report into your tracker or notes: time spent, status, commits. Useful when the coding happens in Claude but the record lives in Linear or Obsidian. 351installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor