nextjs-supabase-auth
在 Next.js App Router 中实现 Supabase 身份验证
在 Next.js 中构建身份验证需要理解服务器和客户端边界。本技能提供经过验证的模式，用于将 Supabase Auth 安全地集成到 App Router 架构中。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“nextjs-supabase-auth”。 为 Next.js App Router 设置 Supabase 身份验证中间件
预期结果:
- 在项目根目录创建 middleware.ts
- 从 @supabase/ssr 导入 createServerClient
- 使用环境变量中的 SUPABASE_URL 和 SUPABASE_ANON_KEY 配置客户端
- 为需要身份验证保护的路由添加匹配器
- 在会话过期时处理令牌刷新
- 在受保护路由上身份验证检查失败时重定向到登录页面
正在使用“nextjs-supabase-auth”。 如何在 Server Components 中处理身份验证？
预期结果:
- 使用 createServerClient 实例化 Supabase 客户端
- 调用 getUser() 验证当前会话
- 将用户数据作为 props 传递给子组件
- 避免在 Server Components 中直接调用 getSession()
- 让中间件处理受保护路由的会话验证
安全审计
安全Static analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.
质量评分
你能构建什么
全栈开发人员构建 SaaS 应用程序
使用 Supabase 作为后端，为 Next.js SaaS 产品实现安全的用户身份验证，包括电子邮件和 OAuth 提供程序。
从 Pages Router 迁移到 App Router 的团队
重构现有的 Supabase 身份验证实现，使其适用于 Next.js App Router 服务器组件和中间件架构。
开发人员向现有应用添加身份验证
将身份验证集成到具有 Supabase 后端的现有 Next.js 应用程序中，从一开始就遵循安全最佳实践。
试试这些提示
帮助我为 Next.js App Router 项目设置 Supabase 客户端配置。我需要为服务器组件、客户端组件和中间件分别使用 @supabase/ssr 创建客户端。
创建中间件以保护 /dashboard 下的路由，并将未身份验证的用户重定向到 /login。包含针对过期令牌的会话刷新逻辑。
构建 OAuth 回调路由处理器，将授权代码交换为 Supabase 会话，并在成功身份验证后将用户重定向到相应的页面。
使用 Server Actions 实现完整的身份验证流程，包括登录、注册和注销。包含适当的错误处理、表单验证，以及在不向客户端公开凭据的情况下进行安全的令牌管理。
最佳实践
- 使用专门为 Next.js App Router 服务器/客户端边界设计的 @supabase/ssr 包
- 在中间件中处理身份验证以在渲染前保护路由，并透明地管理会话刷新
- 使用 @supabase/ssr 自动管理的 cookie 存储令牌，而不是手动处理令牌存储
避免
- 在 Server Components 中直接调用 getSession() 而不是使用中间件进行路由保护
- 在客户端组件中管理身份验证状态而未实现适当的身份验证状态更改监听器
- 在 @supabase/ssr 提供自动基于 cookie 的会话管理时手动存储或处理 JWT 令牌