NextAuth(Auth.js)v5betaでのgoogle認証に苦戦した

認証が難しすぎる

Nextjsでの認証機能の実装にNextAuthが良いと聞き、Youtubeや公式ドキュメント等でもv5betaでのgoogle認証について詳しく説明されたものは見つけられず...(Github認証はちらほらあった)。GPTも古い情報を投げてくるばかりで5時間近く苦戦したので、流れだけでも書き留めておく。

1.Auth.js公式ドキュメントで環境構築

Next.jsでのセットアップはここで済ませる。

1. RouteHandler
2. auth.ts(ルートで説明されてるけどsrc/lib配下が見通し良さそう)
3. middleware.ts(ルート)

ここで、2のauth.ts内のProviders配列にGoogle設定

src/lib/auth.ts

import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
  pages: {
    signIn: "/signin",
    error: "/auth/error",
  },
  ...

v4以前のNextAuthでは、ここでclientIDやcallbackURL等設定しないといけなかったが、v5ではよしなにやってくれるみたい。
pagesプロパティには、ルーティングを記述。

続いて公式ドキュメントのOauth　ProvidersからGoogleの説明を参照

CallbackURLは[origin]をドメインに書き換えて保存
例:http://localhost:3000/api/auth/callback/google

GCPの設定で必要(最後までできてなかったところ)

.envファイルにClientID,ClientSecretをそれぞれ追加（あとでそれぞれ入力するので空でOK）

.env

AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

Signin画面への遷移は、formのactionに、ServerActionでsignIn("Google")を非同期で渡すだけで実装できる(SeverActionだからClientComponentでは(Client)のタブを参照)
→まあClientComponentは切り分けて最下層で実装するだろうから基本RSCでいいかな

2.GCPでの設定

GCPコンソール画面までは割愛。
サイドバーから’APIとサービス’→’OAuth同意画面’と続き、初期設定を済ませる
→(キャッシュの関係なのか、反映に時間がかかった。待てば大丈夫)

クライアントタブからプロジェクトを選択、ClientID、ClientSecretを前述の.envに記入

＊重要＊　ここで'承認済みのリダイレクトURI'にコールバックURLを、'承認済みのJavaScript生成元'にドメインを入力して保存。

テストアカウントの追加もここで行う

3.遷移の確認

これで初期設定は済んだので、UIを整えてsignIn,signOutメソッドで遷移処理の実装。
P.S.) auth()からsession情報を取り出せる。