SuperAPI AI 工具集

moai-platform-clerk

安全与审计

查看项目

更新于 10-16 10:59

技能介绍

用途

本技能定位为 Clerk 现代身份认证专家,用于在应用中实现现代认证与良好用户体验,主要覆盖 WebAuthn、通行密钥(passkeys)、无密码流程、预置 UI 组件以及多租户组织支持。适用于需要使用现代认证方式的开发场景。

主要能力

  • WebAuthn 与通行密钥(passkeys)
  • 无密码(passwordless)认证流程
  • 预置的认证 UI 组件
  • 多租户组织(organization)支持
  • 路由保护、服务端认证、组织切换等实现模式

SDK 版本与运行要求

资料给出的 SDK 版本(截至 2025 年 12 月):

  • @clerk/nextjs 6.x(Core 2),要求 Next.js 13.0.4 或更高版本,React 18 或更高版本
  • @clerk/clerk-react 5.x(Core 2),要求 React 18 或更高版本
  • @clerk/express 1.x
  • 要求 Node.js 18.17.0 或更高版本

使用方式

环境变量

.env.local 文件需要设置:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY(可发布密钥,以 pk_test 开头)、CLERK_SECRET_KEY(密钥,以 sk_test 开头)、NEXT_PUBLIC_CLERK_SIGN_IN_URL(登录路由路径)、NEXT_PUBLIC_CLERK_SIGN_UP_URL(注册路由路径)。

ClerkProvider 设置

在 app/layout.tsx 中从 @clerk/nextjs 导入 ClerkProvider,RootLayout 组件用 ClerkProvider 包裹 html 与 body 元素,children 通过 body 传入。

基础中间件

在 middleware.ts 中从 @clerk/nextjs/server 导入 clerkMiddleware,默认导出 clerkMiddleware 调用,并导出 config 对象,其 matcher 数组包含除静态文件与 Next.js 内部路径外的所有路由模式,以及 api 与 trpc 路由模式。

Context7 访问

库:/clerk/clerk-docs;先用 resolve-library-id 查询 "clerk",再使用 get-library-docs。

实现指南要点

  • 带认证组件的 ClerkProvider:在布局中导入 ClerkProvider、SignInButton、SignUpButton、SignedIn、SignedOut、UserButton;用 SignedOut 包裹显示登录/注册按钮,用 SignedIn 包裹显示 UserButton。
  • 使用中间件保护路由:使用 createRouteMatcher 定义 isProtectedRoute(如 /dashboard、/forum、/api/private 等模式),匹配受保护路由时调用 auth.protect();也可定义 isPublicRoute,对所有非公开路由调用 auth.protect()。
  • useAuth 钩子:解构 userId、sessionId、getToken、isLoaded、isSignedIn;getToken 获取会话令牌用于携带 Authorization Bearer 头的 API 调用;渲染前检查 isLoaded,展示认证内容前检查 isSignedIn。
  • useUser 钩子:解构 isSignedIn、user、isLoaded;访问 firstName、primaryEmailAddress.emailAddress、imageUrl 等属性。
  • 登录与注册页面:创建 app/sign-in/[[...sign-in]]/page.tsx 与 app/sign-up/[[...sign-up]]/page.tsx,分别渲染 SignIn 与 SignUp 组件,使用 flexbox 居中布局。
  • 服务端认证:App Router 服务端组件中导入 auth、currentUser 与 redirect;await auth() 获取 userId,为 null 时重定向到登录;await currentUser() 获取完整用户对象。路由处理器中 await auth(),userId 为 null 时返回 401。
  • 组织管理:OrganizationSwitcher 组件用于组织切换;useOrganizationList 钩子可自定义切换(userMemberships 设为 infinite 模式,遍历 userMemberships.data 显示组织名与 select 按钮,调用 setActive 传入组织 ID,hasNextPage 为真时提供加载更多按钮);useOrganization 钩子获取当前组织,展示 name、imageUrl、membersCount。

高级模式与 Core 2 迁移

更多高级模式(Core 2 迁移、基于角色的访问控制、webhooks、自定义认证流程、外部服务集成)见 modules/advanced-patterns.md。

Core 2 主要迁移变更:

  • 环境变量:CLERK_FRONTEND_API 改为 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  • 中间件:authMiddleware() 改为 clerkMiddleware()
  • 导入:服务端由 @clerk/nextjs 改为 @clerk/nextjs/server
  • 会话:setSession() 改为 setActive()
  • 图片:profileImageUrl 与 logoUrl 改为 imageUrl

迁移工具命令:npx @clerk/upgrade --from=core-1,从 Core 1 迁移到 Core 2。

适用场景与限制

该技能面向使用 Clerk 进行现代认证与多租户组织管理的开发场景,官方文档、SDK 参考与迁移指南等资源链接已在资料中给出。资料标注状态为 Production Ready,版本 2.1.0,最后更新 2026-01-11,SDK 版本 @clerk/nextjs 6.x(Core 2)。关于收费、价格或未在资料中提及的功能与效果,暂未提供。