为什么凭据授予的凭证选项？

Question

在页面中使用自定义符号的NextAuth.js凭据提供商的许多代码示例都不包含凭证选项中的凭据选项。如文档中所述（ https://next-auth.js.s.s.s.ss.org/providers/凭据＃示例）凭据选项的目的是根据附加到此选项的属性自动“在页面中的符号上生成合适的表单”。 由于我在页面中使用自定义符号，因此我不需要这些自动生成的字段，因为我手动编码它们，就像文档中所建议的那样（ https://next-auth.js.s.org/configuration/pages#credentials-sign-sign-in-in ） 当我使用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中，凭据选项 cordentialsprovider 并不是严格要求的，但它具有特定的目的。如您提到的那样，其主要作用是根据凭据对象中定义的属性自动在登录页面上生成合适的表单。

如果您使用的是自定义登录页面并手动编码了表单字段，则可以安全省略凭据选项。但是，如果由于缺少凭据选项而使用typescript和遇到类型错误，则有一些选项：

1. 提供虚拟凭据对象：

您可以提供一个空或虚拟凭证对象满足打字稿类型检查。这样，您可以保留自定义登录页面并避免键入错误。这是一个示例：

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，凭据对象是类型的任何类型，有效地绕过该特定属性的类型检查。这是一个示例：

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...
});

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