AgentSkillsCN

workos-authkit-vanilla-js

将 WorkOS AuthKit 与原生 JavaScript 应用程序集成。无需框架，仅在浏览器中运行。当项目仅为纯 HTML/JS，不使用 React/Vue 等框架，或仅提及原生 JavaScript 认证时，此技能将为您提供支持。

SKILL.md
--- frontmatter
name: workos-authkit-vanilla-js
description: Integrate WorkOS AuthKit with vanilla JavaScript applications. No framework required, browser-only. Use when project is plain HTML/JS, doesn't use React/Vue/etc, or mentions vanilla JavaScript authentication.

WorkOS AuthKit for Vanilla JavaScript

Decision Tree

Step 1: Fetch README (BLOCKING)

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

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

Step 2: Detect Project Type

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

Step 3: Follow README Installation

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

Step 4: Implement Per README

Follow README examples for:

  • •Client initialization
  • •Sign in/out handlers
  • •User state management

Critical API Quirk

createClient() is async - returns a Promise, not a client directly.

javascript
// CORRECT
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

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)

Error Recovery

ErrorCauseFix
WorkOS is not definedCDN not loadedAdd script to <head> before your code
createClient is not a functionWrong importnpm: check import path; CDN: use WorkOS.createClient
clientId is requiredUndefined env varCheck env prefix matches build tool
CORS errorsfile:// protocolUse local dev server (npx serve)
Popup blockedNot user gestureCall signIn() only from click handler
Auth state lostToken not persistedCheck localStorage in dev tools

Task Flow

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