clerk-nuxt-patterns は何をしますか？
Clerk を使用した Nuxt 3 認証パターン - ミドルウェア、コンポーザブル、サーバー API ルート、SSR。トリガー：Nuxt auth、useAuth コンポーザブル、Nuxt の clerkMiddleware、サーバー API Clerk、Nuxt ルート保護。
概要
このスキルは、@clerk/nuxt パッケージを用いて Nuxt 3 アプリケーションに Clerk 認証を統合するためのパターンを示します。以下の主要な機能をカバーします：
- ミドルウェア: Nuxt のルートガードを使用した認証必須ルートの保護
- コンポーザブル:
useAuthなどのコンポーザブルを使用したユーザー認証状態の管理 - サーバー API ルート: サーバー API エンドポイントでの Clerk 認証の適用
- SSR: サーバーサイドレンダリングにおける認証状態の取り扱い
前提条件
- Nuxt 3 プロジェクトがセットアップされていること
@clerk/nuxtパッケージがインストールされていること（例：npm install @clerk/nuxt）- Clerk ダッシュボードで発行された API キー（
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYとCLERK_SECRET_KEY）が環境変数に設定されていること
使用方法
1. ミドルウェアによるルート保護
middleware/auth.global.ts または特定のルート用ミドルウェアファイルを作成します：
export default defineNuxtRouteMiddleware((to, from) => {
const { isSignedIn } = useAuth();
if (!isSignedIn.value && to.path !== '/sign-in') {
return navigateTo('/sign-in');
}
});
2. コンポーザブルの使用
useAuth コンポーザブルを使用して認証状態を取得します：
<script setup lang="ts">
const { isSignedIn, userId, sessionId } = useAuth();
</script>
<template>
<div>
<p v-if="isSignedIn">ログイン中: {{ userId }}</p>
<p v-else>ログインしていません</p>
</div>
</template>
3. サーバー API ルートでの認証
server/api/protected.ts のようなサーバー API ルートで Clerk 認証を行います：
export default defineEventHandler(async (event) => {
const { auth } = event.context;
if (!auth.userId) {
throw createError({ statusCode: 401, message: 'Unauthorized' });
}
return { userId: auth.userId };
});
4. SSR での使用
plugins/clerk.client.ts と plugins/clerk.server.ts で適切に設定します（詳細は公式ドキュメント参照）。
注意点
- 環境変数は必ず
.envファイルに設定し、公開リポジトリにコミットしないでください。 - ミドルウェアの順序に注意し、グローバルミドルウェアとページ固有ミドルウェアを適切に使い分けてください。
- サーバー API ルートでは
event.context.authを使用して認証情報にアクセスします。