[next-auth][error][CLIENT_FETCH_ERROR] を解決したい
[next-auth][error][CLIENT_FETCH_ERROR] を解決したい
現在、私はNext.js TypeScript React FireStore NextAuth Vercel等を用いてプロダクトを作っています。
Vercelにてdeployした後に確認してみると、どうもGoogleProvierでの認証がうまくいっていないようなのです。
発生している問題・エラー
通常表示されるページが真っ白で500:Internal Server Errorが出ています。
以下はGoogleの開発者ページにて表示されているエラー文です。
どうにかこのエラーを解決したいです。お願いします。
[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/session', message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`}client: trueerror: message: "Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"name: "SyntaxError"stack: "SyntaxError: Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"[[Prototype]]: Objectmessage: "Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"url: "/api/auth/session"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
error @ _app-776fbf0a57cd2b88.js:1
n.<computed> @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
d @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
t @ _app-776fbf0a57cd2b88.js:1
u @ _app-776fbf0a57cd2b88.js:1
Promise.then（非同期）
t @ _app-776fbf0a57cd2b88.js:1
s @ _app-776fbf0a57cd2b88.js:1
Promise.then（非同期）
t @ _app-776fbf0a57cd2b88.js:1
s @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
c @ _app-776fbf0a57cd2b88.js:1
t.fetchData @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
d @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
t @ _app-776fbf0a57cd2b88.js:1
s @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
L @ _app-776fbf0a57cd2b88.js:1
N @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
d @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
t @ _app-776fbf0a57cd2b88.js:1
s @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
（匿名） @ _app-776fbf0a57cd2b88.js:1
ri @ framework-4556c45dd113b893.js:1
Ss @ framework-4556c45dd113b893.js:1
（匿名） @ framework-4556c45dd113b893.js:1
S @ framework-4556c45dd113b893.js:1
T @ framework-4556c45dd113b893.js:1
以下はおそらく問題が起きているであろう/pages/api/[...nextauth].tsファイルです。
import { TagIcon } from "@heroicons/react/outline";
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXT_PUBLIC_SECRET,
callbacks: {
async jwt({ token, account }) {
if (account?.accessToken) {
token.accessToken = account.accessToken;
}
return token;
},
async session({ session, token }) {
session.user.tag = session.user.name
.split(" ")
.join("")
.toLocaleLowerCase();
session.user.uid = token.sub;
return session;
},
},
});
自分で試したこと
+ secret: process.env.NEXT_PUBLIC_SECRET,
- secret: process.env.SECRET,
ネットで調べて/pages/api/[...nextauth].tsを以上のように書き換えましたが変化はありません。
開発段階(yarn run build yarn run dev)では問題はありませんでした。
バージョン
"next": "12.2.5"
"next-auth": "^4.10.3"
1
