reactjstypescripttypesnext.jsnext-auth

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.


Solution

  • 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:

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