用途
该技能用于将 WorkOS AuthKit 集成到使用 Next.js App Router(13 及以上版本)的项目中,且要求项目采用服务端渲染。它面向需要为 Next.js 应用接入 WorkOS 认证能力的开发者,提供从环境校验到验证完成的完整操作流程。
主要能力
- 分步集成流程:从获取 SDK 文档、预检校验、安装 SDK、定位 app/ 目录、版本检测、创建回调路由、Provider 设置到 UI 集成。
- 版本适配:根据 Next.js 版本决定创建 middleware.ts 还是 proxy.ts。Next.js 16+ 使用 proxy.ts(middleware.ts 仍可用但会显示弃用警告,且两者同时存在会抛出 E900 错误);Next.js 15 使用 middleware.ts 且 cookies() 为异步;Next.js 13-14 使用 middleware.ts 且 cookies() 为同步。
- 与现有中间件组合:若已存在带自定义逻辑的 middleware.ts,可使用 authkit() 组合函数,配合 handleAuthkitHeaders() 确保 AuthKit 头正确传递。
- 回调路由创建:根据 NEXT_PUBLIC_WORKOS_REDIRECT_URI 的路径确定回调路由位置,使用 SDK 的 handleAuth(),不自行编写 OAuth 逻辑。
- Provider 设置:要求在 app/layout.tsx 中使用 AuthKitProvider 包裹应用,以支持客户端 useAuth() 钩子及一致的认证体验。
- 验证清单:检查 middleware/proxy 文件、AuthKitProvider 是否在 layout 中、回调路由是否存在,以及构建是否成功。
- 错误恢复:针对 cookies 在请求作用域外调用、middleware.ts 未找到、middleware 与 proxy 文件同时存在、withAuth 路由未被中间件覆盖、客户端组件中使用 getUser、SDK 模块未找到、NEXT_PUBLIC 前缀问题等给出排查方向。
使用方式
技能以步骤形式执行。第一步要求先获取 SDK 的 README(https://raw.githubusercontent.com/workos/authkit-nextjs/main/README.md),并以其为权威依据,若与技能冲突则以 README 为准。随后进行预检校验,确认 next.config.js 或 next.config.mjs 存在、package.json 包含 next 依赖,并检查 .env.local 中的 WORKOS_API_KEY(以 sk_ 开头)、WORKOS_CLIENT_ID(以 client_ 开头)、NEXT_PUBLIC_WORKOS_REDIRECT_URI(有效回调 URL)、WORKOS_COOKIE_PASSWORD(32 个字符以上)。接着检测包管理器并安装 SDK,定位 app/ 目录(优先 src/app/,否则根 app/),根据 Next.js 版本创建对应中间件或代理文件,创建回调路由,在 layout 中设置 AuthKitProvider,最后在页面中添加认证 UI。
适用场景
适用于使用 Next.js App Router(13+)并需要接入 WorkOS AuthKit 认证的项目,尤其是从 Auth0 迁移(Auth0 使用客户端认证)的场景。要求项目支持服务端渲染。
限制
- 要求服务端渲染。
- 需要 Next.js App Router 13 及以上版本。
- 需要配置指定的环境变量。
- 中间件或代理文件必须位于 app/ 的父目录,否则会被静默忽略。
- Next.js 16 中 middleware.ts 与 proxy.ts 不能同时存在。
- 具体 SDK 安装命令、代码示例细节需以 README 为准,本技能未提供完整代码内容。
- 关于收费、价格、平台支持范围等信息暂未提供。