workos-authkit-react
9
总安装量
1
周安装量
#32643
全站排名
安装命令
npx skills add https://github.com/workos/cli --skill workos-authkit-react
Agent 安装分布
amp
1
opencode
1
kimi-cli
1
codex
1
claude-code
1
Skill 文档
WorkOS AuthKit for React (SPA)
Decision Tree
START
â
ââ⺠Fetch README (BLOCKING)
â github.com/workos/authkit-react/blob/main/README.md
â README is source of truth. Stop if fetch fails.
â
ââ⺠Detect Build Tool
â ââ vite.config.ts exists? â Vite
â ââ otherwise â Create React App
â
ââ⺠Set Env Var Prefix
â ââ Vite â VITE_WORKOS_CLIENT_ID
â ââ CRA â REACT_APP_WORKOS_CLIENT_ID
â
ââ⺠Implement per README
Critical: Build Tool Detection
| Marker File | Build Tool | Env Prefix | Access Pattern |
|---|---|---|---|
vite.config.ts |
Vite | VITE_ |
import.meta.env.VITE_* |
craco.config.js or none |
CRA | REACT_APP_ |
process.env.REACT_APP_* |
Wrong prefix = undefined values at runtime. This is the #1 integration failure.
Key Clarification: No Callback Route
The React SDK handles OAuth callbacks internally via AuthKitProvider.
- No server-side callback route needed
- SDK intercepts redirect URI client-side
- Token exchange happens automatically
Just ensure redirect URI env var matches WorkOS Dashboard exactly.
Required Environment Variables
{PREFIX}WORKOS_CLIENT_ID=client_...
{PREFIX}WORKOS_REDIRECT_URI=http://localhost:5173/callback
No WORKOS_API_KEY needed. Client-side only SDK.
Verification Checklist
- README fetched and read
- Build tool detected correctly
- Env var prefix matches build tool
-
.envor.env.localhas required vars - No
nextdependency (wrong skill) - No
react-routerdependency (wrong skill) - AuthKitProvider wraps app root
-
pnpm buildexits 0
Error Recovery
“clientId is required”
Cause: Env var inaccessible (wrong prefix)
Check: Does prefix match build tool? Vite needs VITE_, CRA needs REACT_APP_.
Auth state lost on refresh
Cause: Token persistence issue
Check: Browser dev tools â Application â Local Storage. SDK stores tokens here automatically.
useAuth returns undefined
Cause: Component outside provider tree
Check: Entry file (main.tsx or index.tsx) wraps <App /> in <AuthKitProvider>.
Callback redirect fails
Cause: URI mismatch
Check: Env var redirect URI exactly matches WorkOS Dashboard â Redirects configuration.