HTTP-based email provider: type "email" is not assignable to type "oauth" | "credentials"

[mcevoypeter]

Provider type

Email

Environment

System:
OS: Linux 6.4 Arch Linux
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 26.16 GB / 31.06 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 20.4.0 - /usr/bin/node
Yarn: 3.3.0 - /usr/bin/yarn
npm: 9.8.1 - /usr/bin/npm
pnpm: 8.6.10 - /usr/bin/pnpm

Reproduction URL

https://github.com/mcevoypeter/next-auth-issue-repro

Describe the issue

I'm attempting to configure an HTTP-based email provider following the guide from the docs. When I add a stubbed-out provider object to the providers object key, I get the following error when running npm run build:

> build
> next build

- info Linting and checking validity of types ...Failed to compile.

./pages/api/auth/[...nextauth].ts:35:5
Type error: Type '{ id: string; type: "email"; sendVerificationRequest({ identifier: email, url }: { identifier: any; url: any; }): Promise<void>; }' is not assignable to type 'Provider'.
  Types of property 'type' are incompatible.
    Type '"email"' is not assignable to type '"oauth" | "credentials"'.

  33 |       version: "2.0",
  34 |     }),
> 35 |     {
     |     ^
  36 |       id: 'mailgun',
  37 |       type: 'email',
  38 |       async sendVerificationRequest({identifier: email, url}) {

How to reproduce

1. git clone https://github.com/mcevoypeter/next-auth-issue-repro
2. cd next-auth-issue-repro
3. npm install
4. npm run build

Expected behavior

I expect npm run build to cleanly compile.

[balazsorban44]

The code itself looks fine, it's just the types that are incorrect.

[mcevoypeter]

I was able to get the code to typecheck by adding the name, server, and options keys:

{
  id: 'mailgun',
  type: 'email',
  name: 'Email',
  server: null,
  options: {},
  async sendVerificationRequest({identifier: email, url}) {
    // <snip>
  }
}

[mcevoypeter]

Actually, the code snippet above only typechecks if I use a local version of next-auth. Not sure if it's a red herring or not.

The following fails to typecheck:

rm -rf node_modules
yarn add next-auth       # ^4.22.3 in package.json
yarn install
yarn run build

The error it produces:

Type error: Type '{ id: string; type: "email"; name: string; server: null; options: {}; sendVerificationRequest({ identifier: email, url }: { identifier: any; url: any; }): Promise<void>; }' is not assignable to type 'Provider'.
  Types of property 'type' are incompatible.
    Type '"email"' is not assignable to type '"oauth" | "credentials"'.

The following typechecks:

rm -rf node_modules
yarn remove next-auth
yarn add path/to/next-auth/packages/next-auth     # the repo is checked out to [email protected]
yarn install
yarn run build

[ken-muturi]

has this been fixed ? am also having issues

[itsalam]

Seems to be broken from this change here:
1e886b9

Looking through the next-auth code, it seems like the intended fix should be:

...
import Email from "next-auth/providers/email"
...

    // {
    //   id: 'mailgun',
    //   type: 'email',
    //   async sendVerificationRequest({identifier: email, url}) {
    //     console.log(email)
    //   }
    // },
    Email({
      type: 'email',
      async sendVerificationRequest({identifier: email, url}) {
        console.log(email)
      }
    }),
  ],

It seems the current Email provider doesn't allow overwriting the id field however, which seems problematic.

Can you chime in on what changes should happen @balazsorban44? Seems like we could update the docs to use the provider, and just add in id?: = "email" to the EmailUserConfig.

[KingXP-Pythoner]

Really need a fix for this, having the same issue

[wahidrahim]

Strange, I have to add whole bunch of other properties, to effectively only use the sendVerificationRequest method

providers: [
    {
      id: 'email',
      type: 'email',
      from: '[email protected]',
      server: {},
      maxAge: 24 * 60 * 60,
      name: 'Email',
      options: {},
      sendVerificationRequest: (params) => {
        console.log({ params });
      },
    },
  ],

The other option seems to be use to he EmailProvider from next-auth/providers/email but that requires installing nodemailer, which is not necessary at all for my needs; I am using a separate service for sending emails to users.

Is this a TS definitions issue, or something perhaps can we just use EmailProvider, but without requiring nodemailer somehow (this seems best)?

Edit: nvm, nodemailer is not required. Seems I can get around by just using sendVerificationRequest directly

[lnikell]

Getting same error too. Hack by @wahidrahim worked fine.

[MattRey]

Still getting this type error with a new install of next/next-auth using T3:

Types of property 'type' are incompatible.
    Type '"email"' is not assignable to type '"oauth" | "credentials"'.

Workaround above doesn't work for me - any ideas?

Edit - the workaround above does work, it just requires the id property to be "email" (in the docs it uses "sendgrid" as an id which I had left in 🤦 ). Thank you @wahidrahim 🙌

[basememara]

Why is the id and name hardcoded in the EmailConfig type? I'm stuck on 4.22.1 because I have multiple email providers that do different things:

const authOptions = {
    ...,
    providers: [
      GoogleProvider({...}),
      EmailProvider({
        server: smtp1,
        sendVerificationRequest: async ({ identifier: email, url, provider: { server, from } }) => {...}
      }),
      EmailProvider({
        id: 'invite-member',
        name: 'Invite Member',
        server: smtp2,
        maxAge: 3 * 24 * 60 * 60,
        sendVerificationRequest: async ({ identifier: email, url, provider: { server, from } }) => {...}
      })
    ],
    ...
} satisfies AuthOptions

Then elsewhere in code:

await signIn('email', {
  callbackUrl: `${window.location.origin}/profile`,
  email
});

// or

await signIn('invite-member', {
  callbackUrl: `${window.location.origin}/auth/new-invite`,
  email
});

Each email provider is doing something different. How can I have multiple email providers and call sign-in to each one?

[basememara]

I created PR #8941 that exposes id and name to the email provider config while still allowing it to be optional. What are your thoughts on it?

[mpresecan]

I am using "next-auth": "5.0.0-beta.5", and I still have the same issue: TS2322: Type '"email"' is not assignable to type '"oidc" | "credentials" | "oauth"'.

And I literally use the example from the documentation: https://authjs.dev/guides/providers/email-http#setup

import NextAuth, { NextAuthOptions } from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    {
      id: 'sendgrid',
      type: 'email',
      async sendVerificationRequest({identifier: email, url}) {
        // Call the cloud Email provider API for sending emails
        // See https://docs.sendgrid.com/api-reference/mail-send/mail-send
        const response = await fetch("https://api.sendgrid.com/v3/mail/send", {
          // The body format will vary depending on provider, please see their documentation
          // for further details.
          body: JSON.stringify({
            personalizations: [{ to: [{ email }] }],
            from: { email: "[email protected]" },
            subject: "Sign in to Your page",
            content: [
              {
                type: "text/plain",
                value: `Please click here to authenticate - ${url}`,
              },
            ],
          }),
          headers: {
            // Authentication will also vary from provider to provider, please see their docs.
            Authorization: `Bearer ${process.env.SENDGRID_API}`,
            "Content-Type": "application/json",
          },
          method: "POST",
        })

        if (!response.ok) {
          const { errors } = await response.json()
          throw new Error(JSON.stringify(errors))
        }
      },
    }
  ],
}

And the error is:

[auth][error] MissingAdapter: Email login requires an adapter. .Read more at https://errors.authjs.dev#missingadapter
    at assertConfig (webpack-internal:///(middleware)/./node_modules/next-auth/node_modules/@auth/core/lib/utils/assert.js:93:34)
    at Auth (webpack-internal:///(middleware)/./node_modules/next-auth/node_modules/@auth/core/index.js:82:95

Why is this ticket open for such a long time?

[usamaster]

this worked for me:

import EmailProvider from "next-auth/providers/email";

 EmailProvider({
      async sendVerificationRequest({ identifier: email, url }) {
        await sendVerificationRequest({ identifier: email, url });
      },
    }),

[lveillard]

this worked for me:

import EmailProvider from "next-auth/providers/email";

 EmailProvider({
      async sendVerificationRequest({ identifier: email, url }) {
        await sendVerificationRequest({ identifier: email, url });
      },
    }),

Ain't ugly if it works! Thanks 🙏

[tomatac]

Why is this closed?
It looks like is still an issue in next-auth 5.0.0-beta.13
This does not work: https://authjs.dev/guides/providers/email-http

[renardeinside]

Resend example doesn't work too with the same problem - https://authjs.dev/getting-started/providers/resend#configuration

[tomatac]

why close, if it is still an issue?