Communityコーディング&開発github.com

Breadstick-Crumbs/add-auth

プロジェクトにメールアドレスとパスワードによる認証(サインアップ、サインイン、サインアウト、セッション、ロール、パスワード変更、パスワードリセット)を、ゼロから書く代わりにテスト済みテンプレートから追加します。ユーザーがFastAPI、Next.js、Nodeバックエンドに認証、ログイン、サインアップ、アカウント、セッション、保護ルート、パスワードリセットの追加を依頼したときに使用します。

add-auth とは?

このスキルは、テスト済みの認証テンプレートをユーザーのプロジェクトにコピーし、配線するためのものです。FastAPI、Next.js(App Router)、その他のNodeサーバー(Express、Hono、Fastifyなど)をサポートします。認証ロジックをゼロから書いたり、テンプレート内のセキュリティロジックを変更したりせずに、エッジ部分(データベースアクセス、インポート、UI)のみをアダプトします。テンプレートはプラグイン内の`templates/`ディレクトリにあり、スキル専用のインストールスクリプト(`scripts/install.mjs`)を使ってファイルを正確にコピーします。トークン消費を抑え、上書きを防ぎます。コピー後は、指定された手順に従ってデータベースセッションの接続、モデルの調整、ルーターの組み込み、環境変数の設定を行い、最後にテストを実行して動作を確認します。

対応~Claude Code~Codex CLI~Cursor
Part ofNext.js
npx skills add https://github.com/Breadstick-Crumbs/add-auth/tree/HEAD/skills/add-auth

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

add-auth は何をしますか?

このプラグインに含まれるテスト済みの認証テンプレートをユーザーのプロジェクトにコピーし、配線します。認証をゼロから書かず、テンプレート内のセキュリティロジックも変更しないでください。エッジ部分(データベースアクセス、インポート、UI)のみをアダプトします。

テンプレートは <skill-dir>/../../templates/ にあります(<skill-dir> はこのスキルのベースディレクトリです)。

  • templates/fastapi/auth/ – FastAPIパッケージ: config.py, security.py, models.py, db.py, deps.py, routes.py, email.py; テストは templates/fastapi/tests/test_auth.py。
  • templates/node/lib/auth/core.ts – フレームワークに依存しないコア(ハッシュ化、アクセストークン、リセットトークン、クッキーオプション)と core.test.ts。
  • templates/nextjs/ – Next.js App Routerレイヤー(コア上に構築): lib/auth/{schema,users,session,email}.ts, app/(auth)/actions.ts, proxy.ts。

1. コピー前の確認

以下の項目を確認し、1~2行でユーザーに伝えてください。

  • スタック: FastAPI(pyproject/requirements で fastapi を探す)、Next.js(package.json で next)、またはその他のNodeサーバー(Express、Hono、Fastify、プレーンな http)。
  • データベースレイヤー: SQLModel/SQLAlchemy、Drizzle、Prisma、または生のSQL。また、セッションや db オブジェクトがどこにあるか。
  • 既存の認証: users テーブル、ログインルート、JWTライブラリ、認証プロバイダー(Clerk、Supabase、Auth.js)。認証が既に存在する場合は停止し、置き換えるか拡張するか尋ねてください。
  • プロジェクトにデータが入った users テーブルが既にあるかどうか。ある場合は、2つ目のテーブルを作成する代わりに、テンプレートのカラムをマイグレーションでマッピングします。

2. コピーと配線

ファイルを読み取って書き換えるのではなく、プラグインのスクリプトでコピーします。スクリプトはファイルを正確にコピーし、トークンを消費しません。スクリプトはこのスキルのベースディレクトリから2階層上の scripts/install.mjs です(<skill-dir>/../../scripts/install.mjs)。最初に --dry-run でプロジェクトルートから実行し、その後実際に実行します。

node <skill-dir>/../../scripts/install.mjs fastapi app --tests tests   # app/auth/*.py, tests/test_auth.py
node <skill-dir>/../../scripts/install.mjs nextjs .                     # または src/(@/ エイリアスがそこを指している場合)
node <skill-dir>/../../scripts/install.mjs node src/auth                # コアのみ、その他のNodeサーバー用

このスクリプトは上書きを拒否し、ターゲットファイルが1つでも存在する場合は何もコピーしません。競合がマージが必要なファイル(既存の proxy.ts や middleware.ts)の場合は、--keep-existing を付けて再実行し、残りをコピーしてから手動でマージします。--force はユーザーがファイルを失うことに同意した場合のみ使用します。node が利用できない場合は、同じファイルを手動で(cp で)コピーし、それでも再入力はしないでください。

コピー後は、以下の手順で指定された箇所のみを変更します。security.py、core.ts、ルートのロジックは変更しないでください。

FastAPI

  1. install.mjs fastapi <package-dir> --tests <tests-dir> でコピーします(例:app/auth/)。
  2. auth/db.py を編集し、get_session がプロジェクトの既存のセッション依存関係になるようにします。これが認証がデータベースセットアップに触れる唯一の場所です。
  3. プロジェクトがSQLModelではなくプレーンなSQLAlchemyを使用している場合、models.py の User を同じカラムを持つSQLAlchemyモデルに書き換え、Pydanticスキーマは維持します。
  4. アプリのメインファイルで app.include_router(auth_router) を実行します。
  5. ルートを user: CurrentUser または dependencies=[Depends(require_role("admin"))] で保護します。
  6. 依存関係を追加します:pyjwt、pwdlib[argon2,bcrypt]、email-validator、python-multipart、sqlmodel(まだない場合)。
  7. プロジェクトのマイグレーション(Alembicがある場合はAlembic自動生成)を通じて users テーブルを作成します。
  8. コピーした test_auth.py のインポートをパッケージパスに修正し(from auth から from app.auth など)、実行します。

Next.js(App Router)

  1. install.mjs nextjs <app-root> でコピーします:コアとそのテスト、lib/auth/*、app/(auth)/actions.ts、proxy.ts。
  2. Next.js 15以前の場合:proxy.ts を middleware.ts にリネームし、そのエクスポートを middleware にします。プロジェクトに既存のミドルウェア/プロキシファイルがある場合は、認証チェックをそれにマージします。
  3. lib/auth/users.ts をプロジェクトのデータベースに向けます:db インポートを変更するか、Prisma/生のSQL用に5つの関数を書き換えます。schema.ts を既存のDrizzleスキーマにマージし、マイグレーションを生成します。
  4. プロキシ内の PROTECTED をアプリのプライベートパスに設定します。
  5. プロジェクトのコンポーネントとスタイリングを使用して、/sign-in、/sign-up、/forgot-password、/reset-password ページを構築します。各ページは、useActionState を通じて対応するサーバーアクションにPOSTするフォームです。サインイン時には next を隠しフィールドとして渡し、リセット時には token 検索パラメータを渡します。
  6. サーバーコンポーネントとアクションでは、lib/auth/session.ts の getUser() または requireUser("admin") を使用します。
  7. 依存関係:jose、bcryptjs、zod、server-only(Drizzleファイルをそのまま使用する場合は drizzle-orm も)。

その他のNodeサーバー(Express、Hono、Fastify、プレーンなhttp)

コアのみを install.mjs node <dir> でコピーします。ルートはプロジェクトのスタイルで記述し、templates/nextjs/app/(auth)/actions.ts と同じ動作を維持します: 登録、ログイン(不明なメールと間違ったパスワードで同じエラーを返し、ユーザーが見つからなくても verifyPassword を呼び出す)、ログアウト、自分自身の情報取得、パスワード変更、パスワード忘れ(アカウントの有無に関わらず同じ応答)、パスワードリセット(readResetToken をユーザーの現在のハッシュで使用)。トークンは session クッキー(cookieOptions() で設定)または Authorization: Bearer ヘッダーから読み取ります。requireUser/requireRole ミドルウェアを追加します。

3. 環境設定

.env.example(コミットされた .env には決して追加しない)に以下を追加します:

  • AUTH_SECRET – 最低32文字のランダムな文字列。node -e "console.log(require('crypto').randomBytes(32).toString('base64url'))" でユーザーのローカル .env 用に生成します。チャットで表示しないでください。
  • AUTH_ACCESS_TOKEN_MINUTES(デフォルト7日)、AUTH_RESET_TOKEN_MINUTES(デフォルト60分)。
  • FastAPI:FRONTEND_URL、およびリセットメール用に SMTP_HOST、SMTP_PORT、SMTP_USER、SMTP_PASSWORD、EMAIL_FROM。Next.js:APP_URL、次に lib/auth/email.ts の本文をプロジェクトのメールプロバイダーに置き換えます。 メールが設定されていない場合、リセットリンクはログに出力されます。これはローカル開発では問題ありません。

4. 動作確認

コピーしたテストとプロジェクト自身のチェック(テスト、型チェック、リンター、ビルド)を実行します。失敗があればその出力を報告します。その後、ユーザーが自分で行う必要があることを伝えます。通常は、本番環境で AUTH_SECRET を設定する、メールを設定する、実際のデータベースでマイグレーションを実行する、などです。

ルール

  • 以下を維持すること:Argon2/bcryptハッシュ化、不明なメールに対するダミーハッシュチェック、不明なアカウントに対する同一の応答、パスワードハッシュに紐付いたリセットトークン、トークンの purpose チェック、httpOnly SameSite=Lax クッキー、リダイレクト時の safeNext。
  • トークンをlocalStorageに保存しない、パスワードやトークンをログに記録しない、認証ルートのCORSを緩和しない。
  • ログインレート制限はテンプレートに含まれていません。プロジェクトにレートリミッターがある場合は、ログインとパスワード忘れルートをその背後に配置します。ない場合は、そのことを言及します。
  • セッションは署名付きトークンであるため、サインアウトはそのブラウザでのセッションを終了しますが、コピーされたトークンは期限が切れるまで有効です。「すべての端末からサインアウト」が必要な場合は、token_version カラムを追加し、トークンリーダーでそれをチェックします。

関連スキル