NextAuth の middleware で無限ループ発生 #JavaScript

NextAuth は、Node.js × Next.js で動作する認証ライブラリです。短い記述で多くの認証に対応する事が出来ます。しかし、NextAuth の middleware を最小構成で使用すると、無限ループに今回遭遇しました。middleware 間での無限ループが発生すると、ウェブアプリケーションがクラッシュする可能性があります。同じ問題に遭遇した際の参考になれば幸いです。

環境

next.js 13.1.6
next-auth 4.19.2
prisma 4.10.1

ソースコード

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

import NextAuth, { AuthOptions } from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import GoogleProvider from "next-auth/providers/google";
import prisma from "@/services/database/prisma";
import PrismaUser from "@/services/database/prismaUser";

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.OAUTH_GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.OAUTH_GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/auth/signin",
    signOut: "/auth/signOut",
  },
  session: {
    strategy: "jwt",
    maxAge: 60 * 60 * 24 * 30,
  },
  adapter: PrismaAdapter(prisma),
};

export default NextAuth(authOptions);

middleware.ts

export { default } from "next-auth/middleware";

事象詳細

今回 pages にカスタムページを指定した際に、事象が発生しました。上記コードの状態でサイトにアクセスすると無限ループ（リダイレクト）が発生しサイトにアクセスする事が出来ません。

改善した方法

middleware.ts を以下の通りに修正しました。

export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/dashboard"], // /auth/signin 等を指定しないようにした
};

上記の通り matcher を明示的に指定し、カスタム認証ページ /auth/signin 等が範囲に含まれないようにしました。これにより、無限ループを回避出来るようになりました。

特にカスタムページを指定する際にはそういった注意書きは見当たらず、自動的に除外してくれそうな雰囲気を感じていたのですが、今回の事象の場合は指定する必要があったようです。

以上