mcpField
A
authentication

authentication

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

authentication について

Next.js アプリ開発者向けの認証レシピです。Better Auth を使い、メール認証、パスワードリセット、保護されたルート、アカウント管理を順に構築します。

主な機能

  1. 01メール・パスワード認証
  2. 02メール認証とパスワードリセット
  3. 03認証ページとコンポーネント
  4. 04プロフィールとセッション管理
  5. 05サーバー側のルート保護

活用シーン

  1. 01アプリに登録・ログインフローを追加
  2. 02認証とパスワードリセットのメール送信
  3. 03プロフィール、パスワード、セッションの管理
  4. 04選択したページを認証済みユーザーに限定

インストール

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

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill authentication

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

詳細

認証

Better Auth、メール確認、パスワードリセット、保護されたルート、アカウント管理を備えた完全な認証システムです。

前提条件

次のレシピを先に順番どおりに完了してください。

better-env による型安全な環境設定

better-env の設定モジュールを使用して、サーバー／パブリック環境変数への型安全なアクセス、機能フラグ、いずれか一方の認証情報を必須とする制約を設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
Neon + Drizzle のセットアップ

Drizzle ORM と、Vercel のサーバーレス関数向けに最適化されたコネクションプーリングを使用して、Next.js アプリを Neon Postgres に接続します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
Vercel 上の Next.js

Bun 上で動作する Next.js アプリを作成し、開発環境を設定して、プッシュ時に自動デプロイされるよう Vercel にデプロイします。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
Shadcn UI とテーマ設定

next-themes を使用して、ダークモードに対応した Shadcn UI コンポーネントを追加します。テーマプロバイダーと CSS 変数の設定も含まれます。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup

クックブック - 次のレシピを順番どおりに完了してください

Resend のセットアップ

パスワードリセットやメール確認などのトランザクションメールを送信するために、Resend を設定します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/resend-setup
Better Auth のセットアップ

Drizzle ORM と Neon Postgres を使用して Better Auth によるユーザー認証を追加します。メールアドレスとパスワードによる認証の基本設定です。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-setup
Better Auth のメール

Resend を使用して、メール確認、パスワードリセット、アカウント管理のメールを Better Auth に追加します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-emails
Better Auth のコンポーネント

サインイン、サインアップ、パスワード忘れ、パスワードリセット、メール確認などの認証フローに対応する UI コンポーネントとページを追加します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-components
Better Auth のプロフィールとアカウント

プロフィール編集、パスワード変更、メールアドレス更新、セッション管理、アカウント削除に対応する完全なアカウント設定ページを追加します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-profile
Better Auth の保護されたルート

一部のページでは認証を必須にし、ほかのページは公開したままにするため、サーバー側のルート保護を追加します。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/better-auth-protected-routes
認証のベストプラクティス

クライアント側とサーバー側の認証に Better Auth を使用します。セッションへのアクセス、保護されたルート、サインイン／サインアウト、ユーザーデータの取得について説明します。

bunx skills add andrelandgraf/fullstackrecipes/skills -s authentication-best-practices

コメント

Markdown 対応