Question

存在 Typescript 错误的 Next-Auth 提供程序

2022-08-23

5540

reactjs typescript types next.js next-auth

我一直在尝试使用 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">>

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

两种可能的修复方法：

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

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,
        }),
    ],
});

Answer 2

与 NextAuth.js typescript 示例中一样，您可以创建一个包含以下内容的 process.d.ts 文件：

declare namespace NodeJS {
  export interface ProcessEnv {
    AUTH0_ID: string
    AUTH0_SECRET: string
    AUTH0-DOMAIN: string
  }
}

Answer 3

我通过对 clientId 和 clientSecret 变量赋值进行三元验证解决了这个问题，如下所示：

clientId: process.env.AUTH0_ID ? process.env.AUTH0_ID : ""
clientSecret: process.env.AUTH0_SECRET ? process.env.AUTH0_SECRET : ""

并且它运行正常。