[…nextauth] とは？Next.jsでログイン認証を実装する方法【App Router対応】

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

// 認証のエントリーポイント
import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

// NextAuthに設定を渡して処理を作成
const handler = NextAuth(authOptions);

// App RouterではGETとPOSTのメソッドを個別にエクスポートする必要あり
export { handler as GET, handler as POST };

// lib/auth.ts

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";　// NextAuth.jsが使っているトークン（認証情報）の型名
import type { NextAuthOptions } from "next-auth";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export const authOptions: NextAuthOptions = {
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
};

// pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export default NextAuth({
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
});