workos 0.9.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -6
- package/dist/bin.js +39 -14
- package/dist/bin.js.map +1 -1
- package/dist/commands/install-skill.d.ts +0 -1
- package/dist/commands/install-skill.js +2 -10
- package/dist/commands/install-skill.js.map +1 -1
- package/dist/commands/list-skills.d.ts +4 -0
- package/dist/commands/list-skills.js +52 -0
- package/dist/commands/list-skills.js.map +1 -0
- package/dist/commands/login.d.ts +8 -0
- package/dist/commands/login.js +41 -1
- package/dist/commands/login.js.map +1 -1
- package/dist/commands/uninstall-skill.d.ts +11 -0
- package/dist/commands/uninstall-skill.js +116 -0
- package/dist/commands/uninstall-skill.js.map +1 -0
- package/dist/integrations/dotnet/index.js +7 -12
- package/dist/integrations/dotnet/index.js.map +1 -1
- package/dist/integrations/elixir/index.js +7 -13
- package/dist/integrations/elixir/index.js.map +1 -1
- package/dist/integrations/go/index.js +5 -11
- package/dist/integrations/go/index.js.map +1 -1
- package/dist/integrations/python/index.js +7 -13
- package/dist/integrations/python/index.js.map +1 -1
- package/dist/integrations/ruby/index.js +9 -14
- package/dist/integrations/ruby/index.js.map +1 -1
- package/dist/lib/agent-interface.js +5 -4
- package/dist/lib/agent-interface.js.map +1 -1
- package/dist/lib/agent-runner.js +24 -19
- package/dist/lib/agent-runner.js.map +1 -1
- package/dist/utils/help-json.js +55 -21
- package/dist/utils/help-json.js.map +1 -1
- package/package.json +2 -3
- package/.claude-plugin/plugin.json +0 -13
- package/skills/workos-authkit-base/SKILL.md +0 -123
- package/skills/workos-authkit-nextjs/SKILL.md +0 -247
- package/skills/workos-authkit-react/SKILL.md +0 -100
- package/skills/workos-authkit-react-router/SKILL.md +0 -117
- package/skills/workos-authkit-sveltekit/SKILL.md +0 -208
- package/skills/workos-authkit-tanstack-start/SKILL.md +0 -314
- package/skills/workos-authkit-vanilla-js/SKILL.md +0 -92
- package/skills/workos-dotnet/SKILL.md +0 -163
- package/skills/workos-elixir/SKILL.md +0 -231
- package/skills/workos-go/SKILL.md +0 -226
- package/skills/workos-kotlin/SKILL.md +0 -195
- package/skills/workos-management/SKILL.md +0 -250
- package/skills/workos-node/SKILL.md +0 -197
- package/skills/workos-php/SKILL.md +0 -160
- package/skills/workos-php-laravel/SKILL.md +0 -182
- package/skills/workos-python/SKILL.md +0 -193
- package/skills/workos-ruby/SKILL.md +0 -198
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: workos-authkit-nextjs
|
|
3
|
-
description: Integrate WorkOS AuthKit with Next.js App Router (13+). Server-side rendering required.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# WorkOS AuthKit for Next.js
|
|
7
|
-
|
|
8
|
-
## Step 1: Fetch SDK Documentation (BLOCKING)
|
|
9
|
-
|
|
10
|
-
**STOP. Do not proceed until complete.**
|
|
11
|
-
|
|
12
|
-
WebFetch: `https://raw.githubusercontent.com/workos/authkit-nextjs/main/README.md`
|
|
13
|
-
|
|
14
|
-
The README is the source of truth. If this skill conflicts with README, follow README.
|
|
15
|
-
|
|
16
|
-
## Step 2: Pre-Flight Validation
|
|
17
|
-
|
|
18
|
-
### Project Structure
|
|
19
|
-
|
|
20
|
-
- Confirm `next.config.js` or `next.config.mjs` exists
|
|
21
|
-
- Confirm `package.json` contains `"next"` dependency
|
|
22
|
-
|
|
23
|
-
### Environment Variables
|
|
24
|
-
|
|
25
|
-
Check `.env.local` for:
|
|
26
|
-
|
|
27
|
-
- `WORKOS_API_KEY` - starts with `sk_`
|
|
28
|
-
- `WORKOS_CLIENT_ID` - starts with `client_`
|
|
29
|
-
- `NEXT_PUBLIC_WORKOS_REDIRECT_URI` - valid callback URL
|
|
30
|
-
- `WORKOS_COOKIE_PASSWORD` - 32+ characters
|
|
31
|
-
|
|
32
|
-
## Step 3: Install SDK
|
|
33
|
-
|
|
34
|
-
Detect package manager, install SDK package from README.
|
|
35
|
-
|
|
36
|
-
**Verify:** SDK package exists in node_modules before continuing.
|
|
37
|
-
|
|
38
|
-
## Step 4: Locate the app/ directory (BLOCKING)
|
|
39
|
-
|
|
40
|
-
**STOP. Do this before creating any files.**
|
|
41
|
-
|
|
42
|
-
Determine where the `app/` directory lives:
|
|
43
|
-
|
|
44
|
-
```bash
|
|
45
|
-
# Check for src/app/ first, then root app/
|
|
46
|
-
ls src/app/ 2>/dev/null && echo "APP_DIR=src" || (ls app/ 2>/dev/null && echo "APP_DIR=root")
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
Set `APP_DIR` for all subsequent steps. All middleware/proxy files MUST be created in `APP_DIR`:
|
|
50
|
-
|
|
51
|
-
- If `APP_DIR=src` → create files in `src/` (e.g., `src/proxy.ts`)
|
|
52
|
-
- If `APP_DIR=root` → create files at project root (e.g., `proxy.ts`)
|
|
53
|
-
|
|
54
|
-
Next.js only discovers middleware/proxy files in the parent directory of `app/`. A file at the wrong level is **silently ignored** — no error, just doesn't run.
|
|
55
|
-
|
|
56
|
-
## Step 5: Version Detection (Decision Tree)
|
|
57
|
-
|
|
58
|
-
Read Next.js version from `package.json`:
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
Next.js version?
|
|
62
|
-
|
|
|
63
|
-
+-- 16+ --> Create {APP_DIR}/proxy.ts
|
|
64
|
-
|
|
|
65
|
-
+-- 15 --> Create {APP_DIR}/middleware.ts (cookies() is async)
|
|
66
|
-
|
|
|
67
|
-
+-- 13-14 --> Create {APP_DIR}/middleware.ts (cookies() is sync)
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Next.js 16+ proxy.ts:** `proxy.ts` is the preferred convention. `middleware.ts` still works but shows a deprecation warning. Next.js 16 throws **error E900** if both files exist at the same level.
|
|
71
|
-
|
|
72
|
-
**Next.js 15+ async note:** All route handlers and middleware accessing cookies must be async and properly await cookie operations. This is a breaking change from Next.js 14.
|
|
73
|
-
|
|
74
|
-
Middleware/proxy code: See README for `authkitMiddleware()` export pattern.
|
|
75
|
-
|
|
76
|
-
### Existing Middleware (IMPORTANT)
|
|
77
|
-
|
|
78
|
-
If `middleware.ts` already exists with custom logic (rate limiting, logging, headers, etc.), use the **`authkit()` composable function** instead of `authkitMiddleware`.
|
|
79
|
-
|
|
80
|
-
**Pattern for composing with existing middleware:**
|
|
81
|
-
|
|
82
|
-
```typescript
|
|
83
|
-
import { NextRequest, NextResponse } from 'next/server';
|
|
84
|
-
import { authkit, handleAuthkitHeaders } from '@workos-inc/authkit-nextjs';
|
|
85
|
-
|
|
86
|
-
export default async function middleware(request: NextRequest) {
|
|
87
|
-
// 1. Get auth session and headers from AuthKit
|
|
88
|
-
const { session, headers, authorizationUrl } = await authkit(request);
|
|
89
|
-
const { pathname } = request.nextUrl;
|
|
90
|
-
|
|
91
|
-
// 2. === YOUR EXISTING MIDDLEWARE LOGIC ===
|
|
92
|
-
// Rate limiting, logging, custom headers, etc.
|
|
93
|
-
const rateLimitResult = checkRateLimit(request);
|
|
94
|
-
if (!rateLimitResult.allowed) {
|
|
95
|
-
return new NextResponse('Too Many Requests', { status: 429 });
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// 3. Protect routes - redirect to auth if needed
|
|
99
|
-
if (pathname.startsWith('/dashboard') && !session.user && authorizationUrl) {
|
|
100
|
-
return handleAuthkitHeaders(request, headers, { redirect: authorizationUrl });
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// 4. Continue with AuthKit headers properly handled
|
|
104
|
-
return handleAuthkitHeaders(request, headers);
|
|
105
|
-
}
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
**Key functions:**
|
|
109
|
-
|
|
110
|
-
- `authkit(request)` - Returns `{ session, headers, authorizationUrl }` for composition
|
|
111
|
-
- `handleAuthkitHeaders(request, headers, options?)` - Ensures AuthKit headers pass through correctly
|
|
112
|
-
- For rewrites, use `partitionAuthkitHeaders()` and `applyResponseHeaders()` (see README)
|
|
113
|
-
|
|
114
|
-
**Critical:** Always return via `handleAuthkitHeaders()` to ensure `withAuth()` works in pages.
|
|
115
|
-
|
|
116
|
-
## Step 6: Create Callback Route
|
|
117
|
-
|
|
118
|
-
Parse `NEXT_PUBLIC_WORKOS_REDIRECT_URI` to determine route path:
|
|
119
|
-
|
|
120
|
-
```
|
|
121
|
-
URI path --> Route location (use APP_DIR from Step 4)
|
|
122
|
-
/auth/callback --> {APP_DIR}/app/auth/callback/route.ts
|
|
123
|
-
/callback --> {APP_DIR}/app/callback/route.ts
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
Use `handleAuth()` from SDK. Do not write custom OAuth logic.
|
|
127
|
-
|
|
128
|
-
**CRITICAL for Next.js 15+:** The route handler MUST be async and properly await handleAuth():
|
|
129
|
-
|
|
130
|
-
```typescript
|
|
131
|
-
// CORRECT - Next.js 15+ requires async route handlers
|
|
132
|
-
export const GET = handleAuth();
|
|
133
|
-
|
|
134
|
-
// If handleAuth returns a function, ensure it's awaited in request context
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
Check README for exact usage. If build fails with "cookies outside request scope", the handler is likely missing async/await.
|
|
138
|
-
|
|
139
|
-
## Step 7: Provider Setup (REQUIRED)
|
|
140
|
-
|
|
141
|
-
**CRITICAL:** You MUST wrap the app in `AuthKitProvider` in `app/layout.tsx`.
|
|
142
|
-
|
|
143
|
-
This is required for:
|
|
144
|
-
|
|
145
|
-
- Client-side auth state via `useAuth()` hook
|
|
146
|
-
- Consistent auth UX across client/server boundaries
|
|
147
|
-
- Proper migration from Auth0 (which uses client-side auth)
|
|
148
|
-
|
|
149
|
-
```tsx
|
|
150
|
-
// app/layout.tsx
|
|
151
|
-
import { AuthKitProvider } from '@workos-inc/authkit-nextjs/components';
|
|
152
|
-
|
|
153
|
-
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
154
|
-
return (
|
|
155
|
-
<html lang="en">
|
|
156
|
-
<body>
|
|
157
|
-
<AuthKitProvider>{children}</AuthKitProvider>
|
|
158
|
-
</body>
|
|
159
|
-
</html>
|
|
160
|
-
);
|
|
161
|
-
}
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
**Do NOT skip this step** even if using server-side auth patterns elsewhere.
|
|
165
|
-
|
|
166
|
-
## Step 8: UI Integration
|
|
167
|
-
|
|
168
|
-
Add auth UI to `app/page.tsx` using SDK functions. See README for auth helper usage (`withAuth`/`getUser`, `getSignInUrl`, `signOut`).
|
|
169
|
-
|
|
170
|
-
**Note:** The SDK renamed `getUser` to `withAuth` in newer versions. Use whichever function the installed SDK version exports — do NOT rename existing working imports.
|
|
171
|
-
|
|
172
|
-
## Verification Checklist (ALL MUST PASS)
|
|
173
|
-
|
|
174
|
-
Run these commands to confirm integration. **Do not mark complete until all pass:**
|
|
175
|
-
|
|
176
|
-
```bash
|
|
177
|
-
# 1. Check middleware/proxy exists (one should match)
|
|
178
|
-
ls proxy.ts middleware.ts src/proxy.ts src/middleware.ts 2>/dev/null
|
|
179
|
-
|
|
180
|
-
# 2. CRITICAL: Check AuthKitProvider is in layout (REQUIRED)
|
|
181
|
-
grep "AuthKitProvider" app/layout.tsx || echo "FAIL: AuthKitProvider missing from layout"
|
|
182
|
-
|
|
183
|
-
# 3. Check callback route exists
|
|
184
|
-
find app -name "route.ts" -path "*/callback/*"
|
|
185
|
-
|
|
186
|
-
# 4. Build succeeds
|
|
187
|
-
npm run build
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
**If check #2 fails:** Go back to Step 6 and add AuthKitProvider. This is not optional.
|
|
191
|
-
|
|
192
|
-
## Error Recovery
|
|
193
|
-
|
|
194
|
-
### "cookies was called outside a request scope" (Next.js 15+)
|
|
195
|
-
|
|
196
|
-
**Most common cause:** Route handler not properly async or missing await.
|
|
197
|
-
|
|
198
|
-
Fix for callback route:
|
|
199
|
-
|
|
200
|
-
1. Check that `handleAuth()` is exported directly: `export const GET = handleAuth();`
|
|
201
|
-
2. If using custom wrapper, ensure it's `async` and awaits any cookie operations
|
|
202
|
-
3. Verify authkit-nextjs SDK version supports Next.js 15+ (check README for compatibility)
|
|
203
|
-
4. **Never** call `cookies()` at module level - only inside request handlers
|
|
204
|
-
|
|
205
|
-
This error causes OAuth codes to expire ("invalid_grant"), so fix the handler first.
|
|
206
|
-
|
|
207
|
-
### "middleware.ts not found"
|
|
208
|
-
|
|
209
|
-
- Check: File at project root or `src/`, not inside `app/`
|
|
210
|
-
- Check: Filename matches Next.js version (proxy.ts for 16+, middleware.ts for 13-15)
|
|
211
|
-
|
|
212
|
-
### "Both middleware file and proxy file are detected" (Next.js 16+)
|
|
213
|
-
|
|
214
|
-
- Next.js 16 throws error E900 if both `middleware.ts` and `proxy.ts` exist
|
|
215
|
-
- Delete `middleware.ts` and use only `proxy.ts`
|
|
216
|
-
- If `middleware.ts` has custom logic, migrate it into `proxy.ts`
|
|
217
|
-
|
|
218
|
-
### "withAuth route not covered by middleware" but middleware/proxy file exists
|
|
219
|
-
|
|
220
|
-
- **Most common cause:** File is at the wrong level. Next.js only discovers middleware/proxy files in the parent directory of `app/`. For `src/app/` projects, the file must be in `src/`, not at the project root.
|
|
221
|
-
- Check: Is `app/` at `src/app/`? Then middleware/proxy must be at `src/middleware.ts` or `src/proxy.ts`
|
|
222
|
-
- Check: Matcher config must include the route path being accessed
|
|
223
|
-
|
|
224
|
-
### "Cannot use getUser in client component"
|
|
225
|
-
|
|
226
|
-
- Check: Component has no `'use client'` directive, or
|
|
227
|
-
- Check: Move auth logic to server component/API route
|
|
228
|
-
|
|
229
|
-
### "Module not found" for SDK import
|
|
230
|
-
|
|
231
|
-
- Check: SDK installed before writing imports
|
|
232
|
-
- Check: SDK package directory exists in node_modules
|
|
233
|
-
|
|
234
|
-
### "withAuth route not covered by middleware"
|
|
235
|
-
|
|
236
|
-
- Check: Middleware/proxy file exists at correct location
|
|
237
|
-
- Check: Matcher config includes the route path
|
|
238
|
-
|
|
239
|
-
### Build fails after AuthKitProvider
|
|
240
|
-
|
|
241
|
-
- Check: Import path matches what README specifies (root export vs `/components` subpath)
|
|
242
|
-
- Check: No client/server boundary violations
|
|
243
|
-
|
|
244
|
-
### NEXT*PUBLIC* prefix issues
|
|
245
|
-
|
|
246
|
-
- Client components need `NEXT_PUBLIC_*` prefix
|
|
247
|
-
- Server components use plain env var names
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: workos-authkit-react
|
|
3
|
-
description: Integrate WorkOS AuthKit with React single-page applications. Client-side only authentication. Use when the project is a React SPA without Next.js or React Router.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# WorkOS AuthKit for React (SPA)
|
|
7
|
-
|
|
8
|
-
## Decision Tree
|
|
9
|
-
|
|
10
|
-
```
|
|
11
|
-
START
|
|
12
|
-
│
|
|
13
|
-
├─► Fetch README (BLOCKING)
|
|
14
|
-
│ raw.githubusercontent.com/workos/authkit-react/main/README.md
|
|
15
|
-
│ README is source of truth. Stop if fetch fails.
|
|
16
|
-
│
|
|
17
|
-
├─► Detect Build Tool
|
|
18
|
-
│ ├─ vite.config.ts exists? → Vite
|
|
19
|
-
│ └─ otherwise → Create React App
|
|
20
|
-
│
|
|
21
|
-
├─► Set Env Var Prefix
|
|
22
|
-
│ ├─ Vite → VITE_WORKOS_CLIENT_ID
|
|
23
|
-
│ └─ CRA → REACT_APP_WORKOS_CLIENT_ID
|
|
24
|
-
│
|
|
25
|
-
└─► Implement per README
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Critical: Build Tool Detection
|
|
29
|
-
|
|
30
|
-
| Marker File | Build Tool | Env Prefix | Access Pattern |
|
|
31
|
-
| ------------------------- | ---------- | ------------ | ------------------------- |
|
|
32
|
-
| `vite.config.ts` | Vite | `VITE_` | `import.meta.env.VITE_*` |
|
|
33
|
-
| `craco.config.js` or none | CRA | `REACT_APP_` | `process.env.REACT_APP_*` |
|
|
34
|
-
|
|
35
|
-
**Wrong prefix = undefined values at runtime.** This is the #1 integration failure.
|
|
36
|
-
|
|
37
|
-
## Key Clarification: No Callback Route
|
|
38
|
-
|
|
39
|
-
The React SDK handles OAuth callbacks **internally** via AuthKitProvider.
|
|
40
|
-
|
|
41
|
-
- No server-side callback route needed
|
|
42
|
-
- SDK intercepts redirect URI client-side
|
|
43
|
-
- Token exchange happens automatically
|
|
44
|
-
|
|
45
|
-
Just ensure redirect URI env var matches WorkOS Dashboard exactly.
|
|
46
|
-
|
|
47
|
-
## Required Environment Variables
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
{PREFIX}WORKOS_CLIENT_ID=client_...
|
|
51
|
-
{PREFIX}WORKOS_REDIRECT_URI=http://localhost:5173/callback
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
No `WORKOS_API_KEY` needed. Client-side only SDK.
|
|
55
|
-
|
|
56
|
-
## Verification Checklist (ALL MUST PASS)
|
|
57
|
-
|
|
58
|
-
Run these commands to confirm integration. **Do not mark complete until all pass:**
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
# 1. Check env var prefix matches build tool
|
|
62
|
-
grep -E "VITE_WORKOS_CLIENT_ID|REACT_APP_WORKOS_CLIENT_ID" .env .env.local 2>/dev/null
|
|
63
|
-
|
|
64
|
-
# 2. Check AuthKitProvider wraps app root
|
|
65
|
-
grep "AuthKitProvider" src/main.tsx src/index.tsx 2>/dev/null || echo "FAIL: AuthKitProvider missing"
|
|
66
|
-
|
|
67
|
-
# 3. Check no server framework present (wrong skill if found)
|
|
68
|
-
grep -E '"next"|"react-router"' package.json && echo "WARN: Server framework detected"
|
|
69
|
-
|
|
70
|
-
# 4. Build succeeds
|
|
71
|
-
pnpm build
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
**If check #2 fails:** AuthKitProvider must wrap the app root in main.tsx/index.tsx. This is required for useAuth() to work.
|
|
75
|
-
|
|
76
|
-
## Error Recovery
|
|
77
|
-
|
|
78
|
-
### "clientId is required"
|
|
79
|
-
|
|
80
|
-
**Cause:** Env var inaccessible (wrong prefix)
|
|
81
|
-
|
|
82
|
-
Check: Does prefix match build tool? Vite needs `VITE_`, CRA needs `REACT_APP_`.
|
|
83
|
-
|
|
84
|
-
### Auth state lost on refresh
|
|
85
|
-
|
|
86
|
-
**Cause:** Token persistence issue
|
|
87
|
-
|
|
88
|
-
Check: Browser dev tools → Application → Local Storage. SDK stores tokens here automatically.
|
|
89
|
-
|
|
90
|
-
### useAuth returns undefined
|
|
91
|
-
|
|
92
|
-
**Cause:** Component outside provider tree
|
|
93
|
-
|
|
94
|
-
Check: Entry file (`main.tsx` or `index.tsx`) wraps `<App />` in `<AuthKitProvider>`.
|
|
95
|
-
|
|
96
|
-
### Callback redirect fails
|
|
97
|
-
|
|
98
|
-
**Cause:** URI mismatch
|
|
99
|
-
|
|
100
|
-
Check: Env var redirect URI exactly matches WorkOS Dashboard → Redirects configuration.
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: workos-authkit-react-router
|
|
3
|
-
description: Integrate WorkOS AuthKit with React Router applications. Supports v6 and v7 (Framework, Data, Declarative modes). Use when project uses react-router, react-router-dom, or mentions React Router authentication.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# WorkOS AuthKit for React Router
|
|
7
|
-
|
|
8
|
-
## Decision Tree
|
|
9
|
-
|
|
10
|
-
```
|
|
11
|
-
1. Fetch README (BLOCKING)
|
|
12
|
-
2. Detect router mode
|
|
13
|
-
3. Follow README for that mode
|
|
14
|
-
4. Verify with checklist below
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Phase 1: Fetch SDK Documentation (BLOCKING)
|
|
18
|
-
|
|
19
|
-
**STOP - Do not write any code until this completes.**
|
|
20
|
-
|
|
21
|
-
WebFetch: `https://raw.githubusercontent.com/workos/authkit-react-router/main/README.md`
|
|
22
|
-
|
|
23
|
-
The README is the source of truth. If this skill conflicts with README, **follow the README**.
|
|
24
|
-
|
|
25
|
-
## Phase 2: Detect Router Mode
|
|
26
|
-
|
|
27
|
-
| Mode | Detection Signal | Key Indicator |
|
|
28
|
-
| -------------- | ------------------------------- | ------------------------- |
|
|
29
|
-
| v7 Framework | `react-router.config.ts` exists | Routes in `app/routes/` |
|
|
30
|
-
| v7 Data | `createBrowserRouter` in source | Loaders in route config |
|
|
31
|
-
| v7 Declarative | `<BrowserRouter>` component | Routes as JSX, no loaders |
|
|
32
|
-
| v6 | package.json version `"6.x"` | Similar to v7 Declarative |
|
|
33
|
-
|
|
34
|
-
**Detection order:**
|
|
35
|
-
|
|
36
|
-
1. Check for `react-router.config.ts` (Framework mode)
|
|
37
|
-
2. Grep for `createBrowserRouter` (Data mode)
|
|
38
|
-
3. Check package.json version (v6 vs v7)
|
|
39
|
-
4. Default to Declarative if v7 with `<BrowserRouter>`
|
|
40
|
-
|
|
41
|
-
## Phase 3: Follow README
|
|
42
|
-
|
|
43
|
-
Based on detected mode, apply the corresponding README section. The README contains current API signatures and code patterns.
|
|
44
|
-
|
|
45
|
-
## Critical Distinctions
|
|
46
|
-
|
|
47
|
-
### authLoader vs authkitLoader
|
|
48
|
-
|
|
49
|
-
| Function | Purpose | Where to use |
|
|
50
|
-
| --------------- | ------------------------- | ---------------------- |
|
|
51
|
-
| `authLoader` | OAuth callback handler | Callback route ONLY |
|
|
52
|
-
| `authkitLoader` | Fetch user data in routes | Any route needing auth |
|
|
53
|
-
|
|
54
|
-
**Common mistake:** Using `authkitLoader` for callback route. Use `authLoader()`.
|
|
55
|
-
|
|
56
|
-
### Root Route Requirement
|
|
57
|
-
|
|
58
|
-
Auth loader MUST be on root route for child routes to access auth context.
|
|
59
|
-
|
|
60
|
-
**Wrong:** Auth loader only on `/dashboard`
|
|
61
|
-
**Right:** Auth loader on `/` (root), children inherit context
|
|
62
|
-
|
|
63
|
-
## Environment Variables
|
|
64
|
-
|
|
65
|
-
Required in `.env` or `.env.local`:
|
|
66
|
-
|
|
67
|
-
- `WORKOS_API_KEY` - starts with `sk_`
|
|
68
|
-
- `WORKOS_CLIENT_ID` - starts with `client_`
|
|
69
|
-
- `WORKOS_REDIRECT_URI` - full URL (e.g., `http://localhost:3000/auth/callback`)
|
|
70
|
-
- `WORKOS_COOKIE_PASSWORD` - 32+ chars (server modes only)
|
|
71
|
-
|
|
72
|
-
## Verification Checklist (ALL MUST PASS)
|
|
73
|
-
|
|
74
|
-
Run these commands to confirm integration. **Do not mark complete until all pass:**
|
|
75
|
-
|
|
76
|
-
```bash
|
|
77
|
-
# 1. Check SDK installed
|
|
78
|
-
ls node_modules/@workos-inc/authkit-react-router 2>/dev/null || echo "FAIL: SDK not installed"
|
|
79
|
-
|
|
80
|
-
# 2. Check callback route exists and matches WORKOS_REDIRECT_URI
|
|
81
|
-
grep -r "authLoader\|handleCallbackRoute" src/ app/ 2>/dev/null
|
|
82
|
-
|
|
83
|
-
# 3. Check auth loader/provider on root route
|
|
84
|
-
grep -r "authkitLoader\|AuthKitProvider" src/ app/ 2>/dev/null
|
|
85
|
-
|
|
86
|
-
# 4. Build succeeds
|
|
87
|
-
npm run build
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**If check #2 fails:** Callback route path must match WORKOS_REDIRECT_URI exactly. Use authLoader (not authkitLoader) for the callback route.
|
|
91
|
-
|
|
92
|
-
## Error Recovery
|
|
93
|
-
|
|
94
|
-
### "loader is not a function"
|
|
95
|
-
|
|
96
|
-
**Cause:** Using loader pattern in Declarative/v6 mode
|
|
97
|
-
**Fix:** Declarative/v6 modes use `AuthKitProvider` + `useAuth` hook, not loaders
|
|
98
|
-
|
|
99
|
-
### Auth state not available in child routes
|
|
100
|
-
|
|
101
|
-
**Cause:** Auth loader missing from root route
|
|
102
|
-
**Fix:** Add `authkitLoader` (or `AuthKitProvider`) to root route so children inherit context
|
|
103
|
-
|
|
104
|
-
### useAuth returns undefined
|
|
105
|
-
|
|
106
|
-
**Cause:** Missing `AuthKitProvider` wrapper
|
|
107
|
-
**Fix:** Wrap app with `AuthKitProvider` (required for Declarative/v6 modes)
|
|
108
|
-
|
|
109
|
-
### Callback route 404
|
|
110
|
-
|
|
111
|
-
**Cause:** Route path mismatch with `WORKOS_REDIRECT_URI`
|
|
112
|
-
**Fix:** Extract exact path from env var, create route at that path
|
|
113
|
-
|
|
114
|
-
### "Module not found" for SDK
|
|
115
|
-
|
|
116
|
-
**Cause:** SDK not installed
|
|
117
|
-
**Fix:** Install SDK, wait for completion, verify `node_modules` before writing imports
|
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: workos-authkit-sveltekit
|
|
3
|
-
description: Integrate WorkOS AuthKit with SvelteKit. Server-side authentication with hooks and file-based routing.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# WorkOS AuthKit for SvelteKit
|
|
7
|
-
|
|
8
|
-
## Step 1: Fetch SDK Documentation (BLOCKING)
|
|
9
|
-
|
|
10
|
-
**STOP. Do not proceed until complete.**
|
|
11
|
-
|
|
12
|
-
WebFetch: `https://raw.githubusercontent.com/workos/authkit-sveltekit/main/README.md`
|
|
13
|
-
|
|
14
|
-
The README is the source of truth. If this skill conflicts with README, follow README.
|
|
15
|
-
|
|
16
|
-
## Step 2: Pre-Flight Validation
|
|
17
|
-
|
|
18
|
-
### Project Structure
|
|
19
|
-
|
|
20
|
-
- Confirm `svelte.config.js` (or `svelte.config.ts`) exists
|
|
21
|
-
- Confirm `package.json` contains `@sveltejs/kit` dependency
|
|
22
|
-
- Confirm `src/routes/` directory exists
|
|
23
|
-
|
|
24
|
-
### Environment Variables
|
|
25
|
-
|
|
26
|
-
Check `.env` or `.env.local` for:
|
|
27
|
-
|
|
28
|
-
- `WORKOS_API_KEY` - starts with `sk_`
|
|
29
|
-
- `WORKOS_CLIENT_ID` - starts with `client_`
|
|
30
|
-
- `WORKOS_REDIRECT_URI` - valid callback URL
|
|
31
|
-
- `WORKOS_COOKIE_PASSWORD` - 32+ characters
|
|
32
|
-
|
|
33
|
-
SvelteKit uses `$env/static/private` and `$env/dynamic/private` natively. The agent should write env vars to `.env` (SvelteKit's default) or `.env.local`.
|
|
34
|
-
|
|
35
|
-
## Step 2b: Partial Install Recovery
|
|
36
|
-
|
|
37
|
-
Before installing the SDK, check if a previous AuthKit attempt already exists:
|
|
38
|
-
|
|
39
|
-
1. Check if `@workos/authkit-sveltekit` is already in `package.json`
|
|
40
|
-
2. Check for incomplete setup signals:
|
|
41
|
-
- `src/hooks.server.ts` has commented-out `authkitHandle` import or exports a passthrough handle
|
|
42
|
-
- `src/routes/+layout.server.ts` has TODO comments about loading the session
|
|
43
|
-
- No callback `+server.ts` route exists in `src/routes/`
|
|
44
|
-
- No `WORKOS_COOKIE_PASSWORD` in `.env`
|
|
45
|
-
3. If partial install detected:
|
|
46
|
-
- Do NOT reinstall the SDK (it's already there)
|
|
47
|
-
- Read existing files to understand what's done vs missing
|
|
48
|
-
- Complete the integration by filling gaps rather than starting fresh
|
|
49
|
-
- The most common gap is the missing callback route — create it
|
|
50
|
-
- Wire up `authkitHandle` in hooks.server.ts properly (use `sequence()` if other hooks exist)
|
|
51
|
-
- Complete the layout load function
|
|
52
|
-
- Ensure `WORKOS_COOKIE_PASSWORD` is set in `.env`
|
|
53
|
-
|
|
54
|
-
## Step 2c: Existing Auth System Detection
|
|
55
|
-
|
|
56
|
-
Check for existing authentication before integrating:
|
|
57
|
-
|
|
58
|
-
```
|
|
59
|
-
package.json has 'lucia'? → Lucia v3 session auth
|
|
60
|
-
package.json has '@auth0/auth0-spa-js'? → Auth0 SPA auth
|
|
61
|
-
package.json has '@auth/sveltekit'? → Auth.js SvelteKit
|
|
62
|
-
src/hooks.server.ts handles cookies? → Custom session middleware
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
If existing auth detected (Lucia is most common in SvelteKit):
|
|
66
|
-
|
|
67
|
-
- Do NOT remove or disable the existing auth system
|
|
68
|
-
- Use `sequence()` from `@sveltejs/kit/hooks` to compose handles:
|
|
69
|
-
|
|
70
|
-
```typescript
|
|
71
|
-
import { sequence } from '@sveltejs/kit/hooks';
|
|
72
|
-
import { authkitHandle } from '@workos/authkit-sveltekit';
|
|
73
|
-
|
|
74
|
-
// Keep existing handle, compose with AuthKit
|
|
75
|
-
export const handle = sequence(authkitHandle, existingHandle);
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
- AuthKit handle should come FIRST in `sequence()` so it runs before other middleware
|
|
79
|
-
- Create separate WorkOS routes if `/login` or `/callback` are already taken (e.g., use `/auth/callback`)
|
|
80
|
-
- Ensure existing auth routes, form actions, and session cookies continue to work unchanged
|
|
81
|
-
- Document in code comments how to migrate fully to WorkOS AuthKit later
|
|
82
|
-
|
|
83
|
-
## Step 3: Install SDK
|
|
84
|
-
|
|
85
|
-
Detect package manager, install SDK package from README.
|
|
86
|
-
|
|
87
|
-
```
|
|
88
|
-
pnpm-lock.yaml? → pnpm add @workos/authkit-sveltekit
|
|
89
|
-
yarn.lock? → yarn add @workos/authkit-sveltekit
|
|
90
|
-
bun.lockb? → bun add @workos/authkit-sveltekit
|
|
91
|
-
else → npm install @workos/authkit-sveltekit
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
**Verify:** SDK package exists in node_modules before continuing.
|
|
95
|
-
|
|
96
|
-
## Step 4: Configure Server Hooks
|
|
97
|
-
|
|
98
|
-
SvelteKit uses `src/hooks.server.ts` for server-side middleware. This is where the AuthKit handler is registered.
|
|
99
|
-
|
|
100
|
-
Create or update `src/hooks.server.ts` with the authkit handle function from the README.
|
|
101
|
-
|
|
102
|
-
### Existing Hooks (IMPORTANT)
|
|
103
|
-
|
|
104
|
-
If `src/hooks.server.ts` already exists with custom logic, use SvelteKit's `sequence()` helper to compose hooks:
|
|
105
|
-
|
|
106
|
-
```typescript
|
|
107
|
-
import { sequence } from '@sveltejs/kit/hooks';
|
|
108
|
-
import { authkitHandle } from '@workos/authkit-sveltekit'; // Check README for exact export
|
|
109
|
-
|
|
110
|
-
export const handle = sequence(authkitHandle, yourExistingHandle);
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Check README for the exact export name and usage pattern.
|
|
114
|
-
|
|
115
|
-
## Step 5: Create Callback Route
|
|
116
|
-
|
|
117
|
-
Parse `WORKOS_REDIRECT_URI` to determine route path:
|
|
118
|
-
|
|
119
|
-
```
|
|
120
|
-
URI path --> Route location
|
|
121
|
-
/callback --> src/routes/callback/+server.ts
|
|
122
|
-
/auth/callback --> src/routes/auth/callback/+server.ts
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
Use the SDK's callback handler from the README. Do not write custom OAuth logic.
|
|
126
|
-
|
|
127
|
-
**Critical:** SvelteKit uses `+server.ts` for API routes, not `+page.server.ts`.
|
|
128
|
-
|
|
129
|
-
## Step 6: Layout Setup
|
|
130
|
-
|
|
131
|
-
Update `src/routes/+layout.server.ts` to load the auth session and pass it to all pages.
|
|
132
|
-
|
|
133
|
-
Check README for the exact pattern — typically a `load` function that returns the user session from locals.
|
|
134
|
-
|
|
135
|
-
```typescript
|
|
136
|
-
// src/routes/+layout.server.ts
|
|
137
|
-
import type { LayoutServerLoad } from './$types';
|
|
138
|
-
|
|
139
|
-
export const load: LayoutServerLoad = async (event) => {
|
|
140
|
-
// Check README for exact API — session is typically on event.locals
|
|
141
|
-
return {
|
|
142
|
-
user: event.locals.user, // or similar from README
|
|
143
|
-
};
|
|
144
|
-
};
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
## Step 7: UI Integration
|
|
148
|
-
|
|
149
|
-
Add auth UI to `src/routes/+page.svelte` using the session data from the layout.
|
|
150
|
-
|
|
151
|
-
- Show user info when authenticated
|
|
152
|
-
- Show sign-in link/button when not authenticated
|
|
153
|
-
- Add sign-out functionality
|
|
154
|
-
|
|
155
|
-
Check README for sign-in URL generation and sign-out patterns.
|
|
156
|
-
|
|
157
|
-
## Verification Checklist (ALL MUST PASS)
|
|
158
|
-
|
|
159
|
-
Run these commands to confirm integration. **Do not mark complete until all pass:**
|
|
160
|
-
|
|
161
|
-
```bash
|
|
162
|
-
# 1. Check hooks.server.ts exists and has authkit
|
|
163
|
-
grep -i "workos\|authkit" src/hooks.server.ts || echo "FAIL: authkit missing from hooks.server.ts"
|
|
164
|
-
|
|
165
|
-
# 2. Check callback route exists
|
|
166
|
-
find src/routes -name "+server.ts" -path "*/callback/*"
|
|
167
|
-
|
|
168
|
-
# 3. Check layout loads auth session
|
|
169
|
-
grep -i "user\|auth\|session" src/routes/+layout.server.ts || echo "FAIL: auth session missing from layout"
|
|
170
|
-
|
|
171
|
-
# 4. Build succeeds
|
|
172
|
-
pnpm build || npm run build
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
## Error Recovery
|
|
176
|
-
|
|
177
|
-
### "Cannot find module '@workos/authkit-sveltekit'"
|
|
178
|
-
|
|
179
|
-
- Check: SDK installed before writing imports
|
|
180
|
-
- Check: SDK package directory exists in node_modules
|
|
181
|
-
- Re-run install if missing
|
|
182
|
-
|
|
183
|
-
### hooks.server.ts not taking effect
|
|
184
|
-
|
|
185
|
-
- Check: File is at `src/hooks.server.ts`, not `src/hooks.ts` or elsewhere
|
|
186
|
-
- Check: Named export is `handle` (SvelteKit requirement)
|
|
187
|
-
- Check: If using `sequence()`, all handles are properly composed
|
|
188
|
-
|
|
189
|
-
### Callback route not found (404)
|
|
190
|
-
|
|
191
|
-
- Check: File uses `+server.ts` (not `+page.server.ts`)
|
|
192
|
-
- Check: Route path matches `WORKOS_REDIRECT_URI` path exactly
|
|
193
|
-
- Check: Exports `GET` handler (SvelteKit convention)
|
|
194
|
-
|
|
195
|
-
### "locals" type errors
|
|
196
|
-
|
|
197
|
-
- Check: App.Locals interface is augmented in `src/app.d.ts`
|
|
198
|
-
- Check README for TypeScript setup instructions
|
|
199
|
-
|
|
200
|
-
### Cookie password error
|
|
201
|
-
|
|
202
|
-
- Verify `WORKOS_COOKIE_PASSWORD` is 32+ characters
|
|
203
|
-
- Generate new: `openssl rand -base64 32`
|
|
204
|
-
|
|
205
|
-
### Auth state not available in pages
|
|
206
|
-
|
|
207
|
-
- Check: `+layout.server.ts` load function returns user data
|
|
208
|
-
- Check: Pages access data via `export let data` (Svelte 4) or `$page.data` (Svelte 5)
|