# nextjs-supabase-auth

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

- skill · `type=skill` · Claude Code · 367 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/nextjs-supabase-auth
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/nextjs-supabase-auth

## What it 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.

## Requirements
- Works with: Supabase

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/nextjs-supabase-auth
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill nextjs-supabase-auth -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/nextjs-supabase-auth/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nextjs-supabase-auth/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/nextjs-supabase-auth/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/nextjs-supabase-auth/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates nextjs-supabase-auth
```

2. **Manually: put the files in place**
- File: `.github/skills/nextjs-supabase-auth/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/nextjs-supabase-auth
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nextjs-supabase-auth/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/nextjs-supabase-auth

## When to use it
- 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
- 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

## Similar
- [mcp-builder](https://affpapa.org/en/nevibecode/skills/mcp-builder.md) — skill · 130949 installs
- [claude-api](https://affpapa.org/en/nevibecode/skills/claude-api.md) — skill · 74198 installs
- [lark-im](https://affpapa.org/en/nevibecode/skills/lark-im.md) — skill · 472900 installs
- [lark-event](https://affpapa.org/en/nevibecode/skills/lark-event.md) — skill · 466800 installs
- [caveman-discover](https://affpapa.org/en/nevibecode/skills/caveman-discover.md) — skill · 104400 installs
- [migration](https://affpapa.org/en/nevibecode/skills/migration.md) — skill · 103900 installs

## Other versions with the same name
- [nextjs-supabase-auth · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-nextjs-supabase-auth.md) — 6600 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 238 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md