jpskill.com
🛠️ 開発・MCP コミュニティ

better-auth

Better Auth を使って、様々なフレームワークに認証機能を追加し、ログイン・サインアップの実装、OAuthプロバイダーの追加、セッション管理など、TypeScriptアプリの認証ライブラリ選択を支援するSkill。

📜 元の英語説明(参考)

Add authentication to any framework with Better Auth. Use when a user asks to implement auth, set up login/signup, add OAuth providers, implement session management, or choose between auth libraries for TypeScript apps.

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

一言でいうと

Better Auth を使って、様々なフレームワークに認証機能を追加し、ログイン・サインアップの実装、OAuthプロバイダーの追加、セッション管理など、TypeScriptアプリの認証ライブラリ選択を支援するSkill。

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

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

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

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

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

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

📖 Skill本文(日本語訳)

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

Better Auth

概要

Better Auth は、フレームワークに依存しない TypeScript 認証ライブラリです。メール/パスワード、OAuth (Google、GitHub、Discord など)、マジックリンク、二要素認証、セッション、および組織/チーム管理を処理します。1 つのライブラリで、あらゆるフレームワーク、あらゆるデータベースに対応します。

手順

ステップ 1: セットアップ

npm install better-auth

ステップ 2: サーバー構成

// lib/auth.ts — Better Auth サーバーのセットアップ
import { betterAuth } from 'better-auth'
import { prismaAdapter } from 'better-auth/adapters/prisma'
import { prisma } from './db'

export const auth = betterAuth({
  database: prismaAdapter(prisma, { provider: 'postgresql' }),

  emailAndPassword: {
    enabled: true,
    minPasswordLength: 8,
  },

  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
  },

  session: {
    expiresIn: 60 * 60 * 24 * 7,        // 7 日間
    updateAge: 60 * 60 * 24,              // 24 時間ごとに更新
  },

  // 追加機能のためのプラグイン
  plugins: [],
})

ステップ 3: API ルート

// app/api/auth/[...all]/route.ts — Next.js API ハンドラー
import { auth } from '@/lib/auth'
import { toNextJsHandler } from 'better-auth/next-js'

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

ステップ 4: クライアント SDK

// lib/auth-client.ts — クライアント側の認証
import { createAuthClient } from 'better-auth/react'

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL,
})

// React フック
export const { useSession, signIn, signUp, signOut } = authClient
// components/LoginForm.tsx — メールまたは OAuth でログイン
import { signIn } from '@/lib/auth-client'

export function LoginForm() {
  return (
    <div>
      <form onSubmit={async (e) => {
        e.preventDefault()
        const form = new FormData(e.currentTarget)
        await signIn.email({
          email: form.get('email') as string,
          password: form.get('password') as string,
        })
      }}>
        <input name="email" type="email" required />
        <input name="password" type="password" required />
        <button type="submit">Sign In</button>
      </form>

      <button onClick={() => signIn.social({ provider: 'google' })}>
        Continue with Google
      </button>
      <button onClick={() => signIn.social({ provider: 'github' })}>
        Continue with GitHub
      </button>
    </div>
  )
}

ステップ 5: ルートの保護

// middleware.ts — Next.js ルート保護
import { auth } from '@/lib/auth'
import { headers } from 'next/headers'

export async function getSession() {
  const session = await auth.api.getSession({
    headers: await headers(),
  })
  return session
}

// サーバーコンポーネントまたはページ内
const session = await getSession()
if (!session) redirect('/login')

ガイドライン

  • Better Auth は、アダプター (Prisma、Drizzle、Kysely、raw SQL) を介してあらゆるデータベースで動作します。
  • npx better-auth generate を実行して、認証テーブルのデータベース移行を作成します。
  • マルチテナントの場合、組織プラグインを使用します — チーム、ロール、および招待を処理します。
  • NextAuth/Auth.js の代替 — Better Auth はフレームワークに依存せず、より構成可能です。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Better Auth

Overview

Better Auth is a framework-agnostic TypeScript authentication library. It handles email/password, OAuth (Google, GitHub, Discord, etc.), magic links, two-factor auth, sessions, and organization/team management. One library, any framework, any database.

Instructions

Step 1: Setup

npm install better-auth

Step 2: Server Configuration

// lib/auth.ts — Better Auth server setup
import { betterAuth } from 'better-auth'
import { prismaAdapter } from 'better-auth/adapters/prisma'
import { prisma } from './db'

export const auth = betterAuth({
  database: prismaAdapter(prisma, { provider: 'postgresql' }),

  emailAndPassword: {
    enabled: true,
    minPasswordLength: 8,
  },

  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    },
  },

  session: {
    expiresIn: 60 * 60 * 24 * 7,        // 7 days
    updateAge: 60 * 60 * 24,              // refresh every 24h
  },

  // Plugins for additional features
  plugins: [],
})

Step 3: API Route

// app/api/auth/[...all]/route.ts — Next.js API handler
import { auth } from '@/lib/auth'
import { toNextJsHandler } from 'better-auth/next-js'

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

Step 4: Client SDK

// lib/auth-client.ts — Client-side auth
import { createAuthClient } from 'better-auth/react'

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_APP_URL,
})

// React hooks
export const { useSession, signIn, signUp, signOut } = authClient
// components/LoginForm.tsx — Login with email or OAuth
import { signIn } from '@/lib/auth-client'

export function LoginForm() {
  return (
    <div>
      <form onSubmit={async (e) => {
        e.preventDefault()
        const form = new FormData(e.currentTarget)
        await signIn.email({
          email: form.get('email') as string,
          password: form.get('password') as string,
        })
      }}>
        <input name="email" type="email" required />
        <input name="password" type="password" required />
        <button type="submit">Sign In</button>
      </form>

      <button onClick={() => signIn.social({ provider: 'google' })}>
        Continue with Google
      </button>
      <button onClick={() => signIn.social({ provider: 'github' })}>
        Continue with GitHub
      </button>
    </div>
  )
}

Step 5: Protect Routes

// middleware.ts — Next.js route protection
import { auth } from '@/lib/auth'
import { headers } from 'next/headers'

export async function getSession() {
  const session = await auth.api.getSession({
    headers: await headers(),
  })
  return session
}

// In a server component or page
const session = await getSession()
if (!session) redirect('/login')

Guidelines

  • Better Auth works with any database via adapters (Prisma, Drizzle, Kysely, raw SQL).
  • Run npx better-auth generate to create database migrations for auth tables.
  • For multi-tenancy, use the organization plugin — handles teams, roles, and invites.
  • Alternative to NextAuth/Auth.js — Better Auth is framework-agnostic and more composable.