Auth.js / NextAuth: Custom Email Provider with AutoSend REST API for passwordless magic links

How do you implement a custom Email Provider in Auth.js (NextAuth v5) using AutoSend’s REST API to render clean branded HTML magic links?

Auth.js (NextAuth v5) Custom Email Provider with AutoSend

Instead of relying on heavy nodemailer transports, you can use Auth.js’s sendVerificationRequest callback to trigger AutoSend via native fetch.

// auth.ts (Auth.js v5 / NextAuth)
import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    EmailProvider({
      server: {}, // Bypass default nodemailer
      from: "Auth Desk <auth@yourdomain.com>",
      async sendVerificationRequest({ identifier: email, url, provider }) {
        const res = await fetch("https://api.autosend.com/v1/mails/send", {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${process.env.AUTOSEND_API_KEY}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            from: provider.from,
            to: [email],
            subject: "Sign in to your account",
            html: `
              <div style="font-family: sans-serif; padding: 24px; color: #111;">
                <h2>Welcome Back</h2>
                <p>Click the secure link below to sign in:</p>
                <p><a href="${url}" style="background: #00B95C; color: #fff; padding: 12px 20px; border-radius: 6px; text-decoration: none; display: inline-block;">Sign In</a></p>
                <p style="color: #666; font-size: 13px;">This link will expire in 24 hours.</p>
              </div>
            `,
          }),
        });

        if (!res.ok) {
          const err = await res.json().catch(() => ({ message: "Unknown error" }));
          throw new Error(`AutoSend verification email failed: ${JSON.stringify(err)}`);
        }
      },
    }),
  ],
});

Relevant Documentation