jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Create認証Skill

create-auth-skill

TypeScriptやJavaScriptで開発されたアプリに、ログインや

⏱ MCPサーバー実装 1日 → 2時間

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Skill for creating auth layers in TypeScript/JavaScript apps using Better Auth.

🇯🇵 日本人クリエイター向け解説

一言でいうと

TypeScriptやJavaScriptで開発されたアプリに、ログインや

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o create-auth-skill.zip https://jpskill.com/download/4639.zip && unzip -o create-auth-skill.zip && rm create-auth-skill.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/4639.zip -OutFile "$d\create-auth-skill.zip"; Expand-Archive "$d\create-auth-skill.zip" -DestinationPath $d -Force; ri "$d\create-auth-skill.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して create-auth-skill.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → create-auth-skill フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-18
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • Create Auth Skill を使って、最小構成のサンプルコードを示して
  • Create Auth Skill の主な使い方と注意点を教えて
  • Create Auth Skill を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[スキル名] create-auth-skill

認証スキルの作成

Better Auth を使用して TypeScript/JavaScript アプリケーションに認証を追加するためのガイドです。

コード例と構文については、better-auth.com/docs を参照してください。


フェーズ 1: 計画 (実装前に必須)

コードを記述する前に、プロジェクトをスキャンし、ユーザーに構造化された質問をすることで要件を収集します。これにより、実装がユーザーのニーズと一致することを確認します。

ステップ 1: プロジェクトをスキャンする

コードベースを分析して、以下を自動検出します。

  • フレームワークnext.configsvelte.confignuxt.configastro.configvite.config、または Express/Hono のエントリファイルを探します。
  • データベース/ORMprisma/schema.prismadrizzle.configpackage.json の依存関係 (pgmysql2better-sqlite3mongoosemongodb) を探します。
  • 既存の認証package.json またはインポートで既存の認証ライブラリ (next-authluciaclerksupabase/authfirebase/auth) を探します。
  • パッケージマネージャーpnpm-lock.yamlyarn.lockbun.lockb、または package-lock.json を確認します。

見つかったものを使用してデフォルト値を事前に入力し、すでに回答できる質問はスキップします。

ステップ 2: 計画に関する質問をする

AskQuestion ツールを使用して、ユーザーに該当するすべての質問を 1 回の呼び出しで尋ねます。スキャンからすでに確信のある回答が得られている質問はスキップします。「Auth Setup Planning」のようなタイトルでグループ化してください。

尋ねる質問:

  1. プロジェクトタイプ (検出された場合はスキップ)

    • プロンプト: 「このプロジェクトのタイプは何ですか?」
    • オプション: 新規プロジェクト (ゼロから) | 既存プロジェクトに認証を追加 | 他の認証ライブラリからの移行
  2. フレームワーク (検出された場合はスキップ)

    • プロンプト: 「どのフレームワークを使用していますか?」
    • オプション: Next.js (App Router) | Next.js (Pages Router) | SvelteKit | Nuxt | Astro | Express | Hono | SolidStart | その他
  3. データベースと ORM (検出された場合はスキップ)

    • プロンプト: 「どのデータベース設定を使用しますか?」
    • オプション: PostgreSQL (Prisma) | PostgreSQL (Drizzle) | PostgreSQL (pg driver) | MySQL (Prisma) | MySQL (Drizzle) | MySQL (mysql2 driver) | SQLite (Prisma) | SQLite (Drizzle) | SQLite (better-sqlite3 driver) | MongoDB (Mongoose) | MongoDB (native driver)
  4. 認証方法 (常に尋ねる、複数選択可能)

    • プロンプト: 「どのサインイン方法が必要ですか?」
    • オプション: メールとパスワード | ソーシャル OAuth (Google、GitHub など) | マジックリンク (パスワードなしメール) | パスキー (WebAuthn) | 電話番号
    • allow_multiple: true
  5. ソーシャルプロバイダー (上記でソーシャル OAuth を選択した場合のみ — フォローアップで尋ねる)

    • プロンプト: 「どのソーシャルプロバイダーが必要ですか?」
    • オプション: Google | GitHub | Apple | Microsoft | Discord | Twitter/X
    • allow_multiple: true
  6. メール認証 (上記でメールとパスワードが選択された場合のみ — フォローアップで尋ねる)

    • プロンプト: 「メール認証を必須にしますか?」
    • オプション: はい | いいえ
  7. メールプロバイダー (メール認証が「はい」の場合、または機能でパスワードリセットが選択されている場合のみ — フォローアップで尋ねる)

    • プロンプト: 「メールをどのように送信しますか?」
    • オプション: Resend | 今はモック (console.log)
  8. 機能とプラグイン (常に尋ねる、複数選択可能)

    • プロンプト: 「他にどのような機能が必要ですか?」
    • オプション: 二要素認証 (2FA) | 組織 / チーム | 管理ダッシュボード | API ベアラートークン | パスワードリセット | これら以外
    • allow_multiple: true
  9. 認証ページ (常に尋ねる、複数選択可能 — 以前の回答に基づいて事前選択)

    • プロンプト: 「どの認証ページが必要ですか?」
    • オプションは以前の回答によって異なります:
      • 常に利用可能: サインイン | サインアップ
      • メールとパスワードが選択された場合: パスワードを忘れた場合 | パスワードをリセット
      • メール認証が有効な場合: メール認証
    • allow_multiple: true
  10. 認証 UI スタイル (常に尋ねる)

    • プロンプト: 「認証ページのスタイルはどのようなものが良いですか? 1 つ選ぶか、ご自身で説明してください。」
    • オプション: ミニマルでクリーン | 背景付きの中央カード | 分割レイアウト (フォーム + ヒーロー画像) | フローティング / グラスモーフィズム | その他 (説明します)

ステップ 3: 計画を要約する

回答を収集した後、簡潔な実装計画を Markdown チェックリストとして提示します。例:

## 認証実装計画

- **フレームワーク:** Next.js (App Router)
- **データベース:** Prisma 経由の PostgreSQL
- **認証方法:** メール/パスワード、Google OAuth、GitHub OAuth
- **プラグイン:** 2FA、組織、メール認証
- **UI:** カスタムフォーム

### ステップ
1. `better-auth` と `@better-auth/cli` をインストールする
2. サーバー設定を含む `lib/auth.ts` を作成する
3. React クライアントを含む `lib/auth-client.ts` を作成する
4. `app/api/auth/[...all]/route.ts` にルートハンドラーを設定する
5. Prisma アダプターを設定し、スキーマを生成する
6. Google と GitHub の OAuth プロバイダーを追加する
7. `twoFactor` と `organization` プラグインを有効にする
8. メール認証ハンドラーを設定する
9. マイグレーションを実行する
10. サインイン/サインアップページを作成する

フェーズ 2 に進む前に、ユーザーに計画の確認を依頼します。


フェーズ 2: 実装

フェーズ 1 の計画をユーザーが確認した後のみ、ここに続行してください。

上記で収集した回答に基づいて、以下の意思決定ツリーに従います。

これは新規/空のプロジェクトですか?
├─ はい → 新規プロジェクトのセットアップ
│   1. better-auth (+ 計画に応じたスコープ付きパッケージ) をインストールする
│   2. 計画されたすべての設定を含む auth.ts を作成する
│   3. フレームワーククライアントを含む auth-client.ts を作成する
│   4. ルートハンドラーを設定する
│   5. 環境変数を設定する
│   6. CLI migrate/generate を実行する
│   7. 計画からプラグインを追加する
│   8. 認証 UI ページを作成する
│
├─ 移行中 → 既存の認証からの移行
│   1. 現在の認証のギャップを監査する
│   2. 段階的な移行を計画する
│   3. 既存の認証と並行して better-auth をインストールする
│   4. ルート、次にセッションロジック、次に UI を移行する
│   5. 古い認証ライブラリを削除する
│   6. ドキュメントの移行ガイドを参照する
│
└─ 追加中 → 既存のプロジェクトに認証を追加する
    1. プロジェクト構造を分析する
    2. better-auth をインストールする
    3. 計画に一致する認証設定を作成する
    4. ルートハンドラーを追加する
    5. スキーママイグレーションを実行する
    6. 既存のページに統合する
    7. 計画されたプラグインと機能を追加する
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Create Auth Skill

Guide for adding authentication to TypeScript/JavaScript applications using Better Auth.

For code examples and syntax, see better-auth.com/docs.


Phase 1: Planning (REQUIRED before implementation)

Before writing any code, gather requirements by scanning the project and asking the user structured questions. This ensures the implementation matches their needs.

Step 1: Scan the project

Analyze the codebase to auto-detect:

  • Framework — Look for next.config, svelte.config, nuxt.config, astro.config, vite.config, or Express/Hono entry files.
  • Database/ORM — Look for prisma/schema.prisma, drizzle.config, package.json deps (pg, mysql2, better-sqlite3, mongoose, mongodb).
  • Existing auth — Look for existing auth libraries (next-auth, lucia, clerk, supabase/auth, firebase/auth) in package.json or imports.
  • Package manager — Check for 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.

Step 2: Ask planning questions

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:

  1. Project type (skip if detected)

    • Prompt: "What type of project is this?"
    • Options: New project from scratch | Adding auth to existing project | Migrating from another auth library
  2. Framework (skip if detected)

    • Prompt: "Which framework are you using?"
    • Options: Next.js (App Router) | Next.js (Pages Router) | SvelteKit | Nuxt | Astro | Express | Hono | SolidStart | Other
  3. Database & ORM (skip if detected)

    • Prompt: "Which database setup will you use?"
    • Options: PostgreSQL (Prisma) | PostgreSQL (Drizzle) | PostgreSQL (pg driver) | MySQL (Prisma) | MySQL (Drizzle) | MySQL (mysql2 driver) | SQLite (Prisma) | SQLite (Drizzle) | SQLite (better-sqlite3 driver) | MongoDB (Mongoose) | MongoDB (native driver)
  4. Authentication methods (always ask, allow multiple)

    • Prompt: "Which sign-in methods do you need?"
    • Options: Email & password | Social OAuth (Google, GitHub, etc.) | Magic link (passwordless email) | Passkey (WebAuthn) | Phone number
    • allow_multiple: true
  5. Social providers (only if they selected Social OAuth above — ask in a follow-up call)

    • Prompt: "Which social providers do you need?"
    • Options: Google | GitHub | Apple | Microsoft | Discord | Twitter/X
    • allow_multiple: true
  6. Email verification (only if Email & password was selected above — ask in a follow-up call)

    • Prompt: "Do you want to require email verification?"
    • Options: Yes | No
  7. Email provider (only if email verification is Yes, or if Password reset is selected in features — ask in a follow-up call)

    • Prompt: "How do you want to send emails?"
    • Options: Resend | Mock it for now (console.log)
  8. Features & plugins (always ask, allow multiple)

    • Prompt: "Which additional features do you need?"
    • Options: Two-factor authentication (2FA) | Organizations / teams | Admin dashboard | API bearer tokens | Password reset | None of these
    • allow_multiple: true
  9. Auth pages (always ask, allow multiple — pre-select based on earlier answers)

    • Prompt: "Which auth pages do you need?"
    • Options vary based on previous answers:
      • Always available: Sign in | Sign up
      • If Email & password selected: Forgot password | Reset password
      • If email verification enabled: Email verification
    • allow_multiple: true
  10. Auth UI style (always ask)

    • Prompt: "What style do you want for the auth pages? Pick one or describe your own."
    • Options: Minimal & clean | Centered card with background | Split layout (form + hero image) | Floating / glassmorphism | Other (I'll describe)

Step 3: Summarize the plan

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.


Phase 2: Implementation

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).


Installation

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 |


Environment Variables

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.


Server Config (auth.ts)

Location: lib/auth.ts or src/lib/auth.ts

Minimal config needs:

  • database - Connection or adapter
  • emailAndPassword: { enabled: true } - For email/password auth

Standard config adds:

  • socialProviders - OAuth providers (google, github, etc.)
  • emailVerification.sendVerificationEmail - Email verification handler
  • emailAndPassword.sendResetPassword - Password reset handler

Full config adds:

  • plugins - Array of feature plugins
  • session - Expiry, cookie cache settings
  • account.accountLinking - Multi-provider linking
  • rateLimit - Rate limiting config

Export types: export type Session = typeof auth.$Infer.Session


Client Config (auth-client.ts)

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


Route Handler Setup

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.


Database Migrations

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 Adapters

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

Common Plugins

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.


Auth UI Implementation

Sign in flow:

  1. signIn.email({ email, password }) or signIn.social({ provider, callbackURL })
  2. Handle error in response
  3. Redirect on success

Session 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.


Security Checklist

  • [ ] BETTER_AUTH_SECRET set (32+ chars)
  • [ ] advanced.useSecureCookies: true in production
  • [ ] trustedOrigins configured
  • [ ] Rate limits enabled
  • [ ] Email verification enabled
  • [ ] Password reset implemented
  • [ ] 2FA for sensitive apps
  • [ ] CSRF protection NOT disabled
  • [ ] account.accountLinking reviewed

Troubleshooting

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

Resources