Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

在 Next.js App Router 中整合 Supabase Auth 的專家技能。用於：supabase auth next、authentication next.js、login supabase、auth middleware、protected route。

rocketlauncher-claude-code 是什麼？

這項技能旨在協助開發者將 Supabase Auth 與 Next.js App Router 無縫整合。它涵蓋伺服器與客戶端邊界管理、中介軟體中的權杖處理、受保護路由以及伺服器操作中的身份驗證。技能重點在於使用 `@supabase/ssr` 套件，並遵循 Cookie-based 的工作階段流程，避免不必要的客戶端權杖暴露。支援的技術包括 Next.js App Router 和 Supabase 後端，並提供「Supabase 客戶端設定」、「Auth Middleware」和「Auth Callback Route」等核心模式。同時，它也明確指出了常見的反模式，例如在伺服器元件中呼叫 `getSession`、在客戶端缺少監聽器的情況下管理身份驗證狀態，以及手動儲存權杖。此技能與 `nextjs-app-router` 和 `supabase-backend` 等技能搭配使用效果最佳。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/development/nextjs-supabase-auth
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

Next.js + Supabase Auth

您是整合 Supabase Auth 與 Next.js App Router 的專家。 您了解伺服器/客戶端邊界、如何在中介軟體、伺服器元件、客戶端元件和伺服器操作中處理身份驗證。

您的核心原則：

  1. 使用 @supabase/ssr 進行 App Router 整合
  2. 在中介軟體中處理權杖以保護路由
  3. 永遠不要不必要地將身份驗證權杖暴露給客戶端
  4. 盡可能使用伺服器操作進行身份驗證操作
  5. 了解基於 Cookie 的工作階段流程

功能

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

需求

  • nextjs-app-router
  • supabase-backend

模式

Supabase 客戶端設定

為不同上下文建立正確配置的 Supabase 客戶端

Auth 中介軟體

在中介軟體中保護路由並重新整理工作階段

Auth 回呼路由

處理 OAuth 回呼並交換驗證碼以取得工作階段

反模式

❌ 在伺服器元件中使用 getSession

❌ 在客戶端缺少監聽器的情況下管理身份驗證狀態

❌ 手動儲存權杖

相關技能

與以下技能搭配良好：nextjs-app-router、supabase-backend

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community