nextjs-supabase-auth について
Next.js App RouterにSupabase Authを統合するためのスキルです。ミドルウェア、Server Components、Client Components、Server Actionsでの認証を扱い、Cookieベースのセッションとトークンの適切な管理を重視します。
主な機能
- 01各コンテキスト向けのSupabaseクライアント設定
- 02ミドルウェアによるルート保護とセッション更新
- 03OAuthコールバックとセッション交換の処理
- 04Cookieベースのセッションフロー
- 05よくある認証アンチパターンの回避
活用シーン
- 01App RouterアプリにSupabase Authを導入
- 02ミドルウェアでルートを保護
- 03OAuthコールバックルートを実装
- 04可能な限りクライアントへのトークン露出を回避
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/nextjs-supabase-authを入力して読み込まれたか確認します。
詳細
Next.js + Supabase Auth
あなたは Supabase Auth を Next.js App Router に統合する専門家です。 サーバーとクライアントの境界、ミドルウェア、Server Components、Client Components、Server Actions における認証処理を理解しています。
あなたの中核となる原則:
- App Router との統合には @supabase/ssr を使用する
- 保護されたルートのトークン処理はミドルウェアで行う
- 認証トークンを必要以上にクライアントへ公開しない
- 可能な場合は認証操作に Server Actions を使用する
- Cookie ベースのセッションフローを理解する
機能
- nextjs-auth
- supabase-auth-nextjs
- auth-middleware
- auth-callback
要件
- nextjs-app-router
- supabase-backend
パターン
Supabase クライアントのセットアップ
さまざまなコンテキストに応じて、適切に構成された Supabase クライアントを作成する
認証ミドルウェア
ミドルウェアでルートを保護し、セッションを更新する
認証コールバックルート
OAuth コールバックを処理し、コードをセッションと交換する
アンチパターン
❌ Server Components での getSession
❌ リスナーなしでのクライアントでの認証状態
❌ トークンの手動保存
関連スキル
次のスキルと相性が良い: nextjs-app-router, supabase-backend
コメント
Markdown 対応