next-auth: TypeScript error for the Credentials provider

Description 🐜

The changes to Providers in […nextauth].ts in V4 appered a TypeScript error for the Credentials provider.

Type 'CredentialsConfig<{ username: { label: string; type: string; }; password: { label: string; type: string; }; }>' is not assignable to type 'Provider'.
  Type 'CredentialsConfig<{ username: { label: string; type: string; }; password: { label: string; type: string; }; }>' is not assignable to type 'CredentialsConfig<{}>'.
    Types of property 'authorize' are incompatible.
      Type '(credentials: Record<"username" | "password", string>, req: NextApiRequest) => Awaitable<Omit<User, "id"> | { id?: string | undefined; } | null>' is not assignable to type '(credentials: Record<never, string>, req: NextApiRequest) => Awaitable<Omit<User, "id"> | { id?: string | undefined; } | null>'.
        Types of parameters 'credentials' and 'credentials' are incompatible.
          Type 'Record<never, string>' is missing the following properties from type 'Record<"username" | "password", string>': username, password

Is this a bug in your own project?

How to reproduce ☕️

import bcrypt from 'bcryptjs';
import prisma from 'lib/prisma';
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials: any, req) {
        const user = await prisma.user.findUnique({
          where: {
            username: credentials.username
          }
        });

        if (!user) {
          return null;
        }

        const valid = await bcrypt.compare(credentials.password, user.password);

        if (!valid) {
          console.log(`Credentials not valid`);
          return null;
        }

        if (user) {
          return { ...user, email: user.username };
        }
        return null;
      }
    })
  ]
});

Screenshots / Logs 📽

No response

Environment 🖥

System: OS: Windows 10 10.0.19042 CPU: (8) x64 Intel® Core™ i5-1035G1 CPU @ 1.00GHz Memory: 3.44 GB / 11.81 GB Binaries: Node: 14.15.4 - D:\Node\node.EXE npm: 6.14.10 - D:\Node\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.38) Internet Explorer: 11.0.19041.906 npmPackages: next: ^10.2.3 => 10.2.3 next-auth: ^4.0.0-beta.2 => 4.0.0-beta.2 react: ^17.0.2 => 17.0.2

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 34 (7 by maintainers)

Most upvoted comments

Nextjs with its 4,555,332,233 issue. Keep it up Vercel!

+26

TimMTech on Sep 21, 2022

Bumping this, still an issue as of May 2023. My workaround was to simply type the return as any:

CredentialsProvider({
      name: "Credentials",
      credentials: { 
        email: { label: "Username", type: "text", placeholder: "johndoe@domain.com" },
        password: { label: "Password", type: "password", placeholder: "verysecurepassword" },
      },
      async authorize (credentials) {
        try {
          if (!credentials) throw new Error("no credentials to log in as");
          const { email, password } = credentials;
          const {
            salt,
            password: hashedPassword,
            ...user
          } = await client.user.findUniqueOrThrow({
            where: {
              email,
            },
          });
          const logged = await comparePassword(password, salt, hashedPassword);
          if (!logged) throw new Error("invalid credentials");
          return user as any; // fix for https://github.com/nextauthjs/next-auth/issues/2701
        } catch (ignored) {
          return null;
        }
      }
    })

+16

gerardmarquinarubio on May 6, 2023

Instead of changing the strict setting in the tsconfig I highly recommend just using tsignore

  providers: [
    // @ts-ignore
    CredentialsProvider({

michael-lloyd-morris on Aug 16, 2023

Maybe a difference in the tsconfig.json causing this?

I have to go now, but please keep digging 🙏

Update: it’s the strict flag. next-auth is being developed with strict: false.

If I turn it to true, other stuff might break too… (counted 62 errors when I ran tsc) This might be a bigger issue then. For now, you could set strict: false, and the error will go away. I’ll have to investigate this further and decide what we should do. 🤔

balazsorban44 on Sep 8, 2021

I will close this in favour of #2709.

The current fix for this issue is to turn off strict mode in tsconfig.json.

balazsorban44 on Sep 9, 2021

The issue is when the tsconfig.json has strict mode turned on: "strict":true,

Rhym on Sep 8, 2021

can someone reopen this issue please? there are still a lot of people wanting to pass custom user data from the authorize method. also i got the same barrier when needing to pass the custom data to the session. why are we forced into this basic type again? export interface DefaultUser { id: string name?: string | null email?: string | null image?: string | null }

bs-spasici on Sep 14, 2023

why has this been closed if the issue still exists when "strict": true?

AnimeAllstar on Feb 5, 2024

Sweet man, thank you for all your time working with me on this. For now I’ll set strict to false, but would be awesome to support strict mode too 😃 But totally get if that would be a ballache.

Rhym on Sep 8, 2021

Me too man, me too 😂

Rhym on Sep 8, 2021

Now that just doesn’t make sense to my brain… 👀

balazsorban44 on Sep 8, 2021

Instead of changing the strict setting in the tsconfig I highly recommend just using tsignore
  providers: [
    // @ts-ignore
    CredentialsProvider({

      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment*/
      // @ts-ignore
      async authorize(credentials, req) {
      ...

Works like a charm ! 👍

Yohannfra on Nov 6, 2023

interface Credentials extends Record<"username" | "password", string> {}

  async authorize(credentials?: Credentials): Promise<LoggedInUser | null> {
        if (!credentials) return null;

fixed it for me

Meagle89 on May 31, 2023

does anyone have a fix for this? im also getting this error.

coycoylaniba on Mar 13, 2023

Here’s a reproducible issue: https://codesandbox.io/s/charming-feynman-0p5gf?file=/src/pages/api/auth/[...nextauth].ts

Rhym on Sep 8, 2021

I literally pasted the code from above. 😅

You ask me for a reproduction of a working example? 😄 I’ll create one, fine.

balazsorban44 on Sep 8, 2021