tanstack-start-auth について
Better Auth の設定と TanStack Start への組み込みを案内するリファレンススキルです。FMC アプリの開発者向けに、リクエスト単位のセッション処理と、ルート制御とデータ認可の分離を示します。
主な機能
- 01Better Auth の設定ガイド
- 02TanStack Start のルートと Cookie の接続
- 03セッションとサーバー関数のパターン
- 04API Key とセッションによる認可
- 05認証パターンの参照ファイル
活用シーン
- 01TanStack Start アプリで Better Auth を設定
- 02ルートと API ハンドラーを保護
- 03サーバー関数でセッションを確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ fixmyberlin/ fixmyskills --skill tanstack-start-authインストール後、Claude Code で/tanstack-start-authを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/auth.mdbetter-auth-config.mdendpoint-auth-lint.md詳細
TanStack Start + Better Auth
FMC アプリ(TILDA、Trassenscout の移行など)におけるライブラリの設定とStart 固有の連携に関するスキルです。
適用する場面
betterAuth()/createAuthClient()の設定を作成または変更するとき/api/auth/*、tanstackStartCookies()プラグイン、OAuth サインインルートをマウントするときbeforeLoadゲート、endpointAuth、サーバー関数または API ハンドラーでセッションを扱うとき- パブリックと保護されたサーバー関数(
public*.functions.tsの命名規則) - 自動化エンドポイントで API キーとセッションによる二重認証を行うとき
リファレンス(必要に応じて参照)
| トピック | ファイル |
|---|---|
| TanStack のルート、Cookie、セッションヘルパー、TILDA のパターン | references/auth.md |
| Trassenscout の認証リントのパターン | references/endpoint-auth-lint.md |
| betterAuth のオプション、DB、プラグイン、セッション、フック | references/better-auth-config.md |
ライブドキュメント: better-auth.com/docs · llms.txt
関連スキル
tanstack-router-conventions—validateSearch、検索パラメーターのシリアライズ、ローダー + Querytanstack-start-conventions— レイアウト、.server.ts/.functions.ts、境界、SSRplaywright-skill— E2E の認証スタブ(TILDA)
必須ルール
- セッションヘルパーには、常に現在のリクエストから取得した
headers: Headersを渡します。 - ルートの
beforeLoadから DB/セッションを直接呼び出してはいけません。サーバー関数とgetRequestHeaders()を使用します。 - 公式の
tanstackStartCookies()を最後のプラグインとして使用します。better-authのバージョン変更後は、クライアントバンドルへの漏出がないことを確認します(auth.md)。 /api/auth/$などのハンドラー専用 API ルートには、ssr: falseを設定します(selective-ssr.md)。- API ルートでは、各ハンドラー内で認証を行います(ルートレベルの
beforeLoadは使用しません)。 - Cookie キャッシュを使用した管理者/ロールのチェックでは、
getSession({ query: { disableCookieCache: true } })を使用します。 - API シークレットの比較には、タイミングセーフな等価性チェックを使用します。
- 二層構造:
beforeLoadはルートの UX 専用です。データ境界にはendpointAuth/ガードを使用します。beforeLoadのみに依存してはいけません。 - ルートのガードに認証ミドルウェアを使用してはいけません。レイアウトの
beforeLoadを使用します。グローバル認証ミドルウェアは、パブリック RPC(public*.functions.ts、getSessionForRouteFn)を妨げ、FMC の認証ルートのパターンにも適合しません。
クイックパターン
// beforeLoad (via server fn)
await routeSessionFn({ data: location })
// API handler
const session = await endpointAuth.session(request.headers)
// Server function
const headers = getRequestHeaders()
await endpointAuth.admin(headers)
セットアップの概要
auth.server.tsでbetterAuth()を設定します(Prisma/Drizzle アダプター、プラグイン)。- 対応するクライアントプラグインを使って
createAuthClient()を設定します。 /api/auth/$→auth.handler(request)(Cookie はtanstackStartCookies()プラグインを介して処理します)。Headersを受け取るsession.server.tsヘルパーを用意します。- プラグインを変更した後は、CLI でマイグレーション/生成を実行します。詳細は better-auth-config.md を参照してください。
コメント
Markdown 対応