CODEWITHSUNDEEP
reactjstypescripttypesnext.jsnext-auth
Rodrigo Merlone
Rodrigo Merlone

Reputation: 397

Next-Auth providers with a Typescript error

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: enter image description here

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

I'd really appreciate any help on the matter.

Upvotes: 2

Views: 6559

Answers (3)

Vanessa Campioni
Vanessa Campioni

Reputation: 11

I solved this problem by putting a ternary validation on the clientId and clientSecret variable assignment, like this:

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

and it's working properly.

Upvotes: 1

Adam Torma
Adam Torma

Reputation: 103

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
  }
}

Upvotes: 4

Mentlegen
Mentlegen

Reputation: 1278

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

Upvotes: 7

Related Questions