Next-Auth providers with a Typescript error

Question

I've been trying to implement Next-Auth with Typescript and an OAuth provider, such as Auth0. After following the docs the problem appeared, and even after watching tons of videos and doing exactly what other people did, the error persists. Here is the code snippet for the 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,
        }),
    ],
});

The error I'm getting is in both clientId and clientSecret, and is described below:

What I don't understand, however, is that when looking at oauth.d.ts I find that both accept either string or undefined:

I'd really appreciate any help on the matter.

Answer 1

If you actually look at the declaration, it is as such:

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

The reason behind this I believe is that without the clientId and clientSecret the OAuth will never work properly.

Two possible ways of fixing it:

• the very lazy (and not so good) way would be to simply cast it as a string

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

• a bit less lazy, and you can add yourself manual warnings if the values are empty

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

As in the NextAuth.js typescript example, you could create a process.d.ts file that contains the following:

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