Magic Links

Magic links provide a passwordless authentication experience. Users enter their email address, and the application sends them a secure, single-use link. Clicking the link authenticates the user.

Configuration

Magic links are powered by the Better Auth magicLink plugin and require an email provider to be configured (like Resend). This setup is found in packages/backend/convex/auth.ts:

plugins: [
  // ...
  magicLink({
    sendMagicLink: async ({ email, url }) => {
      const html = await renderMagicLinkEmail({ appName, url });
      const text = renderMagicLinkText({ appName, url });
      await sendEmail(requireRunMutationCtx(ctx), {
        to: email,
        subject: "Your sign-in link",
        html,
        text,
        from: env.RESEND_AUTH_FROM_EMAIL,
      });
    },
  }),
]

Email Templates

The emails are sent using React Email templates located in the packages/backend/convex/email/templates/ directory.

• renderMagicLinkEmail: Generates the HTML version of the email.
• renderMagicLinkText: Generates the plain text version of the email.

You can customize the appearance of these emails by editing the template files to match your brand.

Environment Variables

Ensure your email provider environment variables are configured correctly in .env:

RESEND_API_KEY=your_resend_api_key
RESEND_AUTH_FROM_EMAIL=auth@yourdomain.com