jpskill.com
💬 コミュニケーション コミュニティ

ck:better-auth

Better Auth (TypeScript) を使って、メール/パスワード認証、GoogleやGitHubなどのOAuth認証、二段階認証、パスキー認証、セッション管理、権限管理、レート制限といった認証機能を簡単に追加できるSkill。

📜 元の英語説明(参考)

Add authentication with Better Auth (TypeScript). Use for email/password, OAuth providers (Google, GitHub), 2FA/MFA, passkeys/WebAuthn, sessions, RBAC, rate limiting.

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

一言でいうと

Better Auth (TypeScript) を使って、メール/パスワード認証、GoogleやGitHubなどのOAuth認証、二段階認証、パスキー認証、セッション管理、権限管理、レート制限といった認証機能を簡単に追加できるSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ck-better-auth.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ck-better-auth フォルダができる
  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-18
取得日時
2026-05-18
同梱ファイル
10

📖 Skill本文(日本語訳)

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

Better Auth Skill

Better Authは、TypeScript向けの包括的でフレームワークに依存しない認証/認可フレームワークです。メール/パスワード、ソーシャルOAuth、および高度な機能のための強力なプラグインエコシステムを内蔵しています。

使用する場面

  • TypeScript/JavaScriptアプリケーションで認証を実装する場合
  • メール/パスワードまたはソーシャルOAuth認証を追加する場合
  • 2FA、パスキー、マジックリンク、高度な認証機能を設定する場合
  • 組織サポート付きのマルチテナントアプリを構築する場合
  • セッションとユーザーライフサイクルを管理する場合
  • あらゆるフレームワーク(Next.js、Nuxt、SvelteKit、Remix、Astro、Hono、Expressなど)で作業する場合

クイックスタート

インストール

npm install better-auth
# or pnpm/yarn/bun add better-auth

環境設定

.envを作成します。

BETTER_AUTH_SECRET=<generated-secret-32-chars-min>
BETTER_AUTH_URL=http://localhost:3000

基本的なサーバー設定

auth.tsを作成します(ルート、lib/、utils/、またはsrc/app/server/の下)。

import { betterAuth } from "better-auth";

export const auth = betterAuth({
  database: {
    // See references/database-integration.md
  },
  emailAndPassword: {
    enabled: true,
    autoSignIn: true
  },
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }
  }
});

データベーススキーマ

npx @better-auth/cli generate  # Generate schema/migrations
npx @better-auth/cli migrate   # Apply migrations (Kysely only)

APIハンドラーのマウント

Next.js App Router:

// app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

その他のフレームワーク: references/email-password-auth.md#framework-setupをご覧ください。

クライアント設定

auth-client.tsを作成します。

import { createAuthClient } from "better-auth/client";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000"
});

基本的な使用方法

// Sign up
await authClient.signUp.email({
  email: "user@example.com",
  password: "secure123",
  name: "John Doe"
});

// Sign in
await authClient.signIn.email({
  email: "user@example.com",
  password: "secure123"
});

// OAuth
await authClient.signIn.social({ provider: "github" });

// Session
const { data: session } = authClient.useSession(); // React/Vue/Svelte
const { data: session } = await authClient.getSession(); // Vanilla JS

機能選択マトリックス

機能 プラグインが必要か ユースケース 参照
メール/パスワード いいえ(組み込み) 基本的な認証 email-password-auth.md
OAuth (GitHub, Googleなど) いいえ(組み込み) ソーシャルログイン oauth-providers.md
メール認証 いいえ(組み込み) メールアドレスの確認 email-password-auth.md
パスワードリセット いいえ(組み込み) パスワードを忘れた場合のフロー email-password-auth.md
二要素認証 (2FA/TOTP) はい (twoFactor) セキュリティ強化 advanced-features.md
パスキー/WebAuthn はい (passkey) パスワードレス認証 advanced-features.md
マジックリンク はい (magicLink) メールベースのログイン advanced-features.md
ユーザー名認証 はい (username) ユーザー名ログイン email-password-auth.md
組織/マルチテナント はい (organization) チーム/組織機能 advanced-features.md
レート制限 いいえ(組み込み) 悪用防止 advanced-features.md
セッション管理 いいえ(組み込み) ユーザーセッション advanced-features.md

認証方法選択ガイド

メール/パスワードを選択する場合:

  • 従来の認証機能を持つ標準的なWebアプリを構築する場合
  • ユーザー認証情報を完全に制御する必要がある場合
  • メールベースのアカウントを好むユーザーをターゲットにする場合

OAuthを選択する場合:

  • 摩擦の少ない迅速なサインアップを望む場合
  • ユーザーがすでにソーシャルアカウントを持っている場合
  • ソーシャルプロファイルデータへのアクセスが必要な場合

パスキーを選択する場合:

  • パスワードレスな体験を望む場合
  • 最新のブラウザ/デバイスをターゲットにする場合
  • セキュリティが最優先事項である場合

マジックリンクを選択する場合:

  • WebAuthnの複雑さなしにパスワードレスを望む場合
  • メールファーストのユーザーをターゲットにする場合
  • 一時的なアクセスリンクが必要な場合

複数の方法を組み合わせる場合:

  • さまざまなユーザーの好みに合わせて柔軟性を持たせたい場合
  • さまざまな認証要件を持つエンタープライズアプリを構築する場合
  • プログレッシブエンハンスメント(シンプルに開始し、オプションを追加)が必要な場合

コアアーキテクチャ

Better Authはクライアント-サーバーアーキテクチャを使用しています。

  1. サーバー (better-auth): 認証ロジック、データベース操作、APIルートを処理します。
  2. クライアント (better-auth/client): フロントエンド用のフック/メソッドを提供します。
  3. プラグイン: サーバーとクライアントの両方の機能を拡張します。

実装チェックリスト

  • [ ] better-authパッケージをインストールします。
  • [ ] 環境変数(SECRET、URL)を設定します。
  • [ ] データベース設定で認証サーバーインスタンスを作成します。
  • [ ] スキーマ移行を実行します(npx @better-auth/cli generate)。
  • [ ] フレームワークにAPIハンドラーをマウントします。
  • [ ] クライアントインスタンスを作成します。
  • [ ] サインアップ/サインインUIを実装します。
  • [ ] コンポーネントにセッション管理を追加します。
  • [ ] 保護されたルート/ミドルウェアを設定します。
  • [ ] 必要に応じてプラグインを追加します(追加後にスキーマを再生成します)。
  • [ ] 完全な認証フローをテストします。
  • [ ] メール送信(認証/リセット)を設定します。
  • [ ] 本番環境向けにレート制限を有効にします。
  • [ ] エラー処理を設定します。

参照ドキュメント

コア認証

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Better Auth Skill

Better Auth is comprehensive, framework-agnostic authentication/authorization framework for TypeScript with built-in email/password, social OAuth, and powerful plugin ecosystem for advanced features.

When to Use

  • Implementing auth in TypeScript/JavaScript applications
  • Adding email/password or social OAuth authentication
  • Setting up 2FA, passkeys, magic links, advanced auth features
  • Building multi-tenant apps with organization support
  • Managing sessions and user lifecycle
  • Working with any framework (Next.js, Nuxt, SvelteKit, Remix, Astro, Hono, Express, etc.)

Quick Start

Installation

npm install better-auth
# or pnpm/yarn/bun add better-auth

Environment Setup

Create .env:

BETTER_AUTH_SECRET=<generated-secret-32-chars-min>
BETTER_AUTH_URL=http://localhost:3000

Basic Server Setup

Create auth.ts (root, lib/, utils/, or under src/app/server/):

import { betterAuth } from "better-auth";

export const auth = betterAuth({
  database: {
    // See references/database-integration.md
  },
  emailAndPassword: {
    enabled: true,
    autoSignIn: true
  },
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }
  }
});

Database Schema

npx @better-auth/cli generate  # Generate schema/migrations
npx @better-auth/cli migrate   # Apply migrations (Kysely only)

Mount API Handler

Next.js App Router:

// app/api/auth/[...all]/route.ts
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

Other frameworks: See references/email-password-auth.md#framework-setup

Client Setup

Create auth-client.ts:

import { createAuthClient } from "better-auth/client";

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000"
});

Basic Usage

// Sign up
await authClient.signUp.email({
  email: "user@example.com",
  password: "secure123",
  name: "John Doe"
});

// Sign in
await authClient.signIn.email({
  email: "user@example.com",
  password: "secure123"
});

// OAuth
await authClient.signIn.social({ provider: "github" });

// Session
const { data: session } = authClient.useSession(); // React/Vue/Svelte
const { data: session } = await authClient.getSession(); // Vanilla JS

Feature Selection Matrix

Feature Plugin Required Use Case Reference
Email/Password No (built-in) Basic auth email-password-auth.md
OAuth (GitHub, Google, etc.) No (built-in) Social login oauth-providers.md
Email Verification No (built-in) Verify email addresses email-password-auth.md
Password Reset No (built-in) Forgot password flow email-password-auth.md
Two-Factor Auth (2FA/TOTP) Yes (twoFactor) Enhanced security advanced-features.md
Passkeys/WebAuthn Yes (passkey) Passwordless auth advanced-features.md
Magic Link Yes (magicLink) Email-based login advanced-features.md
Username Auth Yes (username) Username login email-password-auth.md
Organizations/Multi-tenant Yes (organization) Team/org features advanced-features.md
Rate Limiting No (built-in) Prevent abuse advanced-features.md
Session Management No (built-in) User sessions advanced-features.md

Auth Method Selection Guide

Choose Email/Password when:

  • Building standard web app with traditional auth
  • Need full control over user credentials
  • Targeting users who prefer email-based accounts

Choose OAuth when:

  • Want quick signup with minimal friction
  • Users already have social accounts
  • Need access to social profile data

Choose Passkeys when:

  • Want passwordless experience
  • Targeting modern browsers/devices
  • Security is top priority

Choose Magic Link when:

  • Want passwordless without WebAuthn complexity
  • Targeting email-first users
  • Need temporary access links

Combine Multiple Methods when:

  • Want flexibility for different user preferences
  • Building enterprise apps with various auth requirements
  • Need progressive enhancement (start simple, add more options)

Core Architecture

Better Auth uses client-server architecture:

  1. Server (better-auth): Handles auth logic, database ops, API routes
  2. Client (better-auth/client): Provides hooks/methods for frontend
  3. Plugins: Extend both server/client functionality

Implementation Checklist

  • [ ] Install better-auth package
  • [ ] Set environment variables (SECRET, URL)
  • [ ] Create auth server instance with database config
  • [ ] Run schema migration (npx @better-auth/cli generate)
  • [ ] Mount API handler in framework
  • [ ] Create client instance
  • [ ] Implement sign-up/sign-in UI
  • [ ] Add session management to components
  • [ ] Set up protected routes/middleware
  • [ ] Add plugins as needed (regenerate schema after)
  • [ ] Test complete auth flow
  • [ ] Configure email sending (verification/reset)
  • [ ] Enable rate limiting for production
  • [ ] Set up error handling

Reference Documentation

Core Authentication

Advanced Features

  • Advanced Features - 2FA/MFA, passkeys, magic links, organizations, rate limiting, session management

Scripts

  • scripts/better_auth_init.py - Initialize Better Auth configuration with interactive setup

Resources

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。