サイトロゴ

muuuuminn blog

カテゴリ：Tech投稿日：
【自分用メモ】App router × Cloudflare pagesの環境においてNextAuth v5のOAuth認証が動作しなかったのサムネイル

【自分用メモ】App router × Cloudflare pagesの環境においてNextAuth v5のOAuth認証が動作しなかった

#Next.js
#メモ書き
#Cloudflare Pages
#NextAuth

追記（2024年12月10日）

Issueのコメントにて @cloudflare/next-on-pages のバージョンを 1.13.6 から 1.13.7 に上げたら動作したという情報があった。
早速試したところ、動作した。
そのため当記事で紹介した不具合に遭遇した人は、 @cloudflare/next-on-pages のバージョンを上げてみてほしい。

現状まとめ

Next.js（App router）で NextAuth v5 の Google と GitHub 認証を使用したミニマムなアプリケーションを用意した。そして 4 つの環境下で検証した。
結果としては、 Cloudflare Pages 環境下では動作しなかった。Vercel では動作した。

  • Cloudflare Pages
  • ローカル環境wrangler pages dev
  • Vercel
  • ローカル環境next dev

再現リポジトリを用意している。
環境変数と GitHub および Google Cloud の設定は各自で実施する必要がある。

開発環境

Node.js version: 20.13.1

package.json
"dependencies": {
  "@cloudflare/next-on-pages": "^1.13.6",
  "next": "^15.0.3",
  "next-auth": "^5.0.0-beta.25",
  "react": "latest",
  "react-dom": "latest",
  "wrangler": "^3.91.0"
},
"devDependencies": {
  "@types/node": "latest",
  "@types/react": "latest",
  "@types/react-dom": "latest",
  "typescript": "latest"
}
wrangler.toml
name = "nextauthv5-clouadflare"
pages_build_output_dir = ".vercel/output/static"
compatibility_date = "2024-11-29"

[env.production]
compatibility_flags = [ "nodejs_compat" ]

[env.production.vars]
AUTH_GITHUB_ID = ""
AUTH_GITHUB_SECRET = ""
AUTH_SECRET = ""
GOOGLE_CLIENT_ID = ""
GOOGLE_CLIENT_SECRET = ""
NEXTAUTH_URL = ""
AUTH_TRUST_HOST = "true"

エラーログ

wrangler pages dev で動作確認したときのエラーログを載せておく。

error_log
[wrangler:inf] Ready on http://localhost:8788
[wrangler:inf] GET / 200 OK (143ms)
[wrangler:inf] GET / 200 OK (14ms)
[wrangler:inf] GET /favicon.ico 304 Not Modified (15ms)
[wrangler:inf] POST / 303 See Other (27ms)
✘ [ERROR] TypeError: Illegal invocation: function called with incorrect `this` reference. See https://developers.cloudflare.com/workers/observability/errors/#illegal-invocation-errors for details.

      at K.waitUntil
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/auth/[...nextauth].func.js:2:826)
      at Ne.handler
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/auth/[...nextauth].func.js:2:23931)
      at async et
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/auth/[...nextauth].func.js:2:4302)
      at async Module.<anonymous>
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/auth/[...nextauth].func.js:8:3805)
      at async E
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/index.js:40:14667)
      at async ke
  (file:///Users/test/Documents/products/auth-app/.vercel/output/static/_worker.js/index.js:40:25857)
      at async jsonError
  (file:///Users/test/Documents/products/auth-app/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:10)
      at async drainBody
  (file:///Users/test/Documents/products/auth-app/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:10)
[wrangler:inf] GET /auth/callback/github 500 Internal Server Error (1074ms)

試したこと

  • 環境変数を env ファイルではなく Cloudflare 側で設定
  • NEXTAUTH_URLを 指定
  • signin の redirectTo で /を指定
  • provider の設定でcustomFetchを指定
  • production 環境ではdebugを off にする
  • nextauth の callbacks の各 function を定義

他にも試したけど、忘れてしまった。
これらを色々な組み合わせで検証していた。

参考

おわりに

今回の技術構成でアプリケーションを運用してそうな人が SNS でいたので、自分が何かを見落としている可能性がある。
GitHub や Google Cloud 側の設定は、合っているはずだけどなあ…。

もし同じ現象に遭遇して解決策を知っていれば再現リポジトリに Issue 立てたり、お問い合わせから教えてくれたら助かります。

ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?
スキル:
Next.js, TypeScript, React, Notion
趣味:
ゲーム, 手品, 開発, コレクション, 映画
GitHub
ブログ
経歴