客户端在使用 next.js 构建的实时网站上获取错误

Question

您好，我已尽一切可能找出在使用 NEXTJS 构建的实时网站上可能导致上述错误的原因。

我注意到每当我重新加载网站时都会发生此错误。

我还注意到，每当我尝试使用用户名和密码登录时，我都可以在本地主机中没有任何错误，也可以使用https://codesandbox.io。但是在实时站点上，我收到一个服务器错误“服务器配置问题。”。

当我在开发者工具上进一步滚动时，会发现以下附加信息。

JSON 中位置 0 的意外令牌

我在vercel中添加了以下环境变量

NEXTAUTH_URL = https://****.vercel.app/
MONGODB_URI = mongodb+srv://****@cluster0.9kc5p.mongodb.net/*****?retryWrites=true&w=majority

我的 [...nextauth].js 文件如下

import NextAuth from "next-auth";
import CredentialsProviders from "next-auth/providers/credentials";
import { verifyPassword } from "../../../lib/hashedPassword";

import clientPromise from "../../../lib/mongodb";

export default NextAuth({
  session: {
    strategy: "jwt"
  } /* check other providers you may add database etc */,
  providers: [
    CredentialsProviders({
      /* authorize will be called when it receives incoming login req */
      async authorize(credentials) {
        const client = await clientPromise;
        const db = client.db();
        /* check if we have user or email */
        const usersCollection = await db.collection("users");

        const user = await usersCollection.findOne({
          $or: [
            { email: credentials.email },
            { userName: credentials.userName }
          ]
        });

        if (!user) {
          throw new Error("No user found");
        }
        const isvalid = await verifyPassword(
          credentials.password,
          user.password
        );

        if (!isvalid) {
          throw new Error("password is invalid");
        }

        return {
          email: user.email
        }; 
      }
    })
  ]
});

我的登录页面如下

import Button from "../../UI/Button/Button";
import Input from "../../UI/Input/Input";
import Card from "../../UI/card/Card";
import classes from "./Login.module.css";
import Link from "next/link";
import { useForm } from "react-hook-form";
import { signIn, getSession } from "next-auth/react";
import { useRouter } from "next/router";

const Login = () => {
  const route = useRouter();
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const submittedFormHandler = async (userInputs) => {
    const result = await signIn("credentials", {
      redirect: false,
      email: userInputs.userNameEmail,
      userName: userInputs.userNameEmail,
      password: userInputs.password
    }); /* result will always resolve */
    if (!result.error) {
      route.replace("/");
    }
  };

  return (
    <>          

      <Card className={classes.login}>
        <form onSubmit={handleSubmit(submittedFormHandler)}>
          
          <Input
            htmlFor="userNameEmail"
            id="userNameEmail"
            label="UserName or Email"
            input={{
              type: "text",
              ...register("userNameEmail", { required: true})
            }}
          ></Input>
          <span className={classes.spanning}>
            {errors.userName &&
              "Enter userName or Email at least four characters"}
          </span>

          <Input
            htmlFor="password"
            id="password"
            label="Enter Password"
            input={{
              type: "password",
              ...register("password", { required: true, minLength: 8 })
            }} 
          ></Input>
          <span className={classes.spanning}>
            {errors.password && "password should be at least 8 characters"}
          </span>
          <div className={classes.password}>
            <Button type="submit">Submit</Button>
            <Link href="/ForgotPassword">Forgot Password ?</Link>
          </div>
          <Link href="/NewUser" className={classes.link}>
            Create Account New User
          </Link>
        </form>
      </Card>
    </>
  );
};


export async function getServerSideProps(context) {
  const session = await getSession({
    req: context.req
  }); //returns session obj or null
  if (session) {
    return {
      redirect: {
        destination: "/",
        permanent: false
      }
    };
  }
  return {
    props: { session }
  };
}

export default Login;

可能是什么问题？请帮忙

Answer 1

我不能评论，¿你能解决问题吗？