mcpField
C
clerk-auth

clerk-auth

github.com/davila7セキュリティ33.0k220 回インストール1 日前に更新
リポジトリ

clerk-auth について

clerk-authは、Next.js 14/15 App Router向けのClerk認証パターンを扱うスキルです。プロバイダーの設定、ルート保護、Server Componentsでの認証状態の参照を説明します。

主な機能

  1. 01Next.js App Routerのセットアップ
  2. 02ClerkProviderの設定
  3. 03ミドルウェアによるルート保護
  4. 04Server Componentsでの認証
  5. 05ユーザーとセッションデータの参照

活用シーン

  1. 01Next.jsアプリへのサインイン・登録機能の追加
  2. 02ミドルウェアによるルートグループの保護
  3. 03Server Componentsでの認証状態の参照

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/davila7/claude-code-templates --skill clerk-auth

インストール後、Claude Code で/clerk-authを入力して読み込まれたか確認します。

詳細

Clerk 認証

パターン

Next.js App Router のセットアップ

Next.js 14/15 App Router 向けの Clerk の完全なセットアップです。

ClerkProvider、環境変数、基本的なサインイン／サインアップコンポーネントを含みます。

主なコンポーネント:

  • ClerkProvider: アプリをラップして認証コンテキストを提供
  • 、: 事前に用意された認証フォーム
  • : セッション管理を備えたユーザーメニュー
ミドルウェアによるルート保護

clerkMiddleware と createRouteMatcher を使用してルートを保護します。

ベストプラクティス:

  • プロジェクトルートに middleware.ts を 1 つだけ配置する
  • ルートグループには createRouteMatcher を使用する
  • 明示的な保護には auth.protect() を使用する
  • すべての認証ロジックをミドルウェアに集約する
Server Component での認証

auth() と currentUser() を使用して、Server Component で認証状態にアクセスします。

主な関数:

  • auth(): userId、sessionId、orgId、claims を返す
  • currentUser(): 完全な User オブジェクトを返す
  • どちらも clerkMiddleware の設定が必要

⚠️ 注意すべき点

問題重大度解決策
問題criticalドキュメントを参照
問題highドキュメントを参照
問題highドキュメントを参照
問題highドキュメントを参照
問題mediumドキュメントを参照
問題mediumドキュメントを参照
問題mediumドキュメントを参照
問題mediumドキュメントを参照

コメント

Markdown 対応