Skip to content
Groundmail

Free email template

Magic link email template

Passwordless sign-in: one button, a short expiry and a fallback URL. Free and MIT-licensed, in React Email, MJML, HTML and plain text, with light and dark mode built in.

Get the codeView on GitHub
  • MIT license
  • Works with any email provider
  • Light and dark mode

What every magic link email needs.

The template covers the email side of all six. Points 3 and 4 also need your sign-in code to do its part.

  1. One button and nothing else to click

    The email has one job. A single sign-in button, with no other links competing for the tap, is easy to act on and hard to mistake for a lure.

  2. A short expiry, stated

    Fifteen minutes is plenty for someone waiting on your sign-in screen. Say it in the email so nobody tries yesterday's link and assumes sign-in is broken.

  3. Single use, tied to the request

    Mark the token used on the first sign-in. If you can, also tie it to the browser that asked, so a forwarded link can't sign in someone else.

  4. A link that survives scanners

    Company mail filters open links to check them, which can burn a single-use token before the person clicks. Land the link on a page with a Continue button and redeem the token on that click.

  5. An "ignore this" line

    Anyone can type an address into a sign-in form. Tell people that if they didn't try to sign in, nothing happens unless they click.

  6. A URL people can paste

    If the email opens on a phone and the sign-in is on a laptop, people need the full link to copy across. The template prints it under the button and in the plain-text part.

The code. Copy the format your stack uses.

Change the brand name, logo and colors once in theme.ts and every template follows.

import * as React from 'react'
import { Button, Divider, Layout, LinkFallback, P, Small, Title } from '../../components'
import type { TemplateMeta } from '../../components/meta'
import { plainText } from '../../components/text'
import { theme } from '../../theme'

export type MagicLinkProps = {
  loginUrl: string
  expiresIn: string
}

export const meta: TemplateMeta = {
  name: 'Magic link',
  description: 'Passwordless sign-in: one button, a short expiry and a fallback URL.',
  group: 'Authentication',
  subject: `Your ${theme.brand.name} sign-in link`,
}

export default function MagicLink({ loginUrl, expiresIn }: MagicLinkProps) {
  return (
    <Layout
      preview={`Sign in with one click. This link expires in ${expiresIn}.`}
      footerNote="You're receiving this because someone tried to sign in with this email address."
    >
      <Title>Your sign-in link</Title>
      <P>Click the button below to sign in. No password needed.</P>
      <Button href={loginUrl}>Sign in</Button>
      <Small>
        This link expires in {expiresIn} and works once. If you didn't try to sign in, you can safely ignore
        this email.
      </Small>
      <Divider />
      <LinkFallback href={loginUrl} />
    </Layout>
  )
}

MagicLink.PreviewProps = {
  loginUrl: 'https://example.com/auth/callback?token=4f9a7c',
  expiresIn: '15 minutes',
} satisfies MagicLinkProps

export function text({ loginUrl, expiresIn }: MagicLinkProps) {
  return plainText(
    'Your sign-in link',
    'Open this link to sign in. No password needed:',
    loginUrl,
    `This link expires in ${expiresIn} and works once. If you didn't try to sign in, you can safely ignore this email.`,
  )
}

magic-link.tsx, 50 lines, shown in full (scroll inside the panel). Typed props. Copy it with theme.ts and components/ from the repo. View on GitHub

Send it with Groundmail

Create the template in your account once, then send it by alias from your app.

1Terminal
npx -y --package=groundmail-cli -- groundmail templates push templates/magic-link/magic-link.html \
  --alias magic-link \
  --name "Magic link" \
  --subject "Your Acme sign-in link" \
  --text templates/magic-link/magic-link.txt \
  --publish
2Node.js
import { Groundmail } from 'groundmail'

const groundmail = new Groundmail(process.env.GROUNDMAIL_API_KEY!)

await groundmail.emails.send({
  from: 'Acme <noreply@yourdomain.com>',
  to: 'ada@example.com',
  template: {
    id: 'magic-link',
    variables: {
      login_url: 'https://example.com/auth/callback?token=4f9a7c',
      expires_in: '15 minutes',
    },
  },
})

The CLI command and the Node.js send from the template's README, which also has Python, PHP and cURL. View on GitHub

Subject lines

People are waiting for this one, so the subject only has to be recognisable: your product name and the words sign-in.

  • Your Acme sign-in linkDefaultProduct name plus what's inside. Easy to spot in a crowded inbox.
  • Sign in to AcmeGoodSays the action instead of the thing. Short enough for any phone.
  • Your Acme sign-in link (expires in {{expires_in}})GoodPuts the expiry where people see it before opening.
  • Click here to log inAvoidNo product name, and "click here" is a phrase phishing uses and filters look for.

A sign-in link that arrives late is a failed sign-in

People stare at your "check your email" screen until this arrives. After a minute they ask for another, and now there are two links in the inbox. The fixes are the same ones that keep password resets out of spam.

Why password reset emails go to spam →
  • Send from your own domain with SPF, DKIM and DMARC set up.
  • Keep it on a transactional stream, apart from newsletters and marketing.
  • Rate-limit the resend button, and make sure the newest link works when several arrive at once.
  • Groundmail sends this template by alias from your own domain, on our own mail servers. Send it with Groundmail

More authentication templates

All email templates →

Questions

Is it free to use?

Yes. The templates are MIT-licensed: use them in commercial products and change them however you like.

Do I need Groundmail to use it?

No. The HTML and text files use plain placeholders that work with most providers' template engines and with Handlebars or Mustache. Sending through Groundmail just saves a step.

Does it work in dark mode and Outlook?

Yes. The full HTML file carries dark-mode styles for Apple Mail and Outlook.com, and the extra markup desktop Outlook needs to draw the button.

How do I change the colors and logo?

Edit theme.ts once (name, logo, address and colors for light and dark) and rebuild. Every template in the set picks it up.

What if a mail scanner opens the link before the person does?

Some company filters fetch every link in incoming mail. If your sign-in URL redeems the token on a plain GET, the scanner uses it up. Point {{login_url}} at a page that shows a Continue button, and redeem the token when that button is pressed.