Next-auth(prisma)をセットアップする
経緯
next-authの最新versionでsetupを行なったが、記事がまとまってなかったので調査しながらsetupを行なった備忘録
next-authの仕組みを確認する
ライブラリのコードと公式のdemoアプリを参照しながら仕組みを知る。
大まかに説明するとAuth関数がauth()の本体であり、middlewareと認証パス(/signin)も最終的にはこのAuth関数が呼び出される。
認証の流れ(googleの場合)
NextAuth.jsを使用したGoogle認証のフローは次のようになります：
-
外部リクエスト: ユーザーがログインページ（例：
/api/auth/signin）にアクセスします。(Auth関数) -
内部リクエスト: NextAuthは設定に基づきGoogle認証URLを生成し、ユーザーをGoogleのログインページにリダイレクトします。
- toInternalRequest: actionなどの情報を取得
- AuthInternal: toInternalRequestで取得した情報を使用して処理を実行
- ユーザーはGoogleで認証します。
-
外部リクエスト: GoogleはユーザーをNextAuthのコールバックURL（例：
/api/auth/callback/google）にリダイレクトします。(toInternalRequest) -
内部リクエスト: NextAuthはGoogleからの情報を処理し、セッションを作成または更新します。
- toInternalRequest: actionなどの情報を取得
- AuthInternal: toInternalRequestで取得した情報を使用して処理を実行
- ユーザーは認証後のページにリダイレクトされます。
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