为什么 CredentialsProvider 需要凭据选项？

Question

使用自定义登录页面的 NextAuth.js 凭据提供程序的许多代码示例不包含 CredentialsProvider 中的凭据选项。如文档 (https://next-auth.js.org/providers/credentials#example) 中所述，凭据选项的目的是根据附加的属性自动“在登录页面上生成合适的表单”这个选项。 由于我使用自定义登录页面，我不需要这些自动生成的字段，因为我按照文档中的建议手动编码了它们（https://next-auth.js.org/configuration/pages#credentials-sign-在） 当我使用 Typescript 时，如果不提供凭据选项，它会引发类型错误。由于我不需要它，所以我想将其保留。我的问题是否有解决方案，或者是否需要凭据选项以及出于其他原因需要？

带有凭据选项的代码示例：

...
providers: [
  CredentialsProvider({
    name: "Credentials",
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: {  label: "Password", type: "password" }
    },
    async authorize(credentials, req) {
      const user = { id: 1, name: "J Smith", email: "[email protected]" }

      if (user) {
        return user
      } else {
        return null
      }
    }
  })
]
...

不带凭据选项的代码示例：

import CredentialsProvider from "next-auth/providers/credentials";
...
providers: [
  CredentialsProvider({
    name: "Credentials",
    async authorize(credentials, req) {
      const user = { id: 1, name: "J Smith", email: "[email protected]" }

      if (user) {
        return user
      } else {
        return null
      }
    }
  })
]
...

PS：使用自定义注册页面时，甚至名称选项也不是必需的。我也希望能够排除这一点...

Answer 1

在 NextAuth.js 中，CredentialsProvider 中的 credentials 选项不是严格必需的，但它有特定用途。正如您所提到的，它的主要作用是根据 credentials 对象中定义的属性在登录页面上自动生成合适的表单。

如果您使用自定义登录页面并手动编码表单字段，则可以安全地省略 credentials 选项。但是，如果您使用 TypeScript 并由于缺少 credentials 选项而遇到类型错误，您有几个选择：

1. 提供虚拟凭据对象：

您可以提供一个空的或虚拟的凭据对象来满足 TypeScript 类型检查。这样，您可以保留自定义登录页面并避免类型错误。这是一个例子：

import { CredentialsProvider } from "next-auth/providers/credentials";

const credentials = {}; // Empty credentials object

export default NextAuth({
  providers: [
    CredentialsProvider({
      credentials,
      authorize: async (credentials) => {
        // Your custom authorization logic
      },
    }),
    // Other providers...
  ],
  // Other NextAuth options...
});

2. 类型铸造：

如果您不希望有一个空的凭证对象，您可以使用类型转换来满足 TypeScript。这告诉 TypeScript 凭证对象的类型为 any，有效地绕过了对该特定属性的类型检查。这是一个例子：

import { CredentialsProvider } from "next-auth/providers/credentials";

const credentials = {} as any; // Type casting to any

export default NextAuth({
  providers: [
    CredentialsProvider({
      credentials,
      authorize: async (credentials) => {
        // Your custom authorization logic
      },
    }),
    // Other providers...
  ],
  // Other NextAuth options...
});

这两种方法都允许您省略凭据选项，同时仍然满足 TypeScript 的类型检查。请记住，如果您决定切换回登录页面的 NextAuth.js 自动生成的表单字段，您将来可能需要重新访问凭据选项。