clerk/clerk-tanstack-patterns

clerk-tanstack-patterns は何をしますか？

TanStack React Start と @clerk/tanstack-react-start を使用した認証パターン - createServerFn、beforeLoad ガード、ローダー、Vinxi サーバー。トリガー: TanStack 認証、createServerFn clerk、beforeLoad 保護、TanStack Start ミドルウェア。

概要

このスキルは、TanStack React Start フレームワーク内で Clerk 認証を統合するためのベストプラクティスパターンを提供します。@clerk/tanstack-react-start パッケージを中心に、サーバー関数、ルート保護、ローダーでの認証状態管理などを実装する方法を説明します。

主な機能

• createServerFn での認証: Clerk のセッションを使用してサーバー関数を保護します。
• beforeLoad ガード: ルートローダーの前に認証チェックを実行し、未認証ユーザーをリダイレクトします。
• ローダーでのユーザー情報取得: ローダー内で現在のユーザー情報を安全に取得します。
• Vinxi サーバー設定: TanStack Start の Vinxi ベースのサーバー環境で Clerk を正しく設定します。

使用例

// サーバー関数での認証例
import { createServerFn } from '@tanstack/react-start';
import { getAuth } from '@clerk/tanstack-react-start/server';

export const getProtectedData = createServerFn({ method: 'GET' })
  .handler(async () => {
    // Clerk 認証情報を取得
    const { userId } = await getAuth();
    if (!userId) {
      throw new Error('未認証');
    }
    return { protectedData: '機密情報' };
  });

// beforeLoad ガードの例
import { createFileRoute } from '@tanstack/react-router';
import { clerkBeforeLoad } from '@clerk/tanstack-react-start';

export const Route = createFileRoute('/dashboard')({
  beforeLoad: clerkBeforeLoad(),
  component: DashboardComponent,
});

インストール

npm install @clerk/tanstack-react-start @clerk/clerk-react

設定

app.config.ts で Clerk の設定を行います。

import { defineConfig } from '@tanstack/react-start/config';

export default defineConfig({
  server: {
    // Vinxi サーバー設定
  },
  plugins: [
    // Clerk プラグイン設定
  ],
});

トリガーフレーズ

このスキルは以下のトリガーで発動します:

• TanStack auth
• createServerFn clerk
• beforeLoad protection
• TanStack Start middleware

関連リソース

• Clerk TanStack React Start ドキュメント
• TanStack React Start ドキュメント