reactjs - Furnizori Next-Auth cu o eroare Typescript

Am încercat să implementez Next-Auth cu Typescript și un furnizor OAuth, cum ar fi Auth0. După ce am urmat documentația, problema a apărut, și chiar după ce am vizionat o mulțime de videoclipuri și am făcut exact ce au făcut alți oameni, eroarea persistă. Iată fragmentul de cod pentru 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,
        }),
    ],
});

Eroarea pe care o primesc apare atât în clientId, cât și în clientSecret și este descrisă mai jos:

Ceea ce nu înțeleg, totuși, este că atunci când mă uit la oauth.d.ts descopăr că ambele acceptă fie string, fie undefined:

Aș aprecia cu adevărat orice ajutor în această problemă.

Răspuns #1

Dacă te uiți cu adevărat la declarație, este astfel:

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

Motivul din spatele acestui lucru cred că este că, fără clientId și clientSecret, OAuth nu va funcționa niciodată corect.

Două moduri posibile de a-l rezolva:

• cea mai leneșă (și nu foarte bună) metodă ar fi să îl convertești pur și simplu într-un șir de caractere

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

• puțin mai puțin leneș, și poți adăuga manual avertismente dacă valorile sunt goale

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

Răspunsul #2

Ca în exemplul NextAuth.js TypeScript, ai putea crea un fișier process.d.ts care conține următoarele:

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