Use Loops to send the Magic Link email

First of all, configure Loops.

For this to work you only need the LOOPS_API_KEY environment variable configured.

Follow this guide to set it.

Open src/config/auth.ts and set

import { emailFrom } from "@/config";
import { sendTransactionalEmail } from "@/libs/loops"

/* ... */

providers: [
    async sendVerificationRequest({ identifier: email, url }) {
      await sendTransactionalEmail({
        transactionalId: "", // the transactional id you created on Loops
        dataVariables: {
          url, // change it to the variable you set in the Loops transactional

Create a Transactional in Loops

Log in to Loops and go to Transactional.

Click "New" and create an email similar to this one:

It is important that url is a data variable.

Now click on "Next", copy the transactional id (a string with this format clq6w35vr000yib0qwz0bwxp7), and paste it in auth.ts as the value of transactionalId. You have now configured Loops to send the magic link email 🎉

Last updated