关于 clerk-auth
clerk-auth 是介绍 Clerk 身份验证模式的技能,适用于 Next.js 14/15 App Router。内容涵盖 Provider 配置、路由保护,以及在 Server Components 中读取身份验证状态。
主要功能
- 01配置 Next.js App Router
- 02设置 ClerkProvider
- 03使用中间件保护路由
- 04Server Components 身份验证
- 05读取用户和会话数据
适用场景
- 01为 Next.js 应用添加登录和注册
- 02通过中间件保护路由组
- 03在 Server Components 中读取身份验证状态
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ davila7/ claude-code-templates --skill clerk-auth安装后在 Claude Code 中输入/clerk-auth确认已加载。
详细介绍
Clerk 身份验证
模式
Next.js App Router 设置
适用于 Next.js 14/15 App Router 的完整 Clerk 设置。
包括 ClerkProvider、环境变量以及基本的 登录/注册组件。
关键组件:
- ClerkProvider:为应用提供身份验证上下文
- 、:预构建的身份验证表单
- :包含会话管理功能的用户菜单
中间件路由保护
使用 clerkMiddleware 和 createRouteMatcher 保护路由。
最佳实践:
- 在项目根目录放置单个 middleware.ts 文件
- 使用 createRouteMatcher 匹配路由组
- 使用 auth.protect() 进行显式保护
- 在中间件中集中处理所有身份验证逻辑
服务器组件身份验证
使用 auth() 和 currentUser() 在服务器组件中访问身份验证状态。
关键函数:
- auth():返回 userId、sessionId、orgId、claims
- currentUser():返回完整的 User 对象
- 两者都要求已配置 clerkMiddleware
⚠️ 易踩问题
| 问题 | 严重程度 | 解决方案 |
|---|---|---|
| 问题 | 严重 | 参阅文档 |
| 问题 | 高 | 参阅文档 |
| 问题 | 高 | 参阅文档 |
| 问题 | 高 | 参阅文档 |
| 问题 | 中 | 参阅文档 |
| 问题 | 中 | 参阅文档 |
| 问题 | 中 | 参阅文档 |
| 问题 | 中 | 参阅文档 |
评论
支持 Markdown