Next-auth(prisma)をセットアップする

経緯

next-authの最新versionでsetupを行なったが、記事がまとまってなかったので調査しながらsetupを行なった備忘録

next-authの仕組みを確認する

ライブラリのコードと公式のdemoアプリを参照しながら仕組みを知る。

大まかに説明するとAuth関数がauth()の本体であり、middlewareと認証パス(/signin)も最終的にはこのAuth関数が呼び出される。

認証の流れ(googleの場合)

NextAuth.jsを使用したGoogle認証のフローは次のようになります：

1. 外部リクエスト: ユーザーがログインページ（例：/api/auth/signin）にアクセスします。(Auth関数)
2. 内部リクエスト: NextAuthは設定に基づきGoogle認証URLを生成し、ユーザーをGoogleのログインページにリダイレクトします。
   • toInternalRequest: actionなどの情報を取得
   • AuthInternal: toInternalRequestで取得した情報を使用して処理を実行
3. ユーザーはGoogleで認証します。
4. 外部リクエスト: GoogleはユーザーをNextAuthのコールバックURL（例：/api/auth/callback/google）にリダイレクトします。(toInternalRequest)
5. 内部リクエスト: NextAuthはGoogleからの情報を処理し、セッションを作成または更新します。
   • toInternalRequest: actionなどの情報を取得
   • AuthInternal: toInternalRequestで取得した情報を使用して処理を実行
6. ユーザーは認証後のページにリダイレクトされます。

memo

toInternalRequest関数は、入力されたリクエストを解析して、actionなどの内部リクエスト情報を取得します。次に、この内部リクエスト情報をAuthInternal関数に渡し、具体的な認証処理（例えば、action: signInの場合はサインイン処理）を行います。これにより、NextAuth.jsは様々な認証アクションを柔軟に処理することができます。
Auth関数によって単一のルート（例えば /api/auth/[...nextauth].js）が複数の認証関連の処理（サインイン、サインアウト、コールバックなど）に対応できるようになります。これにより、NextAuth.jsは柔軟かつ効率的に認証フローを管理できます。

最終的な構成

nextjs

最新のversion(nextjs@0.0.3)

next-auth

最新のversion(next-auth@4.24.5)

prisma(accelarate)

最新のnext-authではedgeロケーションをベースにしているので、prisma accelerate(edge対応)をdatabaseに登録しないといけない。
ただしlocalhostのデータベースではprisma accelerateに登録できないため、下記のライブラリで対応

ライブラリ: https://www.npmjs.com/package/prisma-accelerate-local
参照: https://zenn.dev/sora_kumo/articles/prisma-accelerate-local

結論

Error: PrismaClient is unable to run in Vercel Edge Functions (in local dev environment)に関する対応方法が公式ではまとめられておらず詰まる。ただしこの部分以外は難しくない。
https://github.com/nextauthjs/next-auth/issues/9423

付録

デモアプリ: https://github.com/tokiyoshi-yudai/next-auth-test-app