Passwordless Authentication

Magic Link Email Template for React Email

Production-ready passwordless authentication email. Secure token handling, expiry messaging, and dark mode support. Works with Resend, Postmark, SendGrid, and AWS SES.

One-time payment
Lifetime access
30-day refund
All future updates

Why magic links?

Passwordless authentication is replacing traditional login flows

The problem with passwords

  • ×Users forget them constantly (30% of support tickets)
  • ×Weak passwords create security vulnerabilities
  • ×Password reset flows add friction to your product
  • ×Complex requirements frustrate and churn users

Magic links solve this

  • One-click authentication, no typing required
  • More secure with time-limited, single-use tokens
  • Lower support burden, no forgot-password tickets
  • Better mobile UX, no password typing on small screens

But implementation matters. A poorly designed magic link email can get flagged as spam, confuse users about expiry, break in dark mode, or expose security vulnerabilities. This template handles all of that.

Template features

Everything you need for secure, reliable passwordless authentication

Secure by default

Time-limited, single-use tokens following OWASP and NIST guidelines.

Cross-client tested

Works in Gmail, Outlook, Apple Mail, Yahoo, and dark mode.

TypeScript props

Fully typed interface for customization with IntelliSense support.

Mobile optimized

Large tap targets, readable fonts, and fast load times on every device.

Quick integration

Drop-in templates for Resend, Postmark, SendGrid, and AWS SES.

Best practices built in

Security messaging, expiry warnings, and support contact included.

Quick integration

Drop-in examples for popular email services

Send with Resend

import { Resend } from 'resend'
import { MagicLinkEmail } from '@/emails/magic-link'

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: 'YourApp <auth@yourapp.com>',
  to: email,
  subject: 'Your sign-in link',
  react: MagicLinkEmail({
    magicLink,
    userEmail: email,
    expiryMinutes: 15,
  })
})

TypeScript props

interface MagicLinkEmailProps {
  magicLink: string        // The authentication URL
  userEmail?: string       // Recipient's email
  expiryMinutes?: number   // Token validity (default: 15)
  productName?: string     // Your product name
  supportEmail?: string    // Support contact
  logoUrl?: string         // Your logo (light mode)
  logoDarkUrl?: string     // Your logo (dark mode)
}

Works with any email provider: Resend, Postmark, SendGrid, AWS SES, Mailgun, or your own SMTP server. The template is provider-agnostic.

Security best practices

Built following OWASP and NIST guidelines

Secure token handling

  • Time-limited tokens (configurable: 5-15 minutes)
  • Single-use tokens invalidated after click
  • Cryptographically secure random generation
  • HTTPS-only links enforced

Clear security messaging

  • Explicit expiry time displayed to the user
  • "Ignore if you didn't request this" disclaimer
  • Optional IP address and location tracking
  • Device and browser information display

Industry standards

OWASP Authentication GuidelinesNIST SP 800-63B Digital IdentityOAuth 2.0 Best Practices

Frequently asked questions

Everything you need to know about magic link implementation

How do magic links work?

Magic links use time-limited, cryptographically secure tokens embedded in URLs. When a user clicks the link, your backend verifies the token and creates an authenticated session.

How long should magic link tokens last?

10-15 minutes for authentication flows. Shorter (5 min) for high-security apps, longer (30-60 min) for low-risk scenarios like newsletter preferences.

Are magic links secure?

Yes, when implemented correctly. Use HTTPS-only links, cryptographically random tokens, short expiry times, and single-use invalidation.

What if the email goes to spam?

Use proper SPF/DKIM/DMARC records, send from your domain, keep subject lines clear, and avoid spam trigger words.

Can I customize the design?

All props are optional and the template uses inline styles for easy customization. Modify colors, fonts, logos, and copy while maintaining cross-client compatibility.

Does it work with my auth library?

Yes. The template is framework-agnostic. Works with NextAuth, Supabase, Auth0, or custom solutions.

Ready to ship passwordless auth?

Get this magic link template plus 60+ other production-ready email templates. One-time purchase, lifetime updates.

$19.95$9.95one-time
30-day money-back guarantee