今学習しつつ制作してるウェブアプリで、ログインして蔵書の既読情報を登録できるようなしくみを作りました。
認証にはNextAuthを使用して、ログインの仕組みとは生まれて初めて自分で触ったのに、ネットの情報を見てやったら驚くほど簡単に10分くらいで実装できました。
その仕組はローカルだと問題なく動いていたのですが、Vercelにデプロイしてみたところ、全く動きませんでした。
色々とネットの情報を調べてみたところ、いくつかそれに言及してる記事がありました。
それぞれ参考になることが書いてあったのですが、共通して必須事項として書いてあるのが環境変数にVERCEL_URLを追加するという点。
値としてはNEXTAUTH_URLと同じ値を、Vercelの環境変数に加えてやる必要があります。
加えて、Next.jsで環境変数をブラウザで使用する場合には接頭辞としてNEXT_PUBLICをつける必要があるのですが、記事の片方に書いてあるとおり僕の場合はこのVERCEL_URLにもそれをつける必要がありました。
これってブラウザ上から環境変数の値が読み取れるということだと思うので、業務とか正式サービスとしてリリースする場合にはこれでは駄目で何らかの改善は必要ですが、ひとまず、Vercel+NextAuthでもOAuth認証の仕組みが動いたよということで一旦OKにしたいと思います。