workos-authkit-vanilla-js

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WorkOS AuthKit for Vanilla JavaScript

适用于原生JavaScript的WorkOS AuthKit

Decision Tree

决策树

Step 1: Fetch README (BLOCKING)

步骤1：获取README（阻塞操作）

WebFetch:

https://github.com/workos/authkit-js/blob/main/README.md

README is source of truth. If this skill conflicts, follow README.

WebFetch:

https://github.com/workos/authkit-js/blob/main/README.md

README是权威来源。如果本技能内容与README冲突，请以README为准。

Step 2: Detect Project Type

步骤2：检测项目类型

Has package.json with build tool (Vite, webpack, Parcel)?
  YES -> Bundled project (npm install)
  NO  -> CDN/Static project (script tag)

是否存在包含构建工具（Vite、webpack、Parcel）的package.json？
  是 -> 打包型项目（使用npm install）
  否 -> CDN/静态项目（使用script标签）

Step 3: Follow README Installation

步骤3：按照README进行安装

Bundled: Use package manager install from README
CDN: Use unpkg script tag from README

打包型项目：按照README使用包管理器安装
CDN项目：按照README使用unpkg的script标签

Step 4: Implement Per README

步骤4：按照README实现功能

Follow README examples for:

Client initialization
Sign in/out handlers
User state management

遵循README中的示例完成以下操作：

客户端初始化
登录/登出处理函数
用户状态管理

Critical API Quirk

关键API注意事项

createClient()

is async - returns a Promise, not a client directly.

javascript

// CORRECT
const authkit = await createClient(clientId);

createClient()

是异步函数 - 返回一个Promise，而非直接返回客户端实例。

javascript

// 正确用法
const authkit = await createClient(clientId);

Verification Checklist

验证检查清单

README fetched and read before writing code
Project type detected (bundled vs CDN)
SDK installed/script added
```
createClient()
```
called with
```
await
```
Client ID provided (env var or hardcoded)
Sign in called from user gesture (click handler)
No console errors on page load
Auth UI updates on sign in/out

编写代码前已获取并阅读README
已检测项目类型（打包型 vs CDN）
已安装SDK/添加script标签
使用
```
await
```
调用
```
createClient()
```
已提供Client ID（环境变量或硬编码）
从用户交互（点击事件处理函数）中调用登录方法
页面加载时控制台无错误
登录/登出后认证UI已更新

Environment Variables

环境变量

Bundled projects only:

Vite:
```
VITE_WORKOS_CLIENT_ID
```
Webpack:
```
REACT_APP_WORKOS_CLIENT_ID
```
or custom
No
```
WORKOS_API_KEY
```
needed (client-side SDK)

仅适用于打包型项目：

Vite:
```
VITE_WORKOS_CLIENT_ID
```
Webpack:
```
REACT_APP_WORKOS_CLIENT_ID
```
或自定义变量
无需
```
WORKOS_API_KEY
```
（客户端SDK不使用）

Error Recovery

错误排查与恢复

Error	Cause	Fix
`WorkOS is not defined`	CDN not loaded	Add script to `<head>` before your code
`createClient is not a function`	Wrong import	npm: check import path; CDN: use `WorkOS.createClient`
`clientId is required`	Undefined env var	Check env prefix matches build tool
CORS errors	`file://` protocol	Use local dev server ( `npx serve` )
Popup blocked	Not user gesture	Call `signIn()` only from click handler
Auth state lost	Token not persisted	Check localStorage in dev tools

错误信息	原因	修复方案
`WorkOS is not defined`	CDN未加载	在你的代码之前将script标签添加到 `<head>` 中
`createClient is not a function`	导入方式错误	npm项目：检查导入路径；CDN项目：使用 `WorkOS.createClient`
`clientId is required`	环境变量未定义	检查环境变量前缀是否与构建工具匹配
CORS错误	使用 `file://` 协议	使用本地开发服务器（如 `npx serve` ）
弹窗被拦截	非用户交互触发	仅在点击事件处理函数中调用 `signIn()`
认证状态丢失	令牌未持久化	在开发者工具中检查localStorage

Task Flow

任务流程

preflight: Fetch README, detect project type, verify env vars
install: Add SDK per project type
callback: SDK handles internally (no server route needed)
provider: Initialize client with
```
await createClient()
```
ui: Add auth buttons and state display
verify: Build (if bundled), check console

预检：获取README，检测项目类型，验证环境变量
安装：根据项目类型添加SDK
回调：SDK内部处理（无需服务器路由）
客户端初始化：使用
```
await createClient()
```
初始化客户端
用户界面：添加认证按钮和状态显示
验证：构建项目（如果是打包型），检查控制台