SuperAPI AI 工具集

workos-authkit-react

前端与建站

查看项目

更新于 10-16 04:30

技能介绍

用途:在 React 单页应用中集成 WorkOS AuthKit,实现纯客户端认证。适用于没有 Next.js 或 React Router 服务端框架的 React SPA。

主要能力:通过 AuthKitProvider 在客户端拦截 OAuth 回调并自动完成令牌交换,无需服务端回调路由;提供 useAuth() 等客户端认证能力。

使用方式:先获取 README 作为事实来源,若获取失败则停止。检测构建工具:存在 vite.config.ts 判定为 Vite,否则为 Create React App。据此设置环境变量前缀:Vite 用 VITE_WORKOS_CLIENT_ID,访问方式 import.meta.env.VITE_;CRA 用 REACT_APP_WORKOS_CLIENT_ID,访问方式 process.env.REACT_APP_。需配置 {PREFIX}WORKOS_CLIENT_ID 与 {PREFIX}WORKOS_REDIRECT_URI,无需 WORKOS_API_KEY。确保 AuthKitProvider 包裹应用根节点(main.tsx 或 index.tsx),否则 useAuth() 不可用。重定向 URI 必须与 WorkOS Dashboard 配置完全一致。

验证:检查环境变量前缀与构建工具匹配;确认 AuthKitProvider 包裹根节点;确认无服务端框架;执行 pnpm build 构建成功。

限制:仅限客户端认证;前缀错误会导致运行时值为 undefined,是常见集成失败原因;令牌由 SDK 自动存入浏览器 Local Storage,刷新丢失认证状态需检查令牌持久化;回调重定向失败通常因 URI 不匹配。