Open1

Next.Auth(v5)詰まりどころ

カニカニ

【問題点】Github認証ページに移らない

公式チュートリアルや非公式チュートリアルを参考に、仕様としてボタンを押すとGithubの認証ページに進むように実装しました。
しかし、ボタンを押しても404エラーが出て、Githubの認証ページには進みません。

//エラー文
POST http://localhost:3000/api/auth/signin/github? 404 (Not Found)
signIn	@	react.js:153
await in signIn		
handleLogin	@	page.tsx:6
executeDispatch	@	react-dom-client.development.js:16501
runWithFiberInDEV	@	react-dom-client.development.js:844
processDispatchQueue	@	react-dom-client.development.js:16551
(anonymous)	@	react-dom-client.development.js:17149
batchedUpdates$1	@	react-dom-client.development.js:3262
dispatchEventForPluginEventSystem	@	react-dom-client.development.js:16705
dispatchEvent	@	react-dom-client.development.js:20815
dispatchDiscreteEvent	@	react-dom-client.development.js:20783

確認したこと

・.env.localの書き方が間違っていないか→間違ってなかった
・そもそもNext.Auth公式が意図した書き方になっていないかどうか→公式チュートリアルに沿って実装したのでそれはなかった
・ディレクトリの構造が間違っていないか(ありがち)→確認したけど間違ってなかった

しかし、なぜ。

404エラー文をそのまま検索してみました。するとGithub内で同様の現象が議論されていたようです。

yes, problem was chrome was chaching my localhost login page and imediately redirecting to error, i disabled chache from devtools and it resolved.
訳:はい、問題はchromeがlocalhostのログインページをキャッシュしていて、素早くエラーページにリダイレクトすることにあります。devtoolsからキャッシュを無効にすると解決しました。
https://github.com/nextauthjs/next-auth/discussions/7985#discussioncomment-6439269

【結論】Chromeが悪さをしていました。

キャッシュを無効にすると解決しました。あるいは、Edgeを使うとそのようなことにはならなかったです。