スキル nextjs-supabase-auth
📦

nextjs-supabase-auth

安全

Next.js App RouterでSupabase Authを実装する

Next.jsでの認証構築にはサーバーとクライアントの境界を理解する必要があります。このスキルでは、App Routerアーキテクチャで安全なSupabase Auth統合のための実証済みのパターンを提供します。

対応: Claude Codex Code(CC)
📊 71 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「nextjs-supabase-auth」を使用しています。 Next.js App Router用のSupabase認証ミドルウェアを設定する

期待される結果:

  • プロジェクトルートにmiddleware.tsを作成
  • @supabase/ssrからcreateServerClientをインポート
  • envからSUPABASE_URLとSUPABASE_ANON_KEYでクライアントを設定
  • 認証保護が必要なルートのマッチャーを追加
  • セッション期限切れ時にトークン更新を処理
  • 保護されたルートで認証チェックが失敗したときにログインページにリダイレクト

「nextjs-supabase-auth」を使用しています。 サーバーコンポーネントで認証を処理方法は？

期待される結果:

  • createServerClientを使用してSupabaseクライアントをインスタンス化
  • getUser()を呼び出して現在のセッションを検証
  • ユーザーデータを子コンポーネントにpropsとして渡す
  • サーバーコンポーネントで直接getSession()を呼び出すのを避ける
  • 保護されたルートのセッション検証はミドルウェアに任せる

セキュリティ監査

安全
v2 • 2/24/2026

Static analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.

1
スキャンされたファイル
61
解析された行数
0
検出結果
2
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude 監査履歴を表示 →

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
31
コミュニティ
100
セキュリティ
91
仕様準拠

作れるもの

SaaSアプリケーションを構築するフルスタック開発者

Supabaseをバックエンドとして使用するNext.js SaaS製品のために、メールとOAuthプロバイダーを使用した安全なユーザー認証を実装します。

Pages RouterからApp Routerへの移行チーム

既存のSupabase認証実装をNext.js App Routerサーバーコンポーネントとミドルウェアアーキテクチャで動作するようにリファクタリングします。

既存アプリに認証を追加する開発者

Supabaseバックエンドを持つ既存のNext.jsアプリケーションに認証を統合し、最初からセキュリティベストプラクティスに従います。

これらのプロンプトを試す

基本的なSupabaseクライアントセットアップ 
Next.js App Routerプロジェクト用のSupabaseクライアント設定を手伝ってください。@supabase/ssrを使用して、サーバーコンポーネント用クライアントコンポーネント用、ミドルウェア用の別々のクライアントが必要です。
保護されたルート実装 
/dashboard配下のルートを保護し、認証されていないユーザーを/loginにリダイレクトするミドルウェアを作成してください。期限切れトークンのセッション更新ロジックを含めます。
OAuthコールバックハンドラー 
承認コードをSupabaseセッションと交換し、認証成功後にユーザーを適切なページにリダイレクトするOAuthコールバックルートハンドラーを構築します。
Server Actionsを使用した完全な認証フロー 
ログイン、サインアップ、ログアウトのためにServer Actionsを使用した完全な認証フローを実装してください。適切なエラー処理フォーム検証を含み、資格情報をクライアントに公開せずに安全なトークン管理を行います。

ベストプラクティス

  • Next.js App Routerのサーバー/クライアント境界のために特別に設計された@supabase/ssrパッケージを使用する
  • レンダリング前にルートを保護し、セッション更新を透過的に管理するためにミドルウェアで認証を処理する
  • トークンストレージを手動で処理する代わりに、@supabase/ssrが自動的に管理するCookieにトークンを保存する

回避

  • ルート保護のためにサーバーコンポーネントで直接getSession()を呼び出す（代わりにミドルウェアを使用）
  • 適切な認証状態変更リスナーを実装せずにクライアントコンポーネントで認証状態を管理する
  • @supabase/ssrが自動Cookieベースのセッション管理を提供しているときにJWTトークンを手動で保存または処理する

よくある質問

@supabase/ssrと@supabase/supabase-jsの違いは何ですか？
@supabase/ssrはNext.js App Router用に特別に設計されており、組み込みのCookie処理とサーバー/クライアント境界サポートがあります。@supabase/supabase-jsはコアクライアントライブラリですが、SSRシナリオでは手動のCookieとセッション管理が必要です。
Supabase AuthでAPIルートを保護するにはどうすればいいですか？
プロジェクトルートにmiddleware.tsファイルを作成し、指定されたルートパターンの認証をチェックします。createServerClientを使用してセッションを検証し、認証されていないリクエストには401を返するかリダイレクトします。
App Routerの代わりにPages Routerでこのスキルを使用できますか？
このスキルはApp Routerパターンに焦点を当てています。Pages Routerでは、getServerSidePropsと異なるCookie処理アプローチを持つ別のパターンを使用します。
GoogleやGitHubなどのOAuthプロバイダーを処理するにはどうすればいいですか？
SupabaseダッシュボードでOAuthプロバイダーを設定し、SupabaseのOAuthフローを使用して承認コードをセッションと交換するコールバックルートハンドラーを作成します。スキルではこのパターンを詳細にカバーしています。
Supabaseの認証情報はどこに保存すべきですか？
SUPABASE_URLとSUPABASE_ANON_KEYを環境変数に保存します。これらをバージョン管理にコミットしないでください。ローカル開発には.env.localを使用し、本番環境にはホスティングプラットフォームのシークレット管理を使用します。
ログアウトを適切に処理するにはどうすればいいですか？
SupabaseのsignOut()メソッドを使用してサーバー側でセッションを無効化し、ローカル状態をクリアしてログインページまたはホームページにリダイレクトします。Server Actionsはこの操作のためのクリーンなパターンを提供します。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-auth

参照

main

ファイル構成

📄 SKILL.md