NextAuth.jsでhttps://localhost:3000/api/auth/signinから動かない

その他

はじめに

ローカル環境でNextAuth.jsを使ってログイン処理を実装中。

https://localhost:3000/api/auth/signinに遷移して止まってしまう現象が発生しました。

その解決策を記載します。

サインイン時、https://localhost:3000/api/auth/signで落ちる👇

結論

httpsを使う

で解決しました。

next.jsの13.5以降で、開発サーバーをhttpsで立ち上げることができます。

httpsにリダイレクトされるなら、httpsで揃えれば良い、というわけです。

手順

まず、next.jsを13.5以上にします。

package.jsonのscriptsを変更します。

  "scripts": {
    "dev": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
  },

この状態で、「npm run dev」を実行。

(PCのパスワードが求められます)

起動すればOKです。

これでサインインすると、無事正常に認証されました!

困っている方の助けになれば何よりです!