Next.js配置next-auth自定义登录页时getProviders返回null报错求助

问题原因及解决方案 #

你触发的TypeError: Cannot convert undefined or null to object是因为代码调用Object.values(providers)时，providers为null导致的，getProviders()返回null可按以下优先级排查：

• 文件路径错误：确认[...nextauth].js文件的存放路径完全为pages/api/auth/[...nextauth].js，文件名不能有任何拼写错误、大小写偏差，Next.js的API路由对路径和文件名严格敏感，路径错误会导致NextAuth的接口无法正常暴露，getProviders()自然拿不到数据。
• 环境变量未正确配置：确认项目根目录下存在.env.local文件，且文件内正确填写了GITHUB_ID和GITHUB_SECRET两个配置项，修改环境变量后必须重启本地开发服务器才能生效，GithubProvider初始化失败会导致NextAuth整体初始化异常，返回空的provider列表。
• Beta版本自身bug：你使用的next-auth@4.0.0-beta.7属于测试版本，存在服务端调用getProviders()的已知兼容问题，两个解决方案：
  1. 升级到next-auth v4正式稳定版，执行npm install next-auth@latest即可
  2. 在getServerSideProps中调用getProviders()时传入当前上下文参数，修改代码为：

  const providers = await getProviders(context);
  

• 临时兼容处理：你可以先在渲染逻辑中添加非空判断，避免页面直接崩溃：

import { getProviders, signIn as signIntoProvider } from "next-auth/react";

function signIn({ providers }) {
  return (
    <>
      {providers ? Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            onClick={() => {
              signIntoProvider(provider.id);
            }}
          >
            Sign In with {provider.name}
          </button>
        </div>
      )) : <p>加载登录方式中...</p>}
    </>
  );
}
export async function getServerSideProps(context) {
  const providers = await getProviders(context);

  return {
    props: {
      providers,
    },
  };
}

export default signIn;

内容的提问来源于stack exchange，提问作者RF-90