バイブコーディング全盛期に人力でAuth.jsを使ってNext.jsに認証機能を追加してみる（インストール編）

概要

AIでの開発が盛んな昨今ではあるが、一旦ちゃんと理解したいのでAuth.jsを使ってNext.jsのフレームワークで認証機能を人力実装してみる。

前提

下記の内容を参考に実装してみる。ORMは使ったことのあるPrismaを使ってみる。

その他詳細情報

• Next.js 15.5.2（App Router）
• TypeScript 5
• TailwindCSS 4
• Prisma 6.16.0（ORM）
• PostgreSQL（データベース）
• ESLint + Markdownlint

この記事ではこちらからこちらまでを実施する

方法

下記を参考に作業を開始する。

1. プロジェクトルートで下記を実行して必要なライブラリ郡を取得（下記コマンドを実行してインストールされたAuth.jsのバージョンは5.0.0-beta.30）

   pnpm add next-auth@bata
   

2. 下記を実行してハッシュ化時のキー文字列を生成

   npx auth secret
   

3. auth.tsというファイルを作成し下記のように記載（このファイルが認証系の設定）

   auth.ts

   // TODO: 本モジュールはsrc/lib/直下に移動予定
   
   import NextAuth from "next-auth"
   
   export const { handlers, signIn, signOut, auth } = NextAuth({
     providers: [],
   })
   

4. src/app/api/auth/[...nextauth]/route.tsというファイルを作成し下記の様に記載（このファイルでAuth.jsで使う予定のAPIを一括定義）

   src/app/api/auth/[...nextauth]/route.ts

   import { handlers } from "../../../../../auth" // TODO: auth.tsは場所を src/lib/直下に移動予定
   export const { GET, POST } = handlers
   

5. middleware.tsというファイルを作成し下記の様に記載（認証状態チェックするミドルウェアファイルの作成と認証チェックの準備実装）

   middleware.ts

   export { auth as middleware } from "./auth" // TODO: auth.tsは場所を src/lib/直下に移動予定