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 驱动的会话管理流程，并避免常见反模式，例如在服务器组件中调用 `getSession()` 或在不使用监听器的情况下在客户端管理认证状态。通过本技能，开发者可以高效地设置认证中间件来保护路由、刷新会话，并处理 OAuth 回调，确保安全、现代且可维护的认证架构。

兼容平台✓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 客户端

认证中间件

在中间件中保护路由并刷新会话

认证回调路由

处理 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