ローカルのコンテナ上で、Next.jsのnext-auth使用してビルド後に実行したらエラーになった件

Nextjsで実装していたときに、

認証周りを構築しようとした時に、

何かライブラリなどを用いて、

GoogleのOAuthでの認証を試そうと考えました。

現時点で調べていると、

• 「Auth.js(NextAuth.js)」

というライブラリが良さそうなので、

こちらを試してみることにしました。

今回は、

ライブラリ「Auth.js(NextAuth.js)」を用いて、

Google OAuthの認証を試していたので、

その時にビルドまでうまくいったのだが、

実行するとエラーになった時のメモを

備忘録としてこの記事に残します。

公式サイトの情報

公式サイト

まずは、公式サイトでNextAuth.jsのことを確認

自分が確認した時点（2023/04/25）で、

NextAuth.js is becoming Auth.js! 🎉 
Read the announcement. Note, 
this site is under active development.

とアナウンスされているので、

それぞれのリンクをメモしておきます。

https://authjs.dev/

https://next-auth.js.org/

nuxt-authでGoogle認証を試した

今回のビルドエラーになったのは、

Next.jsでGoogle認証を試していたのだが、

開発モードではうまく挙動していた。

TypeScriptを使っているので、

ビルド時にエラーになったが、

ベースとなるやっていることは、

以下の記事を参考。

Next.js でGoogle OAuthをAuth.js(NextAuth.js)で試した件

ビルドのエラーは調整済み

ビルドについてもエラーになったが、

以下の対応をやって、

問題なくビルドは完了している。

Next.jsのnext-auth使用してビルドしたらエラーになった件

実行エラー

実行したら、

エラーが発生した。

エラー内容

Error: Error serializing `.csrfToken` returned from `getServerSideProps` in “/auth/signin”.
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value

原因

今回、ローカルで各種設定をした上で、

ブラウザで、

http://localhost:8032/api/auth/csrf

http://localhost:8032/api/auth/providers

などを試したら、

うまく挙動していた。

ここまで確認したら、

実行しているローカル上で、

next-authでの動きは問題ないかと。

GCP自体の設定も問題ないので、

考えられることとしては、

サーバーサイドのみでの挙動が、

うまく処理されていないということ。

なので、その辺りを色々と試した結果、

9000/tcp, 0.0.0.0:8032->8092/tcp

という感じで、

元々は、ポート番号を、

ローカルのホストの番号とコンテナのポートの番号が違う

ということなので、

ローカルのホストの番号とコンテナのポートの番号を合わせる

という対応をすると、

うまく挙動できました。