app 側のページ実装を `@playlistwizard/ui` へページ単位で移行するための方針。`@/components/ui/*` import の置換、共通コンポーネント化、既存表示差分の抑制、packages/ui 側の variant 設計を伴う作業で参照すること。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Skill for creating auth layers in TypeScript/JavaScript apps using Better Auth.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Guide for adding authentication to TypeScript/JavaScript applications using Better Auth.
For code examples and syntax, see better-auth.com/docs.
Before writing any code, gather requirements by scanning the project and asking the user structured questions. This ensures the implementation matches their needs.
Analyze the codebase to auto-detect:
next.config, svelte.config, nuxt.config, astro.config, vite.config, or Express/Hono entry files.prisma/schema.prisma, drizzle.config, package.json deps (pg, mysql2, better-sqlite3, mongoose, mongodb).next-auth, lucia, clerk, supabase/auth, firebase/auth) in package.json or imports.pnpm-lock.yaml, yarn.lock, bun.lockb, or package-lock.json.Use what you find to pre-fill defaults and skip questions you can already answer.
Use the AskQuestion tool to ask the user all applicable questions in a single call. Skip any question you already have a confident answer for from the scan. Group them under a title like "Auth Setup Planning".
Questions to ask:
Project type (skip if detected)
Framework (skip if detected)
Database & ORM (skip if detected)
Authentication methods (always ask, allow multiple)
allow_multiple: trueSocial providers (only if they selected Social OAuth above — ask in a follow-up call)
allow_multiple: trueEmail verification (only if Email & password was selected above — ask in a follow-up call)
Email provider (only if email verification is Yes, or if Password reset is selected in features — ask in a follow-up call)
Features & plugins (always ask, allow multiple)
allow_multiple: trueAuth pages (always ask, allow multiple — pre-select based on earlier answers)
allow_multiple: trueAuth UI style (always ask)
After collecting answers, present a concise implementation plan as a markdown checklist. Example:
## Auth Implementation Plan
- **Framework:** Next.js (App Router)
- **Database:** PostgreSQL via Prisma
- **Auth methods:** Email/password, Google OAuth, GitHub OAuth
- **Plugins:** 2FA, Organizations, Email verification
- **UI:** Custom forms
### Steps
1. Install `better-auth` and `@better-auth/cli`
2. Create `lib/auth.ts` with server config
3. Create `lib/auth-client.ts` with React client
4. Set up route handler at `app/api/auth/[...all]/route.ts`
5. Configure Prisma adapter and generate schema
6. Add Google & GitHub OAuth providers
7. Enable `twoFactor` and `organization` plugins
8. Set up email verification handler
9. Run migrations
10. Create sign-in / sign-up pages
Ask the user to confirm the plan before proceeding to Phase 2.
Only proceed here after the user confirms the plan from Phase 1.
Follow the decision tree below, guided by the answers collected above.
Is this a new/empty project?
├─ YES → New project setup
│ 1. Install better-auth (+ scoped packages per plan)
│ 2. Create auth.ts with all planned config
│ 3. Create auth-client.ts with framework client
│ 4. Set up route handler
│ 5. Set up environment variables
│ 6. Run CLI migrate/generate
│ 7. Add plugins from plan
│ 8. Create auth UI pages
│
├─ MIGRATING → Migration from existing auth
│ 1. Audit current auth for gaps
│ 2. Plan incremental migration
│ 3. Install better-auth alongside existing auth
│ 4. Migrate routes, then session logic, then UI
│ 5. Remove old auth library
│ 6. See migration guides in docs
│
└─ ADDING → Add auth to existing project
1. Analyze project structure
2. Install better-auth
3. Create auth config matching plan
4. Add route handler
5. Run schema migrations
6. Integrate into existing pages
7. Add planned plugins and features
At the end of implementation, guide users thoroughly on remaining next steps (e.g., setting up OAuth app credentials, deploying env vars, testing flows).
Core: npm install better-auth
Scoped packages (as needed):
| Package | Use case |
|---|---|
@better-auth/passkey | WebAuthn/Passkey auth |
@better-auth/sso | SAML/OIDC enterprise SSO |
@better-auth/stripe | Stripe payments |
@better-auth/scim | SCIM user provisioning |
@better-auth/expo | React Native/Expo |
BETTER_AUTH_SECRET=<32+ chars, generate with: openssl rand -base64 32>
BETTER_AUTH_URL=http://localhost:3000
DATABASE_URL=<your database connection string>
Add OAuth secrets as needed: GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, GOOGLE_CLIENT_ID, etc.
Location: lib/auth.ts or src/lib/auth.ts
Minimal config needs:
database - Connection or adapteremailAndPassword: { enabled: true } - For email/password authStandard config adds:
socialProviders - OAuth providers (google, github, etc.)emailVerification.sendVerificationEmail - Email verification handleremailAndPassword.sendResetPassword - Password reset handlerFull config adds:
plugins - Array of feature pluginssession - Expiry, cookie cache settingsaccount.accountLinking - Multi-provider linkingrateLimit - Rate limiting configExport types: export type Session = typeof auth.$Infer.Session
Import by framework:
| Framework | Import |
|---|---|
| React/Next.js | better-auth/react |
| Vue | better-auth/vue |
| Svelte | better-auth/svelte |
| Solid | better-auth/solid |
| Vanilla JS | better-auth/client |
Client plugins go in createAuthClient({ plugins: [...] }).
Common exports: signIn, signUp, signOut, useSession, getSession
| Framework | File | Handler |
|---|---|---|
| Next.js App Router | app/api/auth/[...all]/route.ts | toNextJsHandler(auth) → export { GET, POST } |
| Next.js Pages | pages/api/auth/[...all].ts | toNextJsHandler(auth) → default export |
| Express | Any file | app.all("/api/auth/*", toNodeHandler(auth)) |
| SvelteKit | src/hooks.server.ts | svelteKitHandler(auth) |
| SolidStart | Route file | solidStartHandler(auth) |
| Hono | Route file | auth.handler(c.req.raw) |
Next.js Server Components: Add nextCookies() plugin to auth config.
| Adapter | Command |
|---|---|
| Built-in Kysely | npx @better-auth/cli@latest migrate (applies directly) |
| Prisma | npx @better-auth/cli@latest generate --output prisma/schema.prisma then npx prisma migrate dev |
| Drizzle | npx @better-auth/cli@latest generate --output src/db/auth-schema.ts then npx drizzle-kit push |
Re-run after adding plugins.
| Database | Setup |
|---|---|
| SQLite | Pass better-sqlite3 or bun:sqlite instance directly |
| PostgreSQL | Pass pg.Pool instance directly |
| MySQL | Pass mysql2 pool directly |
| Prisma | prismaAdapter(prisma, { provider: "postgresql" }) from better-auth/adapters/prisma |
| Drizzle | drizzleAdapter(db, { provider: "pg" }) from better-auth/adapters/drizzle |
| MongoDB | mongodbAdapter(db) from better-auth/adapters/mongodb |
| Plugin | Server Import | Client Import | Purpose |
|---|---|---|---|
twoFactor | better-auth/plugins | twoFactorClient | 2FA with TOTP/OTP |
organization | better-auth/plugins | organizationClient | Teams/orgs |
admin | better-auth/plugins | adminClient | User management |
bearer | better-auth/plugins | - | API token auth |
openAPI | better-auth/plugins | - | API docs |
passkey | @better-auth/passkey | passkeyClient | WebAuthn |
sso | @better-auth/sso | - | Enterprise SSO |
Plugin pattern: Server plugin + client plugin + run migrations.
Sign in flow:
signIn.email({ email, password }) or signIn.social({ provider, callbackURL })error in responseSession check (client): useSession() hook returns { data: session, isPending }
Session check (server): auth.api.getSession({ headers: await headers() })
Protected routes: Check session, redirect to /sign-in if null.
BETTER_AUTH_SECRET set (32+ chars)advanced.useSecureCookies: true in productiontrustedOrigins configuredaccount.accountLinking reviewed| Issue | Fix |
|---|---|
| "Secret not set" | Add BETTER_AUTH_SECRET env var |
| "Invalid Origin" | Add domain to trustedOrigins |
| Cookies not setting | Check baseURL matches domain; enable secure cookies in prod |
| OAuth callback errors | Verify redirect URIs in provider dashboard |
| Type errors after adding plugin | Re-run CLI generate/migrate |
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
app 側のページ実装を `@playlistwizard/ui` へページ単位で移行するための方針。`@/components/ui/*` import の置換、共通コンポーネント化、既存表示差分の抑制、packages/ui 側の variant 設計を伴う作業で参照すること。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Skill for integrating Better Auth - the comprehensive TypeScript authentication framework.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
ユーザーと対話しながら機能仕様を策定し、Notion に自動でドキュメント化するスキル。「仕様を作ろう」「スペックを書いて」「仕様を詰めよう」などの指示で呼び出される。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
git に関する全ての操作やこのプロジェクトのgitに関する情報が欲しい時に呼び出されるスキル(branch, commit, push, pull, merge ...)
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
GitHub に関する全ての操作やこのプロジェクトの GitHub に関する情報が欲しい時に呼び出されるスキル(PR, Issue)
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.