无法加载资源：服务器响应状态为 500。使用 vercel 部署了 React 应用程序

Question

您好，我的 max 应用程序的部署版本有错误。应用程序是使用 vercel 部署的，当我单击应用程序中的登录按钮时，我收到此错误“服务器错误 服务器配置存在问题。请检查服务器日志以获取更多信息。” 错误1

当我在控制台中检查控制台时，可以看到此消息“无法加载资源：服务器响应状态为 500 ()”

我的身份验证代码是这样的

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // ...add more providers here
  ],
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async session({ session, token, user }) {
      session.user.username = session.user.name
        .split(" ")
        .join("")
        .toLocaleLowerCase();

      session.user.uid = token.sub;
      return session;
    },
  },
});

登录页面的代码是这样的

import { getProviders, signIn as SignIntoProvider } from "next-auth/react";
import Header from "../../components/Header";

function signIn({ providers }) {
  return (
    <>
      <Header />
      <div className="flex flex-col items-center justify-center min-h-screen py-2 -mt-55 px-14 text-center">
        <img className="w-80" src="http://links.papareact.com/ocw" alt="" />
        <p className="font-xs italic">
          This is not a REAL app, it is built for educational purposes only
        </p>

        <div className="mt-40">
          {Object.values(providers).map((provider) => (
            <div key={provider.name}>
              <button
                className="p-3 bg-blue-500 rounded-lg text-white"
                onClick={() => SignIntoProvider(provider.id, { callbackUrl: "/"})}
              >
                Sign in with {provider.name}
              </button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

export async function getServerSideProps() {
  const providers = await getProviders();
  return {
    props: {
      providers,
    },
  };
}

export default signIn;

在本地主机中一切都很好，但在部署版本中我收到错误。

Vercel 对数为

[GET] /api/auth/error
14:16:09:08
2021-12-22T13:16:09.140Z    e3d29912-86c7-49c8-91a9-ecb87758e1a9    ERROR   [next-auth][error][NO_SECRET] 
https://next-auth.js.org/errors#no_secret Please define a `secret` in production. MissingSecret [MissingSecretError]: Please define a `secret` in production.
    at assertConfig (/var/task/node_modules/next-auth/core/lib/assert.js:24:14)
    at NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:34:52)
    at NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:16:51)
    at /var/task/node_modules/next-auth/next/index.js:52:38
    at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils.js:102:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Server.handleApiRequest (/var/task/node_modules/next/dist/server/next-server.js:1064:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/next-server.js:951:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:222:32)
    at async Server.run (/var/task/node_modules/next/dist/server/next-server.js:1135:29) {
  code: 'NO_SECRET'
}

Answer 1

您应该使用此命令 'openssl rand -base64 32' 生成 NEXTAUTH_SECRET ，将 NEXTAUTH_SECRET= generatedSecret 添加到 .env 文件并更新 nextauth.js 文件。

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
   providers: [
     GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
     }),
   ],
  secret: process.env.NEXTAUTH_SECRET,
});

检查https://next-auth.js.org/configuration/options#secret了解更多信息