I'm following the guide for HTTP-based Email Provider here: https://next-auth.js.org/providers/email

My current providers looks like:

  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    }),
    {
      id: 'resend',
      type: 'email',
      sendVerificationRequest
    }
  ],

However i'm getting this type error in VSCode:

Type '{ id: string; type: "email"; sendVerificationRequest: (params: VerificationRequestParams) => Promise<{ success: boolean; data?: any; }>; }' is not assignable to type 'Provider'.
  Types of property 'type' are incompatible.
    Type '"email"' is not assignable to type '"oauth" | "credentials"'.ts(2322)

And this error on my build:

./src/lib/resend/resend.ts
ReactServerComponentsError:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

The error was caused by importing 'resend/dist/index.mjs' in './src/lib/resend/resend.ts'.

Packages:

"next": "13.4.19",
"next-auth": "^4.24.5",
"prisma": "^5.2.0",
"react": "18.2.0",
"resend": "^3.1.0",
"react-email": "^2.0.0",
"typescript": "5.3.3",

Scenario:
I'm trying to set up Magic Links with NextAuth, Resend and react-email.

Repository:
https://github.com/uixmat/firestarta