【Auth.js/NextAuth】NextAuth v5のadapter機能を追加して登録ユーザーをデータベースで管理する

YouTube

技術選定

• TypeScript
• Next.js
• Tailwind CSS
• shadcn/ui
• Auth.js(NextAuth.js) v5
• drizzle
• Cloudflare D1
• Cloudflare Pages

初期設定

NodeModule をインストール

bun install

環境変数を設定

ファイル.env.local.sampleを.env.localに変更して、各環境変数を指定する

AUTH_SECRET=

AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

データベースを作成

npx wrangler d1 create next-auth-db

wrangler.toml に追記

[[d1_databases]]
binding = "DB"
database_name = "next-auth-db"
database_id = "<unique-ID-for-your-database>"

<unique-ID-for-your-database>はデータベースを作成したときに出力されるID

テーブルのスキーマを作成

npx drizzle-kit generate

ローカルデータベースにテーブルを作成

npx wrangler d1 migrations apply next-auth-db --local

リモートデータベースにテーブルを作成

npx wrangler d1 migrations apply next-auth-db --remote