next-auth credentials provider authorize type error

Question

Problem

I am only using a single CredentialsProvider in next-auth but I'm confused about how to handle async authorize() with a custom user interface.

I defined the user interface in types/next-auth.d.ts as follows:

import NextAuth from "next-auth"

declare module "next-auth" {
  interface User {
    id: string
    address: string
    name?: string
  }
}

This is the provider definition in [...nextauth].ts:

CredentialsProvider({
  name: "Ethereum",
  credentials: {
    message: {
      label: "Message",
      type: "text",
    },
    signature: {
      label: "Signature",
      type: "text",
    },
  },
  async authorize(credentials) {
    try {
      const nextAuthUrl = process.env.NEXTAUTH_URL
      if (!nextAuthUrl) return null
      if (!credentials) return null

      // [verify the credential here]
      // "message" contains the verified information

      let user = await prisma.user.findUnique({
        where: {
          address: message.address,
        },
      })
      if (!user) {
        user = await prisma.user.create({
          data: {
            address: message.address,
          },
        })
      }

      return {
        id: user.id,
        address: user.address,
        name: user.name
      }
    } catch (e) {
      console.error(e)
      return null
    }
  },
})

Now I see the typescript error in the async authorize(credentials)

Type '(credentials: Record<"message" | "signature", string> | undefined) => Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type '(credentials: Record<"message" | "signature", string> | undefined, req: Pick<RequestInternal, "body" | "query" | "headers" | "method">) => Awaitable<...>'.
  Type 'Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type 'Awaitable<User | null>'.
    Type 'Promise<{ id: string; address: string; name: string | null; } | null>' is not assignable to type 'PromiseLike<User | null>'.
      Types of property 'then' are incompatible.
        Type '<TResult1 = { id: string; address: string; name: string | null; } | null, TResult2 = never>(onfulfilled?: ((value: { id: string; address: string; name: string | null; } | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | ... 1 more ... | unde...' is not assignable to type '<TResult1 = User | null, TResult2 = never>(onfulfilled?: ((value: User | null) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<...>) | null | undefined) => PromiseLike<...>'.
          Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
            Types of parameters 'value' and 'value' are incompatible.
              Type '{ id: string; address: string; name: string | null; } | null' is not assignable to type 'User | null'.
                Type '{ id: string; address: string; name: string | null; }' is not assignable to type 'User'.
                  Types of property 'name' are incompatible.
                    Type 'string | null' is not assignable to type 'string | undefined'.
                      Type 'null' is not assignable to type 'string | undefined'.

Docs

Credentials provider

NextAuth with typescript/extend interface

Answer 1

Got the same issue. Since I didn't want to turn of strict mode in .tsconfig, I simply went with parsing the returned object of authorize() to any...

async authorize(credentials) {
  // ...
  return {
    // ...
  } as any. // <-- This here
}

I don't like it, but I think it's better than turning off strict mode.

Also it doesn't destroy type-safety in the follow up since the next step using the returned type would be in the jwt({user}) callback, and the typing still works there just fine.

Answer 2

As stated on GitHub TypeScript error for the Credentials provider #2701 the current fix for this issue is to set strict to false ("strict": false) in the tsconfig.json file. The reason for this is that NextAuth.js was developed using "strict": false but they are currently working on it to become compatible with strict set to true.