mcpField
N
neon-auth

neon-auth

github.com/neondatabaseセキュリティ86262 回インストール39 週間前に更新
リポジトリ

neon-auth について

neon-auth は、アプリに Neon 認証を組み込むためのスキルです。Next.js、React SPA、Node.js に応じたセットアップ手順を選び、設定とトラブルシューティングの資料を提供します。

主な機能

  1. 01サインアップ・サインイン・セッションの設定
  2. 02Google と GitHub のソーシャル認証設定
  3. 03プロジェクトのフレームワークに応じたガイド選択
  4. 04インポート・アダプター・CSS のルール
  5. 05トラブルシューティング資料とテンプレート

活用シーン

  1. 01Next.js アプリへの認証追加
  2. 02React SPA のサインイン設定
  3. 03Google または GitHub ログインの設定
  4. 04セッションが保持されない問題の調査

インストール

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

$npx skills add https://github.com/neondatabase/ai-rules --skill neon-auth

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

guides/
nextjs-setup.md
react-spa-setup.md
templates/
auth-client.ts
nextjs-api-route.ts

詳細

Neon Auth の統合

アプリケーションに認証を追加します。

このスキルを使用する場面

  • 新規または既存のプロジェクトに認証を追加する場合
  • サインイン、サインアップ、セッション管理を実装する場合
  • ソーシャル認証（Google、GitHub）を設定する場合

パッケージ：@neondatabase/auth（認証専用で、バンドルサイズが小さくなります）

データベースクエリも必要ですか？ 認証とデータの統合 API を備えた @neondatabase/neon-js を使う場合は、代わりに neon-js スキルを使用してください。

コード生成ルール

TypeScript／JavaScript コードを生成する際は、次のルールに従ってください。

完全なリファレンス： 以下を参照してください：コード生成ルール

  • インポートパスの扱い（パスエイリアスと相対インポート）
  • Neon パッケージのインポート（サブパスエクスポート、アダプターパターン）
  • CSS のインポート方法（Tailwind の検出、単一のインポート方法）
  • ファイル構成のパターン

重要なポイント：

  • インポートを生成する前に、tsconfig.json でパスエイリアスを確認してください
  • 判断に迷う場合やエイリアスがない場合は、相対インポートを使用してください
  • BetterAuthReactAdapter は必ず auth/react/adapters サブパスからインポートしてください
  • アダプターはファクトリー関数です。() を付けて呼び出してください
  • CSS のインポート方法は 1 つだけ選んでください（Tailwind または CSS のどちらか一方で、両方は使用しません）

利用可能なガイド

各ガイドは、フェーズに番号が付いた、単独で完結する詳しい手順です。

  • guides/nextjs-setup.md - Next.js App Router の完全なセットアップガイド
  • guides/react-spa-setup.md - react-router-dom との統合を含む、React SPA の詳しいガイド

パッケージマネージャー、フレームワーク、既存のセットアップ状況を自動で検出し、リクエストに応じて適切なガイドを選択します。

トラブルシューティングについては、references にあるトラブルシューティングガイドを参照してください。

簡単な例

作成するものを伝えてください。あとはお任せください。

  • 「Next.js アプリに認証を追加して」-> セットアップガイドを読み込み、認証ルートを設定します
  • 「Google でのサインインを設定して」-> ソーシャル認証プロバイダーを設定します
  • 「認証セッションが保持されない問題をデバッグして」-> トラブルシューティングガイドを読み込みます

リファレンスドキュメント

主なリソース： 包括的なガイドラインについては、neon-auth.mdcを参照してください。以下の内容が含まれます。

  • すべての認証方法（メールアドレス／パスワード、ソーシャル認証、マジックリンク）
  • セッションデータの構造
  • UI コンポーネントのリファレンス
  • エラー処理

フレームワーク別のセットアップ（使用するフレームワークを選択）：

フレームワーク別の UI（使用するフレームワークを選択）：

共通リファレンス：

テンプレート

  • templates/nextjs-api-route.ts - Next.js 用の API ルートハンドラー
  • templates/auth-client.ts - クライアント側の認証設定

関連スキル

  • neon-js - 認証とデータベースクエリを含むフル SDK（PostgREST 形式のデータアクセスが必要な場合に使用します）
  • neon-drizzle - Drizzle ORM のセットアップ（データベースクエリ用）
  • neon-serverless - データベースへの直接接続
  • add-neon-docs - Neon のベストプラクティスをプロジェクトに追加します（セットアップ後に実行します）

ワークフロー

以下を行います：

  1. プロジェクトのコンテキスト（Next.js、React SPA、Node.js）を自動的に検出します
  2. 適切なガイドを選択して読み込みます
  3. ガイドの各フェーズを順に進めます
  4. ガイドのワークフローチェックリストを使用して進捗を追跡します
  5. 必要な場合にのみリファレンスファイルを読み込みます
  6. プロジェクトのドキュメントに Neon のベストプラクティスを追加することを提案します

始める準備はできましたか？作成するものを説明してください！

コメント

Markdown 対応