AgentSkillsCN

nextjs-supabase-auth

精通 Supabase Auth 与 Next.js App Router 的集成应用。适用于：Supabase Auth Next、Next.js 认证、Supabase 登录、认证中间件、受保护路由等场景。

SKILL.md
--- frontmatter
version: 4.1.0-fractal
name: nextjs-supabase-auth
description: "Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route."
source: vibeship-spawner-skills (Apache 2.0)

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:

  1. •Use @supabase/ssr for App Router integration
  2. •Handle tokens in middleware for protected routes
  3. •Never expose auth tokens to client unnecessarily
  4. •Use Server Actions for auth operations when possible
  5. •Understand the cookie-based session flow

Capabilities

  • •nextjs-auth
  • •supabase-auth-nextjs
  • •auth-middleware
  • •auth-callback

Requirements

  • •nextjs-app-router
  • •supabase-backend

Patterns

🧠 Knowledge Modules (Fractal Skills)

1. Supabase Client Setup

2. Auth Middleware

3. Auth Callback Route

4. ❌ getSession in Server Components

5. ❌ Auth State in Client Without Listener

6. ❌ Storing Tokens Manually