vibes-plug 2.5.0 → 2.11.0

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.
Files changed (177) hide show
  1. package/.claude/rules/vibes-plug-core.md +32 -0
  2. package/.cursor/rules/vibes-plug-core.mdc +51 -0
  3. package/.cursorrules +42 -0
  4. package/AGENTS.md +37 -7
  5. package/BLUEPRINT.md +309 -217
  6. package/CHANGELOG.md +133 -1
  7. package/CLAUDE.md +70 -0
  8. package/LICENSE +1 -1
  9. package/README.md +641 -415
  10. package/index.js +19 -0
  11. package/package.json +44 -8
  12. package/plugin.json +24 -7
  13. package/scripts/generate_swarm_gif.py +295 -0
  14. package/scripts/install.js +201 -0
  15. package/skills/accessibility-testing-expert/SKILL.md +116 -0
  16. package/skills/ai-cost-token-optimizer/SKILL.md +82 -52
  17. package/skills/ai-evals-benchmark-expert/SKILL.md +188 -0
  18. package/skills/ai-llm-integration-expert/SKILL.md +185 -178
  19. package/skills/ai-media-generation-expert/SKILL.md +172 -0
  20. package/skills/ai-prompt-engineering-expert/SKILL.md +84 -0
  21. package/skills/angular-expert/SKILL.md +148 -0
  22. package/skills/api-design-expert/SKILL.md +6 -3
  23. package/skills/api-gateway-proxy-expert/SKILL.md +81 -0
  24. package/skills/app-analyzer-optimizer/SKILL.md +6 -3
  25. package/skills/apple-ecosystem-expert/SKILL.md +144 -141
  26. package/skills/{asisten_ramah → asisten-ramah}/SKILL.md +7 -1
  27. package/skills/astro-framework-expert/SKILL.md +200 -0
  28. package/skills/async-queue-temporal-expert/SKILL.md +210 -24
  29. package/skills/authentication-identity-expert/SKILL.md +278 -275
  30. package/skills/auto-doc-updater/SKILL.md +7 -1
  31. package/skills/autonomous-chaos-monkey/SKILL.md +63 -63
  32. package/skills/autonomous-red-teamer/SKILL.md +172 -28
  33. package/skills/autonomous-tdd-debugger/SKILL.md +70 -64
  34. package/skills/background-jobs-queue-expert/SKILL.md +235 -0
  35. package/skills/biome-linter-formatter-expert/SKILL.md +89 -0
  36. package/skills/blockchain-web3-expert/SKILL.md +115 -0
  37. package/skills/bootstrap-to-modern/SKILL.md +9 -6
  38. package/skills/brainstorming/SKILL.md +58 -50
  39. package/skills/browser-automation-expert/SKILL.md +197 -21
  40. package/skills/bun-runtime-expert/SKILL.md +7 -1
  41. package/skills/chatbot-messaging-expert/SKILL.md +114 -0
  42. package/skills/ci-cd-devops-architect/SKILL.md +45 -36
  43. package/skills/cloud-hosting-expert/SKILL.md +7 -1
  44. package/skills/coderabbit/SKILL.md +7 -1
  45. package/skills/compliance-gdpr-privacy-expert/SKILL.md +85 -0
  46. package/skills/cron-scheduler-expert/SKILL.md +303 -297
  47. package/skills/data-pipeline-etl-expert/SKILL.md +84 -0
  48. package/skills/data-telemetry-expert/SKILL.md +7 -1
  49. package/skills/data-visualization-expert/SKILL.md +154 -0
  50. package/skills/database-migration-versioning-expert/SKILL.md +90 -0
  51. package/skills/database-orm-expert/SKILL.md +13 -3
  52. package/skills/dependency-upgrade-migrator/SKILL.md +300 -294
  53. package/skills/design-system-architect/SKILL.md +278 -259
  54. package/skills/desktop-electron-expert/SKILL.md +128 -0
  55. package/skills/documentation-site-expert/SKILL.md +59 -0
  56. package/skills/doku-mcp-server/SKILL.md +7 -1
  57. package/skills/doku-payment-gateway/SKILL.md +7 -1
  58. package/skills/domain-driven-design-expert/SKILL.md +82 -0
  59. package/skills/e2e-testing-expert/SKILL.md +7 -1
  60. package/skills/ecommerce-expert/SKILL.md +87 -0
  61. package/skills/edge-serverless-db-expert/SKILL.md +98 -42
  62. package/skills/email-notification-expert/SKILL.md +367 -361
  63. package/skills/error-resilience-expert/SKILL.md +485 -479
  64. package/skills/event-driven-architect/SKILL.md +7 -1
  65. package/skills/feature-flag-analytics-expert/SKILL.md +65 -45
  66. package/skills/file-upload-media-expert/SKILL.md +436 -430
  67. package/skills/firebase-security-expert/SKILL.md +7 -1
  68. package/skills/form-validation-expert/SKILL.md +406 -400
  69. package/skills/fullstack-expert/SKILL.md +60 -1
  70. package/skills/gemini-agent-booster/SKILL.md +173 -135
  71. package/skills/geospatial-maps-expert/SKILL.md +80 -0
  72. package/skills/global-a11y-i18n-expert/SKILL.md +7 -1
  73. package/skills/glsl-shader-expert/SKILL.md +106 -100
  74. package/skills/go-programming-expert/SKILL.md +21 -15
  75. package/skills/graph-rag-knowledge-expert/SKILL.md +159 -0
  76. package/skills/graphql-apollo-expert/SKILL.md +113 -107
  77. package/skills/headless-cms-expert/SKILL.md +181 -0
  78. package/skills/hig/SKILL.md +7 -1
  79. package/skills/js-backend-expert/SKILL.md +218 -216
  80. package/skills/legacy-code-translator/SKILL.md +70 -64
  81. package/skills/local-slm-edge-ai-expert/SKILL.md +167 -0
  82. package/skills/logging-error-tracking-expert/SKILL.md +343 -337
  83. package/skills/mcp-client-orchestrator/SKILL.md +75 -69
  84. package/skills/mcp-server-architect/SKILL.md +294 -194
  85. package/skills/micro-frontend-architect/SKILL.md +111 -105
  86. package/skills/mobile-expo-expert/SKILL.md +8 -2
  87. package/skills/mobile-push-notification-expert/SKILL.md +70 -50
  88. package/skills/modern-css-native-expert/SKILL.md +189 -0
  89. package/skills/monday-design-aesthetic/SKILL.md +7 -1
  90. package/skills/monorepo-architect/SKILL.md +7 -1
  91. package/skills/mpa-orchestrator/SKILL.md +20 -1
  92. package/skills/multi-agent-orchestration/SKILL.md +254 -234
  93. package/skills/multiple-entry-points/SKILL.md +37 -1
  94. package/skills/mvc-expert/SKILL.md +7 -1
  95. package/skills/n8n-automation-expert/SKILL.md +89 -0
  96. package/skills/nextjs-app-router-expert/SKILL.md +148 -0
  97. package/skills/openapi-swagger-codegen-expert/SKILL.md +67 -0
  98. package/skills/payment-gateway-expert/SKILL.md +85 -1
  99. package/skills/pdf-document-generation-expert/SKILL.md +91 -0
  100. package/skills/performance-web-vitals/SKILL.md +7 -1
  101. package/skills/post-quantum-crypto-migrator/SKILL.md +57 -57
  102. package/skills/prd-architect/SKILL.md +7 -1
  103. package/skills/proactive-background-watcher/SKILL.md +67 -61
  104. package/skills/production-ready-hardener/SKILL.md +461 -455
  105. package/skills/project-context-mapper/SKILL.md +84 -78
  106. package/skills/pwa-offline-first-expert/SKILL.md +185 -0
  107. package/skills/python-programming-expert/SKILL.md +407 -401
  108. package/skills/rate-limit-abuse-prevention/SKILL.md +376 -370
  109. package/skills/realtime-collaboration-expert/SKILL.md +55 -1
  110. package/skills/rich-text-editor-expert/SKILL.md +177 -0
  111. package/skills/rust-programming-expert/SKILL.md +7 -1
  112. package/skills/saas-billing/SKILL.md +7 -1
  113. package/skills/saas-multi-tenant/SKILL.md +7 -1
  114. package/skills/saas-mvp-launcher/SKILL.md +20 -1
  115. package/skills/saas-transformer/SKILL.md +499 -488
  116. package/skills/scalability-clean-code/SKILL.md +7 -1
  117. package/skills/search-engine-expert/SKILL.md +89 -0
  118. package/skills/secure-fuzz-testing/SKILL.md +7 -1
  119. package/skills/self-evolving-memory-graph/SKILL.md +90 -74
  120. package/skills/self-healing-cloud-orchestrator/SKILL.md +57 -57
  121. package/skills/senior-frontend/SKILL.md +141 -161
  122. package/skills/seo/SKILL.md +41 -17
  123. package/skills/session-context-loader/SKILL.md +82 -76
  124. package/skills/session-handoff-resume/SKILL.md +7 -1
  125. package/skills/{skill_baru → skill-baru}/SKILL.md +8 -2
  126. package/skills/solidjs-expert/SKILL.md +80 -0
  127. package/skills/spa-orchestrator/SKILL.md +20 -1
  128. package/skills/sse-websocket-streaming-expert/SKILL.md +93 -0
  129. package/skills/state-management-expert/SKILL.md +7 -1
  130. package/skills/supabase-migration/SKILL.md +47 -1
  131. package/skills/supabase-security-expert/SKILL.md +7 -1
  132. package/skills/svelte-sveltekit-expert/SKILL.md +91 -0
  133. package/skills/svg-animation-motion-expert/SKILL.md +115 -0
  134. package/skills/tailwind-expert/SKILL.md +88 -136
  135. package/skills/tanstack-query-expert/SKILL.md +7 -1
  136. package/skills/tauri-expert/SKILL.md +7 -1
  137. package/skills/token-saver/SKILL.md +1 -1
  138. package/skills/typescript-expert/SKILL.md +12 -6
  139. package/skills/ui-components-expert/SKILL.md +165 -279
  140. package/skills/ui-ux-pro-max/SKILL.md +23 -3
  141. package/skills/vector-db-rag-expert/SKILL.md +175 -19
  142. package/skills/vibe-code-gardener/SKILL.md +1 -1
  143. package/skills/visual-qa-vision-agent/SKILL.md +70 -64
  144. package/skills/voice-ai-realtime-agent/SKILL.md +202 -0
  145. package/skills/vue-frontend-expert/SKILL.md +131 -125
  146. package/skills/wasm-edge-computing-expert/SKILL.md +97 -0
  147. package/skills/web-3d-graphics-expert/SKILL.md +136 -130
  148. package/skills/web-game-engine-expert/SKILL.md +101 -95
  149. package/skills/web-scraper/SKILL.md +157 -207
  150. package/skills/website-design-cloner/SKILL.md +179 -173
  151. package/skills/webxr-ar-vr-expert/SKILL.md +122 -116
  152. package/skills/wordpress-headless-expert/SKILL.md +144 -0
  153. package/skills/zero-to-prod-orchestrator/SKILL.md +52 -27
  154. package/skills/zero-trust-secret-vault/SKILL.md +87 -39
  155. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  156. package/.github/workflows/publish.yml +0 -20
  157. package/CONTRIBUTING.md +0 -199
  158. package/SECURITY.md +0 -21
  159. package/banner.png +0 -0
  160. package/skills/autonomous-swarm-director/SKILL.md +0 -69
  161. package/skills/hyper-context-synthesizer/SKILL.md +0 -55
  162. package/skills/llm-cost-arbitrage-router/SKILL.md +0 -59
  163. package/skills/senior-fullstack/SKILL.md +0 -167
  164. package/skills/senior-fullstack/references/architecture_patterns.md +0 -160
  165. package/skills/senior-fullstack/references/development_workflows.md +0 -222
  166. package/skills/senior-fullstack/references/tech_stack_guide.md +0 -190
  167. package/skills/senior-fullstack/scripts/code_quality_analyzer.py +0 -114
  168. package/skills/senior-fullstack/scripts/fullstack_scaffolder.py +0 -114
  169. package/skills/senior-fullstack/scripts/project_scaffolder.py +0 -114
  170. package/skills/seo-aeo-landing-page-writer/SKILL.md +0 -97
  171. package/skills/seo-geo/SKILL.md +0 -188
  172. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-310.pyc +0 -0
  173. package/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc +0 -0
  174. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-310.pyc +0 -0
  175. package/skills/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc +0 -0
  176. package/skills/ui_ux_expert/SKILL.md +0 -125
  177. package/vibes-swarm-demo.gif +0 -0
@@ -1,276 +1,279 @@
1
- ---
2
- name: authentication-identity-expert
3
- description: "Expert guide for implementing secure authentication, authorization (RBAC/ABAC), OAuth2, and identity management (Clerk, Auth.js, Supabase Auth) / Panduan ahli untuk autentikasi dan otorisasi."
4
- author: vibes-plug-swarm
5
- ---
6
-
7
- # Authentication & Identity Expert (2026 Edition)
8
-
9
- [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
-
11
- ---
12
-
13
- <a name="english"></a>
14
- ## English
15
-
16
- ### Description
17
- Production-grade guide for implementing secure authentication, authorization, and identity management in modern web and mobile applications. Covers **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, JWT patterns, OAuth 2.1, PKCE flows, RBAC/ABAC, passkeys (WebAuthn), and MFA implementation for React 19 / Next.js 15 stacks.
18
-
19
- ### Trigger Conditions
20
- - Working on login/signup flows, session management, or OAuth integration.
21
- - Integrating **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, or **Auth0**.
22
- - Implementing **Role-Based Access Control (RBAC)** or **Attribute-Based Access Control (ABAC)**.
23
- - Setting up **WebAuthn/Passkeys**, **MFA/2FA**, or **SSO**.
24
- - Securing Next.js App Router routes with middleware-based auth guards.
25
- - Implementing **OAuth 2.1** flows with PKCE for SPAs or mobile apps.
26
-
27
- ---
28
-
29
- ### Identity Provider Selection Guide (2026)
30
-
31
- | Provider | Best For | Key Strength |
32
- |---|---|---|
33
- | **Clerk** | SaaS, B2B apps | Built-in organizations, roles, MFA, UI components |
34
- | **Supabase Auth** | Supabase-powered apps | RLS integration, social login, SSO |
35
- | **Auth.js v5** | Next.js self-hosted | Flexible adapters, edge-compatible |
36
- | **Better Auth** | TypeScript-first self-hosted | Modern DX, built-in 2FA, org management |
37
- | **Auth0** | Enterprise, compliance | Enterprise SSO, compliance (SOC2, HIPAA) |
38
-
39
- **Recommendation**: Use **Clerk** for most new SaaS apps (best DX). Use **Supabase Auth** if you're already using Supabase. Use **Better Auth** for full control without vendor lock-in.
40
-
41
- ---
42
-
43
- ### Core Security Principles
44
-
45
- #### 1. Never Roll Your Own Crypto
46
- - Use `argon2id` (preferred) or `bcrypt` for password hashing — **never MD5, SHA1, or plain SHA256**.
47
- - Use battle-tested libraries: `@node-rs/argon2`, `bcryptjs`.
48
- - Minimum: bcrypt cost factor ≥12, argon2id memory ≥64MB.
49
-
50
- #### 2. JWT Best Practices
51
- ```typescript
52
- // ✅ Short-lived access tokens + HttpOnly refresh tokens
53
- const ACCESS_TOKEN_EXPIRY = '15m'; // 15 minutes
54
- const REFRESH_TOKEN_EXPIRY = '7d'; // 7 days
55
-
56
- // ✅ Store refresh tokens in HttpOnly, Secure, SameSite=Strict cookies
57
- res.cookie('refresh_token', token, {
58
- httpOnly: true,
59
- secure: true,
60
- sameSite: 'strict',
61
- maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in ms
62
- });
63
-
64
- // ❌ Never store tokens in localStorage (XSS vulnerable)
65
- // ❌ Never put sensitive data in JWT payload (it's base64 decoded, not encrypted)
66
- ```
67
-
68
- #### 3. OAuth 2.1 + PKCE (For SPAs & Mobile)
69
- ```typescript
70
- // PKCE flow — required for public clients in OAuth 2.1
71
- import { generateCodeVerifier, generateCodeChallenge } from 'oslo/oauth2';
72
-
73
- const codeVerifier = generateCodeVerifier(); // 43-128 char random string
74
- const codeChallenge = await generateCodeChallenge(codeVerifier); // SHA-256 hash
75
-
76
- // Store codeVerifier in sessionStorage (NOT localStorage) during redirect
77
- sessionStorage.setItem('pkce_verifier', codeVerifier);
78
-
79
- // Auth URL includes challenge
80
- const authUrl = new URL('https://provider.com/oauth/authorize');
81
- authUrl.searchParams.set('code_challenge', codeChallenge);
82
- authUrl.searchParams.set('code_challenge_method', 'S256');
83
- authUrl.searchParams.set('state', cryptoRandomState); // CSRF protection
84
- ```
85
-
86
- #### 4. Clerk — Next.js 15 Integration
87
- ```typescript
88
- // middleware.ts — protect routes at the edge
89
- import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
90
-
91
- const isPublicRoute = createRouteMatcher([
92
- '/', '/sign-in(.*)', '/sign-up(.*)', '/api/webhooks(.*)',
93
- ]);
94
-
95
- export default clerkMiddleware(async (auth, req) => {
96
- if (!isPublicRoute(req)) {
97
- await auth.protect(); // Redirects to sign-in if unauthenticated
98
- }
99
- });
100
-
101
- export const config = {
102
- matcher: ['/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', '/(api|trpc)(.*)'],
103
- };
104
- ```
105
-
106
- ```typescript
107
- // Server Component — get user on the server
108
- import { auth, currentUser } from '@clerk/nextjs/server';
109
-
110
- export default async function DashboardPage() {
111
- const { userId, orgId, orgRole } = await auth();
112
- if (!userId) redirect('/sign-in');
113
-
114
- const user = await currentUser();
115
- return <div>Welcome, {user?.firstName}!</div>;
116
- }
117
- ```
118
-
119
- #### 5. Supabase Auth — RLS Integration
120
- ```typescript
121
- // Create Supabase client with user session
122
- import { createServerClient } from '@supabase/ssr';
123
-
124
- export async function createSupabaseServerClient(cookieStore: ReadonlyRequestCookies) {
125
- return createServerClient(
126
- process.env.NEXT_PUBLIC_SUPABASE_URL!,
127
- process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
128
- {
129
- cookies: {
130
- getAll: () => cookieStore.getAll(),
131
- setAll: (cookies) => cookies.forEach(({ name, value, options }) =>
132
- cookieStore.set(name, value, options)
133
- ),
134
- },
135
- }
136
- );
137
- }
138
-
139
- // RLS in PostgreSQL — users can only access their own rows
140
- -- CREATE POLICY "Users can only see own data" ON profiles
141
- -- FOR ALL USING (auth.uid() = user_id);
142
- ```
143
-
144
- #### 6. Auth.js v5 (Next.js App Router)
145
- ```typescript
146
- // auth.ts
147
- import NextAuth from 'next-auth';
148
- import GitHub from 'next-auth/providers/github';
149
- import { DrizzleAdapter } from '@auth/drizzle-adapter';
150
- import { db } from '@/db';
151
-
152
- export const { handlers, auth, signIn, signOut } = NextAuth({
153
- adapter: DrizzleAdapter(db),
154
- providers: [
155
- GitHub,
156
- // Add more providers...
157
- ],
158
- session: { strategy: 'database' }, // or 'jwt'
159
- callbacks: {
160
- authorized({ auth, request: { nextUrl } }) {
161
- const isLoggedIn = !!auth?.user;
162
- const isProtected = nextUrl.pathname.startsWith('/dashboard');
163
- if (isProtected && !isLoggedIn) return false;
164
- return true;
165
- },
166
- },
167
- });
168
- ```
169
-
170
- #### 7. RBAC — Role-Based Access Control (Server-Side)
171
- ```typescript
172
- // ✅ Always enforce roles server-side — never rely on client UI alone
173
- type Role = 'viewer' | 'editor' | 'admin' | 'super_admin';
174
-
175
- const permissions: Record<Role, string[]> = {
176
- viewer: ['read:posts'],
177
- editor: ['read:posts', 'write:posts', 'delete:own_posts'],
178
- admin: ['read:posts', 'write:posts', 'delete:any_post', 'manage:users'],
179
- super_admin: ['*'], // All permissions
180
- };
181
-
182
- function hasPermission(userRole: Role, required: string): boolean {
183
- const allowed = permissions[userRole];
184
- return allowed.includes('*') || allowed.includes(required);
185
- }
186
-
187
- // In Server Action / API Route
188
- const { userId } = await auth();
189
- const user = await db.query.users.findFirst({ where: eq(users.id, userId) });
190
-
191
- if (!hasPermission(user.role, 'delete:any_post')) {
192
- throw new Error('Forbidden');
193
- }
194
- ```
195
-
196
- #### 8. WebAuthn / Passkeys (2026 Standard)
197
- ```typescript
198
- // Using SimpleWebAuthn library
199
- import { generateRegistrationOptions, verifyRegistrationResponse } from '@simplewebauthn/server';
200
-
201
- // Registration — generate challenge
202
- const options = await generateRegistrationOptions({
203
- rpName: 'My App',
204
- rpID: 'myapp.com',
205
- userName: user.email,
206
- attestationType: 'none',
207
- authenticatorSelection: {
208
- residentKey: 'preferred', // Enables passkeys
209
- userVerification: 'preferred',
210
- },
211
- });
212
-
213
- // Store challenge in session, send options to client
214
- await redis.setex(`webauthn:${userId}`, 60, JSON.stringify(options.challenge));
215
- ```
216
-
217
- ### Security Checklist
218
- - [ ] Passwords hashed with argon2id (cost ≥64MB) or bcrypt (cost ≥12).
219
- - [ ] JWT access tokens expire in ≤15 minutes; refresh in HttpOnly cookies.
220
- - [ ] OAuth state parameter validated on callback (CSRF protection).
221
- - [ ] PKCE enforced for all public OAuth clients.
222
- - [ ] All authorization checks enforced server-side (not UI-only).
223
- - [ ] Admin routes protected by both auth middleware AND role check.
224
- - [ ] MFA offered (TOTP/WebAuthn) for privileged accounts.
225
- - [ ] Refresh token rotation on every use (detect theft).
226
- - [ ] Rate limiting on login/signup endpoints (prevent brute force).
227
- - [ ] Account lockout after N failed attempts.
228
-
229
- ---
230
-
231
- <a name="bahasa-indonesia"></a>
232
- ## Bahasa Indonesia
233
-
234
- ### Deskripsi
235
- Panduan tingkat produksi untuk mengimplementasikan autentikasi, otorisasi, dan manajemen identitas yang aman pada aplikasi web dan mobile modern. Mencakup **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, pola JWT, OAuth 2.1, alur PKCE, RBAC/ABAC, passkey (WebAuthn), dan implementasi MFA untuk stack React 19 / Next.js 15.
236
-
237
- ### Kondisi Pemicu
238
- - Mengerjakan alur login/signup, manajemen sesi, atau integrasi OAuth.
239
- - Mengintegrasikan Clerk, Supabase Auth, Auth.js v5, Better Auth, atau Auth0.
240
- - Mengimplementasikan RBAC (Role-Based Access Control) atau ABAC.
241
- - Menyiapkan WebAuthn/Passkeys, MFA/2FA, atau SSO.
242
- - Mengamankan rute Next.js App Router dengan auth guard berbasis middleware.
243
-
244
- ### Panduan Teknis
245
-
246
- #### 1. Prinsip Keamanan Inti
247
- - **Jangan buat kriptografi sendiri**: Gunakan `argon2id` atau `bcrypt` untuk hashing password.
248
- - **JWT berumur pendek**: Access token ≤15 menit, refresh token di HttpOnly cookie.
249
- - **PKCE wajib** untuk semua public OAuth client (SPA, mobile).
250
- - **Validasi state OAuth** di callback untuk proteksi CSRF.
251
-
252
- #### 2. Pemilihan Identity Provider
253
- - **Clerk**: Terbaik untuk SaaS baru DX terbaik, komponen UI siap pakai, manajemen organisasi.
254
- - **Supabase Auth**: Ideal jika sudah pakai Supabase — integrasi langsung dengan RLS.
255
- - **Auth.js v5**: Self-hosted, fleksibel, edge-compatible untuk Next.js.
256
- - **Better Auth**: TypeScript-first, kontrol penuh tanpa vendor lock-in.
257
-
258
- #### 3. RBAC di Sisi Server
259
- Selalu terapkan pengecekan role di server (Server Action, API route, middleware) **jangan hanya di UI**. Gunakan tabel permission yang memetakan setiap role ke daftar aksi yang diizinkan.
260
-
261
- #### 4. WebAuthn / Passkeys
262
- Gunakan library `@simplewebauthn/server` untuk registrasi dan verifikasi passkey. Simpan challenge di Redis dengan TTL pendek (60 detik) untuk mencegah replay attack.
263
-
264
- #### 5. Checklist Keamanan
265
- - Password di-hash dengan argon2id atau bcrypt.
266
- - JWT access token expire ≤15 menit; refresh di HttpOnly cookie.
267
- - State OAuth divalidasi saat callback.
268
- - PKCE diterapkan untuk semua klien publik OAuth.
269
- - Pengecekan otorisasi dilakukan di server, bukan hanya UI.
270
- - MFA ditawarkan untuk akun privileged.
271
- - Rate limiting di endpoint login/signup.
272
- - Rotasi refresh token setiap kali digunakan.
273
-
274
-
275
- ## Orchestration & Integration
1
+ ---
2
+ name: authentication-identity-expert
3
+ description: "Expert guide for implementing secure authentication, authorization (RBAC/ABAC), OAuth2, and identity management (Clerk, Auth.js, Supabase Auth) / Panduan ahli untuk autentikasi dan otorisasi."
4
+ author: "Roedy Rustam"
5
+ ---
6
+
7
+ # Authentication & Identity Expert (2026 Edition)
8
+
9
+ [English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
10
+
11
+ ---
12
+
13
+ <a name="english"></a>
14
+ ## English
15
+
16
+ ### Description
17
+ Production-grade guide for implementing secure authentication, authorization, and identity management in modern web and mobile applications. Covers **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, JWT patterns, OAuth 2.1, PKCE flows, RBAC/ABAC, passkeys (WebAuthn), and MFA implementation for React 19 / Next.js 15 stacks.
18
+
19
+ ### Trigger Conditions
20
+ - Working on login/signup flows, session management, or OAuth integration.
21
+ - Integrating **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, or **Auth0**.
22
+ - Implementing **Role-Based Access Control (RBAC)** or **Attribute-Based Access Control (ABAC)**.
23
+ - Setting up **WebAuthn/Passkeys**, **MFA/2FA**, or **SSO**.
24
+ - Securing Next.js App Router routes with middleware-based auth guards.
25
+ - Implementing **OAuth 2.1** flows with PKCE for SPAs or mobile apps.
26
+
27
+ ---
28
+
29
+ ### Identity Provider Selection Guide (2026)
30
+
31
+ | Provider | Best For | Key Strength |
32
+ |---|---|---|
33
+ | **Clerk** | SaaS, B2B apps | Built-in organizations, roles, MFA, UI components |
34
+ | **Supabase Auth** | Supabase-powered apps | RLS integration, social login, SSO |
35
+ | **Auth.js v5** | Next.js self-hosted | Flexible adapters, edge-compatible |
36
+ | **Better Auth** | TypeScript-first self-hosted | Modern DX, built-in 2FA, org management |
37
+ | **Auth0** | Enterprise, compliance | Enterprise SSO, compliance (SOC2, HIPAA) |
38
+
39
+ **Recommendation**: Use **Clerk** for most new SaaS apps (best DX). Use **Supabase Auth** if you're already using Supabase. Use **Better Auth** for full control without vendor lock-in.
40
+
41
+ ---
42
+
43
+ ### Core Security Principles
44
+
45
+ #### 1. Never Roll Your Own Crypto
46
+ - Use `argon2id` (preferred) or `bcrypt` for password hashing — **never MD5, SHA1, or plain SHA256**.
47
+ - Use battle-tested libraries: `@node-rs/argon2`, `bcryptjs`.
48
+ - Minimum: bcrypt cost factor ≥12, argon2id memory ≥64MB.
49
+
50
+ #### 2. JWT Best Practices
51
+ ```typescript
52
+ // ✅ Short-lived access tokens + HttpOnly refresh tokens
53
+ const ACCESS_TOKEN_EXPIRY = '15m'; // 15 minutes
54
+ const REFRESH_TOKEN_EXPIRY = '7d'; // 7 days
55
+
56
+ // ✅ Store refresh tokens in HttpOnly, Secure, SameSite=Strict cookies
57
+ res.cookie('refresh_token', token, {
58
+ httpOnly: true,
59
+ secure: true,
60
+ sameSite: 'strict',
61
+ maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in ms
62
+ });
63
+
64
+ // ❌ Never store tokens in localStorage (XSS vulnerable)
65
+ // ❌ Never put sensitive data in JWT payload (it's base64 decoded, not encrypted)
66
+ ```
67
+
68
+ #### 3. OAuth 2.1 + PKCE (For SPAs & Mobile)
69
+ ```typescript
70
+ // PKCE flow — required for public clients in OAuth 2.1
71
+ import { generateCodeVerifier, generateCodeChallenge } from 'oslo/oauth2';
72
+
73
+ const codeVerifier = generateCodeVerifier(); // 43-128 char random string
74
+ const codeChallenge = await generateCodeChallenge(codeVerifier); // SHA-256 hash
75
+
76
+ // Store codeVerifier in sessionStorage (NOT localStorage) during redirect
77
+ sessionStorage.setItem('pkce_verifier', codeVerifier);
78
+
79
+ // Auth URL includes challenge
80
+ const authUrl = new URL('https://provider.com/oauth/authorize');
81
+ authUrl.searchParams.set('code_challenge', codeChallenge);
82
+ authUrl.searchParams.set('code_challenge_method', 'S256');
83
+ authUrl.searchParams.set('state', cryptoRandomState); // CSRF protection
84
+ ```
85
+
86
+ #### 4. Clerk — Next.js 15 Integration
87
+ ```typescript
88
+ // middleware.ts — protect routes at the edge
89
+ import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
90
+
91
+ const isPublicRoute = createRouteMatcher([
92
+ '/', '/sign-in(.*)', '/sign-up(.*)', '/api/webhooks(.*)',
93
+ ]);
94
+
95
+ export default clerkMiddleware(async (auth, req) => {
96
+ if (!isPublicRoute(req)) {
97
+ await auth.protect(); // Redirects to sign-in if unauthenticated
98
+ }
99
+ });
100
+
101
+ export const config = {
102
+ matcher: ['/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', '/(api|trpc)(.*)'],
103
+ };
104
+ ```
105
+
106
+ ```typescript
107
+ // Server Component — get user on the server
108
+ import { auth, currentUser } from '@clerk/nextjs/server';
109
+
110
+ export default async function DashboardPage() {
111
+ const { userId, orgId, orgRole } = await auth();
112
+ if (!userId) redirect('/sign-in');
113
+
114
+ const user = await currentUser();
115
+ return <div>Welcome, {user?.firstName}!</div>;
116
+ }
117
+ ```
118
+
119
+ #### 5. Supabase Auth — RLS Integration
120
+ ```typescript
121
+ // Create Supabase client with user session
122
+ import { createServerClient } from '@supabase/ssr';
123
+
124
+ export async function createSupabaseServerClient(cookieStore: ReadonlyRequestCookies) {
125
+ return createServerClient(
126
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
127
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
128
+ {
129
+ cookies: {
130
+ getAll: () => cookieStore.getAll(),
131
+ setAll: (cookies) => cookies.forEach(({ name, value, options }) =>
132
+ cookieStore.set(name, value, options)
133
+ ),
134
+ },
135
+ }
136
+ );
137
+ }
138
+
139
+ // RLS in PostgreSQL — users can only access their own rows
140
+ -- CREATE POLICY "Users can only see own data" ON profiles
141
+ -- FOR ALL USING (auth.uid() = user_id);
142
+ ```
143
+
144
+ #### 6. Auth.js v5 (Next.js App Router)
145
+ ```typescript
146
+ // auth.ts
147
+ import NextAuth from 'next-auth';
148
+ import GitHub from 'next-auth/providers/github';
149
+ import { DrizzleAdapter } from '@auth/drizzle-adapter';
150
+ import { db } from '@/db';
151
+
152
+ export const { handlers, auth, signIn, signOut } = NextAuth({
153
+ adapter: DrizzleAdapter(db),
154
+ providers: [
155
+ GitHub,
156
+ // Add more providers...
157
+ ],
158
+ session: { strategy: 'database' }, // or 'jwt'
159
+ callbacks: {
160
+ authorized({ auth, request: { nextUrl } }) {
161
+ const isLoggedIn = !!auth?.user;
162
+ const isProtected = nextUrl.pathname.startsWith('/dashboard');
163
+ if (isProtected && !isLoggedIn) return false;
164
+ return true;
165
+ },
166
+ },
167
+ });
168
+ ```
169
+
170
+ #### 7. RBAC — Role-Based Access Control (Server-Side)
171
+ ```typescript
172
+ // ✅ Always enforce roles server-side — never rely on client UI alone
173
+ type Role = 'viewer' | 'editor' | 'admin' | 'super_admin';
174
+
175
+ const permissions: Record<Role, string[]> = {
176
+ viewer: ['read:posts'],
177
+ editor: ['read:posts', 'write:posts', 'delete:own_posts'],
178
+ admin: ['read:posts', 'write:posts', 'delete:any_post', 'manage:users'],
179
+ super_admin: ['*'], // All permissions
180
+ };
181
+
182
+ function hasPermission(userRole: Role, required: string): boolean {
183
+ const allowed = permissions[userRole];
184
+ return allowed.includes('*') || allowed.includes(required);
185
+ }
186
+
187
+ // In Server Action / API Route
188
+ const { userId } = await auth();
189
+ const user = await db.query.users.findFirst({ where: eq(users.id, userId) });
190
+
191
+ if (!hasPermission(user.role, 'delete:any_post')) {
192
+ throw new Error('Forbidden');
193
+ }
194
+ ```
195
+
196
+ #### 8. WebAuthn / Passkeys (2026 Standard)
197
+ ```typescript
198
+ // Using SimpleWebAuthn library
199
+ import { generateRegistrationOptions, verifyRegistrationResponse } from '@simplewebauthn/server';
200
+
201
+ // Registration — generate challenge
202
+ const options = await generateRegistrationOptions({
203
+ rpName: 'My App',
204
+ rpID: 'myapp.com',
205
+ userName: user.email,
206
+ attestationType: 'none',
207
+ authenticatorSelection: {
208
+ residentKey: 'preferred', // Enables passkeys
209
+ userVerification: 'preferred',
210
+ },
211
+ });
212
+
213
+ // Store challenge in session, send options to client
214
+ await redis.setex(`webauthn:${userId}`, 60, JSON.stringify(options.challenge));
215
+ ```
216
+
217
+ ### Security Checklist
218
+ - [ ] Passwords hashed with argon2id (cost ≥64MB) or bcrypt (cost ≥12).
219
+ - [ ] JWT access tokens expire in ≤15 minutes; refresh in HttpOnly cookies.
220
+ - [ ] OAuth state parameter validated on callback (CSRF protection).
221
+ - [ ] PKCE enforced for all public OAuth clients.
222
+ - [ ] All authorization checks enforced server-side (not UI-only).
223
+ - [ ] Admin routes protected by both auth middleware AND role check.
224
+ - [ ] MFA offered (TOTP/WebAuthn) for privileged accounts.
225
+ - [ ] Refresh token rotation on every use (detect theft).
226
+ - [ ] Rate limiting on login/signup endpoints (prevent brute force).
227
+ - [ ] Account lockout after N failed attempts.
228
+
229
+ ---
230
+
231
+ <a name="bahasa-indonesia"></a>
232
+ ## Bahasa Indonesia
233
+
234
+ ### Integrasi Orkestrasi
235
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
236
+
237
+ ### Deskripsi
238
+ Panduan tingkat produksi untuk mengimplementasikan autentikasi, otorisasi, dan manajemen identitas yang aman pada aplikasi web dan mobile modern. Mencakup **Clerk**, **Supabase Auth**, **Auth.js v5**, **Better Auth**, pola JWT, OAuth 2.1, alur PKCE, RBAC/ABAC, passkey (WebAuthn), dan implementasi MFA untuk stack React 19 / Next.js 15.
239
+
240
+ ### Kondisi Pemicu
241
+ - Mengerjakan alur login/signup, manajemen sesi, atau integrasi OAuth.
242
+ - Mengintegrasikan Clerk, Supabase Auth, Auth.js v5, Better Auth, atau Auth0.
243
+ - Mengimplementasikan RBAC (Role-Based Access Control) atau ABAC.
244
+ - Menyiapkan WebAuthn/Passkeys, MFA/2FA, atau SSO.
245
+ - Mengamankan rute Next.js App Router dengan auth guard berbasis middleware.
246
+
247
+ ### Panduan Teknis
248
+
249
+ #### 1. Prinsip Keamanan Inti
250
+ - **Jangan buat kriptografi sendiri**: Gunakan `argon2id` atau `bcrypt` untuk hashing password.
251
+ - **JWT berumur pendek**: Access token ≤15 menit, refresh token di HttpOnly cookie.
252
+ - **PKCE wajib** untuk semua public OAuth client (SPA, mobile).
253
+ - **Validasi state OAuth** di callback untuk proteksi CSRF.
254
+
255
+ #### 2. Pemilihan Identity Provider
256
+ - **Clerk**: Terbaik untuk SaaS baru — DX terbaik, komponen UI siap pakai, manajemen organisasi.
257
+ - **Supabase Auth**: Ideal jika sudah pakai Supabase — integrasi langsung dengan RLS.
258
+ - **Auth.js v5**: Self-hosted, fleksibel, edge-compatible untuk Next.js.
259
+ - **Better Auth**: TypeScript-first, kontrol penuh tanpa vendor lock-in.
260
+
261
+ #### 3. RBAC di Sisi Server
262
+ Selalu terapkan pengecekan role di server (Server Action, API route, middleware) **jangan hanya di UI**. Gunakan tabel permission yang memetakan setiap role ke daftar aksi yang diizinkan.
263
+
264
+ #### 4. WebAuthn / Passkeys
265
+ Gunakan library `@simplewebauthn/server` untuk registrasi dan verifikasi passkey. Simpan challenge di Redis dengan TTL pendek (60 detik) untuk mencegah replay attack.
266
+
267
+ #### 5. Checklist Keamanan
268
+ - Password di-hash dengan argon2id atau bcrypt.
269
+ - JWT access token expire ≤15 menit; refresh di HttpOnly cookie.
270
+ - State OAuth divalidasi saat callback.
271
+ - PKCE diterapkan untuk semua klien publik OAuth.
272
+ - Pengecekan otorisasi dilakukan di server, bukan hanya UI.
273
+ - MFA ditawarkan untuk akun privileged.
274
+ - Rate limiting di endpoint login/signup.
275
+ - Rotasi refresh token setiap kali digunakan.
276
+
277
+
278
+ ## Orchestration & Integration
276
279
  - Connects to other backend skills as part of the orchestration flow.
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  name: auto-doc-updater
3
3
  description: "Automatically documents every feature change or bug fix successfully built into CHANGELOG.md and BLUEPRINT.md / Otomatis mendokumentasikan setiap perubahan fitur atau perbaikan bug yang berhasil di-build ke CHANGELOG.md dan BLUEPRINT.md."
4
- author: "Roedy Rustam"
4
+ author: "Roedy Rustam"
5
5
  ---
6
6
 
7
7
  # Auto Documentation Updater (2026 — ADR Edition)
@@ -13,6 +13,9 @@ author: "Roedy Rustam"
13
13
  <a name="english"></a>
14
14
  ## English
15
15
 
16
+ ### Orchestration & Integration
17
+ Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.
18
+
16
19
  ### Description
17
20
  Automatically maintains project documentation after every successful build or feature implementation. Updates `CHANGELOG.md`, `BLUEPRINT.md`, and introduces **Architecture Decision Records (ADRs)** — immutable records of key architectural decisions made throughout the project lifecycle.
18
21
 
@@ -169,6 +172,9 @@ After every successful feature implementation:
169
172
  <a name="bahasa-indonesia"></a>
170
173
  ## Bahasa Indonesia
171
174
 
175
+ ### Integrasi Orkestrasi
176
+ Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.
177
+
172
178
  ### Deskripsi
173
179
  Secara otomatis memelihara dokumentasi proyek setelah setiap build atau implementasi fitur yang berhasil. Memperbarui `CHANGELOG.md`, `BLUEPRINT.md`, dan memperkenalkan **Architecture Decision Records (ADR)** — catatan permanen dari keputusan arsitektur kunci yang dibuat sepanjang siklus hidup proyek.
174
180