Motivation

Auth.js comes integrated with a set of email providers for sending magic link emails. However, you may want to heavily customize the magic link email behaviour in scenarios such as:

• Using an email provider not supported by Auth.js

• Customizing the email template beyond the default options

• Implementing custom logic, e.g. sending SMS instead of emails

• Tracking email delivery and engagement

• Managing templates without code changes

View Example Repository

Prerequisites

• An email provider

  • We are biased, but we recommend NotificationAPI

Implementation

Auth.js allows you to customize the magic link email sending process through the sendVerificationRequest function.

When a user requests a magic link, Auth.js generates a Magic Link and will call the sendVerificationRequest function with the magic link or url, along with the user's email address or identifier. You can then use any email service to handle sending the email yourself.

Here's how to implement it with NotificationAPI:

1. Install the NotificationAPI SDK:

npm

2. Don't forget to include the secrets of your favorite email provider in .env files:

NOTIFICATIONAPI_CLIENT_ID=
NOTIFICATIONAPI_CLIENT_SECRET

3. Use the sendVerificationRequest function to send emails using your favorite email provider. We are using NotificationAPI in this example:

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import { AuthOptions } from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";
import notificationapi from "notificationapi-node-server-sdk";

const prisma = new PrismaClient();

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      async sendVerificationRequest({ identifier: email, url }) {
        notificationapi.init(
          process.env.NOTIFICATIONAPI_CLIENT_ID as string,
          process.env.NOTIFICATIONAPI_CLIENT_SECRET as string
        );
        await notificationapi.send({
          notificationId: "magic_link", // Create this template in NotificationAPI dashboard
          user: {
            id: email,
            email: email,
          },
          mergeTags: {
            magic_link: url,
          },
        });
      },
    }),
  ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Where is the email template?

With NotificationAPI, you can visually design email templates in a user-friendly dashboard and use them inside your code. In the above example, we referenced the "magic_link" template, which we already designed in the dashboard:

Using Other Providers

You can adapt the same pattern for any email service:

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      async sendVerificationRequest({ identifier: email, url }) {
        
        // DO WHATEVER YOU NEED TO SEND EMAILS HERE:
        mySendEmailFunction(identifier, url);
        
      },
    }),
  ],
};

For a complete working example, check out our example repository.