better-auth-integrations について
Better Auth のハンドラーを Web フレームワークに組み込むためのスキルです。Next.js App Router と Pages Router の例を示し、ルート設定や SSR、サーバーアクションでの Cookie とヘッダーの扱いを説明します。
主な機能
- 01認証ルートにハンドラーを配置
- 02フレームワーク固有のハンドラー補助機能を使用
- 03Next.js App Router と Pages Router を設定
- 04サーバーアクションで Cookie を処理
- 05サーバーとクライアントのベースパスを統一
活用シーン
- 01Next.js アプリに Better Auth のルートを追加
- 02サーバーアクションの認証処理を設定
- 03Cookie やボディーパーサーの連携問題を回避
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/better-auth-integrationsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
metadata.jsonreferences/frameworks.mdnextjs.md詳細
Better Auth のインテグレーション
目標
- Better Auth のハンドラーを
/api/auth/*（またはカスタムのベースパス）にマウントします。 - 利用可能な場合はフレームワークヘルパーを使用します。
- SSR とサーバーアクションで Cookie とヘッダーが正しく受け渡されるようにします。
クイックスタート
authインスタンスを作成します（better-auth-coreを参照してください）。/api/auth/*用のキャッチオールルートを追加します。- フレームワークヘルパー（または
auth.handler）を使用して Response を返します。
Next.js App Router
import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";
export const { GET, POST } = toNextJsHandler(auth);
Next.js Pages Router
import { auth } from "@/lib/auth";
import { toNodeHandler } from "better-auth/node";
export const config = { api: { bodyParser: false } };
export default toNodeHandler(auth.handler);
Next.js サーバーアクションでの Cookie 処理
サーバーアクションで Cookie が正しく設定されるように、nextCookies プラグインを使用します。
import { betterAuth } from "better-auth";
import { nextCookies } from "better-auth/next-js";
export const auth = betterAuth({
// ...config
plugins: [nextCookies()],
});
ガードレール
- サーバーとクライアント間でベースパスを統一してください。
- 利用可能な場合はフレームワークヘルパーを優先してください。
- 認証ハンドラーの前にカスタムのボディパーサーを実行しないでください。
参考資料
toolchains/platforms/auth/better-auth/better-auth-integrations/references/nextjs.mdtoolchains/platforms/auth/better-auth/better-auth-integrations/references/frameworks.md
コメント
Markdown 対応