NextAuth 在会话回调中抛出 CLIENT_FETCH_ERROR 错误答案

【问题标题】：NextAuth throwing CLIENT_FETCH_ERROR error in session callbackNextAuth 在会话回调中抛出 CLIENT_FETCH_ERROR 错误
【发布时间】：2022-02-21 18:56:11
【问题描述】：

在设置 nextauth v4 时遇到一些问题。得到这个error：

客户端获取错误，JSON 输入意外结束 {error: {...}，路径： '会话'，消息：'JSON.parse：第 1 行数据意外结束 JSON 数据的第 1 列'}。

要修复它，他们说您必须在部署时将 url 路径添加到 .env 文件。我在本地工作，所以这应该不是问题，但添加后仍然是同样的错误。

当我注释掉 [...nextauth] 文件中的异步会话回调时，不会弹出错误并且会话已“经过身份验证”但不会持续存在。我已经盯着它看了好一阵子了，我需要一些帮助！

[...nextauth].js

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials, res) {

        //find existing user
        const user = await prisma.user.findUnique({
          where: {
            email: credentials.email,
          },
        });

        if (
          credentials.email === user.email &&
          credentials.password === user.password
        ) {
          return user;
        } else {
          return res.status(409).send({ message: "No user with that email." });
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
        return token;
      }
    },
    //commenting this function and no error shows up
    async session({ session, token }) {
      if (token) {
        session.id = token.id;
        return session;
      }
    },
  },
  secret: "mysecret",
  jwt: {
    secret: "mysecret",
    encryption: true,
  },
  session: {
    strategy: "jwt",
    maxAge: 1 * 24 * 60 * 60,
  },
});

auth-form

import { signIn, useSession } from "next-auth/react";

export default function AuthForm() {
  const { data: session } = useSession();

  const handleSubmit = async (userData) => {
    const { error, ok, url } = await signIn("credentials", {
      redirect: false,
      email: userData.email,
      password: userData.password,
      callbackUrl: "/profiel",
    });

    if (ok) {
      router.push(url);
    } else {
      alert(error);
    }
  };

  return (
      <Form onSubmit={handleSubmit}>
        <Field id="email" />
        <Field id="password" />
        <button type="submit">{isRegistered ? "Sign in" : "Register"}</button>
      </Form>
  );
}

_app.js

import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

【问题讨论】：

在session 回调中，将return session; 行移到if 块之后。在 jwt 回调中对 return token; 执行相同操作
解决了！感谢您抽出宝贵时间查看。如果您想发布答案，我会将其标记为“已解决”。

标签： javascript authentication next.js jwt next-auth

【解决方案1】：

session 和 jwt 回调需要分别返回一个 session 和 jwt 对象。您需要将每个函数中的 return 语句移到 if 块之后。

callbacks: {
    async jwt({ token, user }) {
        if (user) {
            token.id = user.id;
        }
        return token;
    },
    async session({ session, token }) {
        if (token) {
            session.id = token.id;
        }
        return session;
    }
}

【讨论】：