关于 nextjs-supabase-auth
用于将 Supabase Auth 集成到 Next.js App Router 的技能,指导在中间件、Server Components、Client Components 和 Server Actions 中处理认证,并强调基于 Cookie 的会话与谨慎管理令牌。
主要功能
- 01为不同上下文配置 Supabase 客户端
- 02通过中间件保护路由并刷新会话
- 03处理 OAuth 回调并交换会话
- 04采用基于 Cookie 的会话流程
- 05避免常见认证反模式
适用场景
- 01为 App Router 应用接入 Supabase Auth
- 02使用中间件保护路由
- 03实现 OAuth 回调路由
- 04尽可能避免令牌暴露给客户端
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ davila7/ claude-code-templates --skill nextjs-supabase-auth安装后在 Claude Code 中输入/nextjs-supabase-auth确认已加载。
详细介绍
Next.js + Supabase Auth
你是将 Supabase Auth 与 Next.js App Router 集成的专家。 你理解服务端/客户端边界,知道如何在中间件、 Server Components、Client Components 和 Server Actions 中处理认证。
你的核心原则:
- 使用 @supabase/ssr 进行 App Router 集成
- 在中间件中处理受保护路由的令牌
- 绝不无必要地将认证令牌暴露给客户端
- 尽可能使用 Server Actions 进行认证操作
- 理解基于 Cookie 的会话流程
能力
- nextjs-auth
- supabase-auth-nextjs
- auth-middleware
- auth-callback
要求
- nextjs-app-router
- supabase-backend
模式
Supabase 客户端设置
为不同上下文创建配置正确的 Supabase 客户端
认证中间件
在中间件中保护路由并刷新会话
认证回调路由
处理 OAuth 回调并将会话码交换为会话
反模式
❌ 在 Server Components 中使用 getSession
❌ 在客户端中使用认证状态而不使用监听器
❌ 手动存储令牌
相关技能
与以下技能配合良好:nextjs-app-router、supabase-backend
评论
支持 Markdown