SuperAPI AI 工具集

clerk-react-patterns

前端与建站

查看项目

更新于 10-16 06:47

技能介绍

用途:为 Vite/CRA 构建的 React 单页应用提供 @clerk/react 认证模式参考。Next.js 请用 clerk-nextjs-patterns,TanStack Start 请用 clerk-tanstack-patterns。

主要能力:useAuth/useUser/useClerk 钩子用法;React Router v6/v7 受保护路由;自定义登录/注册表单(useSignIn、useSignUp);路由集成配置。

安装与配置:npm install @clerk/react;在 .env 中设置 VITE_CLERK_PUBLISHABLE_KEY=pk_...;在 src/main.tsx 中用 ClerkProvider 包裹 App,并传入 publishableKey。

核心模型:@clerk/react 仅客户端运行,没有服务端 auth(),所有认证状态来自钩子;必须先确认 isLoaded 为 true 再信任 isSignedIn;useClerk() 提供 signOut、openSignIn、openUserProfile 等方法;useAuth() 的 getToken() 用于获取会话 JWT 供 API 调用。

常见陷阱:isSignedIn 为 undefined 时先检查 isLoaded;ClerkProvider 需置于根节点;Vite 环境变量须用 VITE_ 前缀并通过 import.meta.env 访问;getToken() 可能返回 null 需判空;登录组件空白通常是未传 publishableKey。

限制:仅适用于 Vite/CRA 的 React SPA,不覆盖服务端认证;具体收费、平台支持等资料暂未提供。