出现 Typescript 错误的 Next-Auth 提供商

Question

我一直在尝试使用 Typescript 和 OAuth 提供程序（例如 Auth0）来实现 Next-Auth。在遵循文档后，问题出现了，即使观看了大量视频并完全按照其他人所做的操作后，错误仍然存​​在。以下是 的代码片段api/auth/[...nextauth.tsx]：

import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";

export default NextAuth({
    providers: [
        Auth0({
            clientId: process.env.AUTH0_ID,
            clientSecret: process.env.AUTH0_SECRET,
            domain: process.env.AUTH0_DOMAIN,
        }),
    ],
});

我收到的错误同时出现在clientId和 中clientSecret，如下所述：

然而，我不明白的是，当我查看时，oauth.d.ts我发现两者都接受string或undefined：

我真的很感激任何有关此事的帮助。

Answer 1

如果你真的看一下声明，它是这样的：

export type OAuthUserConfig<P>
Alias for:
Omit<Partial<OAuthConfig<P>>, "options" | "type"> & Required<Pick<OAuthConfig<P>, "clientId" | "clientSecret">>

我认为这背后的原因是，如果没有 OAuth clientId，clientSecretOAuth 将永远无法正常工作。

两种可能的修复方法：

• 非常懒惰（而且不太好）的方法是将其简单地转换为字符串

import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";

export default NextAuth({
    providers: [
        Auth0({
            clientId: process.env.AUTH0_ID as string,
            clientSecret: process.env.AUTH0_SECRET as string,
            domain: process.env.AUTH0_DOMAIN,
        }),
    ],
});

• 稍微不那么懒惰，如果值为空，您可以添加自己的手动警告

import NextAuth from "next-auth/next";
import Auth0 from "next-auth/providers/auth0";

const { AUTH0_ID = '', AUTH0_SECRET = '', AUTH0_DOMAIN = '' } = process.env;

// potential console.error here to warn yourself you forgot to set the env values

export default NextAuth({
    providers: [
        Auth0({
          clientId: AUTH0_ID,
          clientSecret: AUTH0_SECRET,
          domain: AUTH0_DOMAIN,
        }),
    ],
});