Loops

Use Loops to send the Magic Link email

Using Loops to send Magic Link emails — Video tutorial

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.

Configure Auth to use Loops for Magic Link

Open src/config/auth.ts and set

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

/* ... */

providers: [
  EmailProvider({
    async sendVerificationRequest({ identifier: email, url }) {
      await sendTransactionalEmail({
        transactionalId: "", // the transactional id you created on Loops
        email,
        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:

Magic Link Email Transactional

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 🎉