尝试配置下一个身份验证登录页面，但 getProviders() 出现问题

Posted 2023-02-21

【中文标题】尝试配置下一个身份验证登录页面，但 getProviders() 出现问题

【英文标题】：trying to configure next-auth signin page, but having a problem with getProviders()

【发布时间】：2021-12-31 04:01:19

【问题描述】：

各位程序员们好，

我正在构建一个 nextJs 应用程序，使用 next-auth 进行用户登录。我在“pages/api/auth”中创建了 [...nextauth].js 文件，在“pages/auth/”中创建了一个 signin.js 文件，这些文件的代码写在下面以供参考。我遇到的问题是，当我尝试访问登录页面时，我不断收到以下错误：“TypeError: Cannot convert undefined or null to object”

下面是项目中的依赖及其对应版本的列表：

“依赖”： "@heroicons/react": "^1.0.5", "@tailwindcss/forms": "^0.3.4", “伪造者”：“^5.5.3”， “火力基地”：“^9.4.0”， “下一个”：“最新”， "next-auth": "^4.0.0-beta.7", “反应”：“^17.0.2”， “反应域”：“^17.0.2”， “顺风滚动条隐藏”：“^1.0.4” ,

[..nextauth].js 代码：

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth(
  // Configure one or more authentication providers
  providers: [
    GithubProvider(
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    ),
  ],

  pages: 
    signIn: "/auth/signin",
  ,
);

signin.js 代码：

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

function signIn( providers ) 
  return (
    <>
      Object.values(providers).map((provider) => (
        <div key=provider.name>
          <button
            onClick=() => 
              signIntoProvider(provider.id);
            
          >
            Sign In with provider.name
          </button>
        </div>
      ))
    </>
  );

export async function getServerSideProps(context) 
  const providers = await getProviders();

  return 
    props: 
      providers,
    ,
  ;


export default signIn;

Error Code

控制台日志记录“providers”显示“null”，所以我认为 getProviders 出于某种原因无法正常工作。知道为什么会这样吗？

非常感谢。

【问题讨论】：

我在相同的代码上遇到了同样的错误。你能解决这个问题吗？

【参考方案1】：

我有同样的问题。我尝试控制台记录等待 getProviders 的结果，但它无法获取，因为它试图获取 https://localhost:3000/api/auth/providers 而不是 http://localhost:3000/api/auth/providers。

我的 .env.local 中有错误的 NEXTAUTH_URL。它应该是 http://localhost:3000 而不是 https://localhost:3000。

【参考方案2】：

我已经通过将 getProviders 移入状态来解决这个问题...

const SignIn = () => 
  const [providers, setProviders] = useState(null);

  useEffect(() => 
    (async () => 
      const res = await getProviders();
      setProviders(res);
    )();
  , []);

  return (
    <>
      providers &&
        Object.values(providers).map((provider) => (
          <div key=provider.name>
            <button
              onClick=() => 
                signIn(provider.id);
              
            >
              Sign in with provider.name
            </button>
          </div>
        ))
    </>
  );
;