初心者エンジニア、Next.jsの「NextAuth.js」をゼロから学ぶ

【基礎】NextAuth.jsとは？

Next.js 用の認証ライブラリ。
SNSログイン、メールアドレスログインなどを簡単に実装できる。

API Routes：

① NextAuth.js をインストール

npm install next-auth bcryptjs

② データベースにユーザーを保存

例：MongoDB を使う場合（Prisma や SQL でもOK）

jsコピーする編集する// models/User.js（ユーザーモデル）
import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  hashedPassword: { type: String, required: true },
});

export default mongoose.models.User || mongoose.model("User", UserSchema);

③ パスワードをハッシュ化

新規登録時に bcryptjs を使ってパスワードをハッシュ化（暗号化）。

jsコピーする編集するimport bcrypt from 'bcryptjs';

const hashedPassword = await bcrypt.hash(plainTextPassword, 10); // 10 は強度

DB には hashedPassword を保存する（生のパスワードは保存しない）。

---

④ NextAuth.js を設定

pages/api/auth/[...nextauth].ts にパスワードログインの処理を作成する。

tsコピーする編集するimport NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import dbConnect from "../../../lib/dbConnect"; // DB接続関数
import User from "../../../models/User"; // ユーザーモデル

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Email and Password",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        await dbConnect(); // DBに接続

        // ユーザーをDBから検索
        const user = await User.findOne({ email: credentials.email });
        if (!user) {
          throw new Error("メールアドレスが登録されていません");
        }

        // パスワードを比較
        const isValid = await bcrypt.compare(credentials.password, user.hashedPassword);
        if (!isValid) {
          throw new Error("パスワードが違います");
        }

        // 認証成功 → ユーザー情報を返す
        return { id: user._id, email: user.email };
      }
    })
  ],
  callbacks: {
    async session({ session, user }) {
      session.user = user;
      return session;
    }
  },
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET, // .env に設定
});