💬
NextAuth v4を利用したアプリをVercelにデプロイする時の注意点
デプロイ自体は通常通りできたが、認証周りで2点躓いたので簡潔に備忘録として残します。
理解が違う点がありましたらご指摘いただけますと幸いです。
1 [...nextauth].jsにsecretを記述する必要がある
secret: process.env.NEXT_PUBLIC_SECRET,
上記を必ず記述しないと、server errorが出続ける.NextなのでNEXT_PUBLICも忘れずに付ける。
中身は、
openssl rand -based64 32
でランダムに生成し、.envに記述する。
2 環境変数に注意
通常、NEXTAUTH_URL=URLという形で記述するが、Vercelにデプロイする場合、
NEXT_PUBLIC_VERCEL_URL=***.vercel.app
という形で書かないと正常にAuth処理できない。何か遠回りな感じがすごい。
Vercelにも.envに記述しているenvironmentを書かないと当然ながら意味がない。
考察
記事やドキュメントが少ない中、こちらを参考にさせていただきました。
試しにNextAuthを利用してVercelにアプリをデプロイしてみたのですが、とりあえずはFirebase Authenticationの各種認証で良い気がしました。
また、上記リンクの方も書いていますが、NextAuthとVercelは相性があまり良くない気がしました。
Discussion
トークンのハッシュ化、Cookieの署名/暗号化、暗号化キーの生成に使うsecretにNEXT_PUBLICの接頭辞をつけても問題ないのでしょうか。
secret: process.env.NEXT_PUBLIC_SECRET,
もしかするとv4の中でも更新があったのかもしれませんが、たまたまこの記事にたどり着いたのでコメント書かせていただきます。
こちらはソースコードに記述しなくても、NEXTAUTH_SECRETという環境変数へ設定すれば問題ないようです。
また、フロントでは使わないので"NEXT_PUBLIC_"prefixはいらないかと。
(NEXT_PUBLICはNextだからではなく、クライアント側で使うかどうか)
これはリンク先の記事も少し誤解しているようなのですが、「VercelにデプロイするときはNEXTAUT_URLではなくVERCEL_URLを設定しろ」ではなく、正しくは「VercelにデプロイするときはVERCEL_URLを読み取るからNEXTAUTH_URLの設定は必要ないよ」かと思います。
VERCEL_URLは自動で設定されていますので、VERCEL_URLもNEXTAUTH_URLも設定しなくても動くというVercelへのデプロイの利点なのではないでしょうか？
実際NextAuthのドキュメントにもはっきりと「自動で検知するからVercelにデプロイするときは設定しなくてもよい」と書かれています。
NextAuth - NEXTAUTH_URL -
自分はNEXTAUTH_SECRETを入れるだけでVercelへのデプロイは完了したので楽でいいなと感じました。