Letterbench › Templates › Password reset email template

Password reset email template

Reset link with a fallback URL, a single-use expiry and a "didn't ask for this?" note.

SecurityFree (MIT)

Subject and preheader

Variables

{{action_url}} {{company_address}} {{expiry_minutes}} {{logo_url}} {{product_name}} {{support_email}} {{user_first_name}}

Handlebars names; the React Email edition uses the same names in camelCase as typed props.

Mobile, dark mode

Plain-text version (included)

Reset your {{product_name}} password

SECURITY
Reset your password

Hi {{user_first_name}}, we received a request to reset the password for your
account.

Choose a new password: {{action_url}}

This link expires in {{expiry_minutes}} minutes and can be used once. If you
didn't ask for this, your password has not changed and you can ignore this
email.

--
{{product_name}} · {{company_address}}
Need help? {{support_email}}

React Email version (TSX)

// password-reset: Security. Generated by react/generate.js from templates.js.
import * as React from 'react';
import { Layout, Eyebrow, H1, P, CTA, FallbackLink, Note } from './components/ui';

export interface PasswordResetEmailProps {
  actionUrl: string;
  companyAddress: string;
  expiryMinutes: string;
  logoUrl: string;
  productName: string;
  supportEmail: string;
  userFirstName: string;
}

export const subject = ({ productName }: Pick<PasswordResetEmailProps, 'productName'>) =>
  `Reset your ${productName} password`;

export default function PasswordResetEmail(props: PasswordResetEmailProps) {
  const { actionUrl, companyAddress, expiryMinutes, logoUrl, productName, supportEmail, userFirstName } = props;
  return (
    <Layout title={`Reset your ${productName} password`} preview={`A password reset was requested for your account.`} productName={productName} logoUrl={logoUrl} companyAddress={companyAddress} supportEmail={supportEmail}>
      <Eyebrow>Security</Eyebrow>
      <H1>Reset your password</H1>
      <P>Hi {userFirstName}, we received a request to reset the password for your account.</P>
      <CTA href={actionUrl}>Choose a new password</CTA>
      <FallbackLink href={actionUrl} />
      <Note>This link expires in {expiryMinutes} minutes and can be used once. If you didn't ask for this, your password has not changed and you can ignore this email.</Note>
    </Layout>
  );
}

/** Plain-text version: send it alongside the HTML (e.g. Resend/Postmark `text`). */
export function text(props: PasswordResetEmailProps): string {
  const { actionUrl, companyAddress, expiryMinutes, logoUrl, productName, supportEmail, userFirstName } = props;
  return [
    `Reset your ${productName} password`,
    '',
    `SECURITY`,
    `Reset your password`,
    '',
    `Hi ${userFirstName}, we received a request to reset the password for your account.`,
    '',
    `Choose a new password: ${actionUrl}`,
    '',
    `This link expires in ${expiryMinutes} minutes and can be used once. If you didn't ask for this, your password has not changed and you can ignore this email.`,
    '',
    '--',
    `${productName} · ${companyAddress}`,
    `Need help? ${supportEmail}`,
  ].join('\n').replace(/\n{3,}/g, '\n\n') + '\n';
}

PasswordResetEmail.PreviewProps = {
  "actionUrl": "https://app.example.com/a/9f8e7d",
  "companyAddress": "1 Example Street, London EC1A 1AA, UK",
  "expiryMinutes": "30",
  "logoUrl": "https://placehold.co/240x60/2F5BEA/FFFFFF/png?text=Acme",
  "productName": "Acme Cloud",
  "supportEmail": "support@example.com",
  "userFirstName": "Sam"
} satisfies PasswordResetEmailProps;

This template is in Letterbench Lite, free under the MIT licence, in both editions.

Tested

Size under Gmail's 102 KB clip limit, alt text, lang, preheader, links, every variable resolved, no 375px overflow, WCAG AA contrast in light and dark mode. Rendered in headless Chrome; not tested in Outlook desktop, the Gmail apps or Apple Mail.

← Magic link sign-in email template · All templates · Password changed security email template →