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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
better-auth.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
better-authフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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 generateto 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.