Skip to content
Launch offerSolo $19 $49 · Team $39 $79Launch pricing ends Sunday
Mailblocks
LibraryGet it →

Password reset email

Password reset with expiry, request details and a clear didn't-request-this path.

Free — get the code ↓
13.2 KB · Gmail-safe

Code

import * as React from "react";
import { Btn, Divider, Eyebrow, Fallback, H1, KV, P, Shell, Small, type TemplateProps } from "../components";

export type PasswordResetProps = TemplateProps & {
  firstName?: string;
  resetUrl?: string;
  expiresInMinutes?: number;
  device?: string;
  location?: string;
};

export default function PasswordReset({
  style,
  brand,
  firstName = "Maya",
  resetUrl = "https://fieldnote.app/reset-password?token=c41e9b77a0",
  expiresInMinutes = 60,
  device = "Chrome on macOS",
  location = "Lisbon, Portugal",
}: PasswordResetProps) {
  return (
    <Shell style={style} brand={brand} label="Security" preview={`Use this link within ${expiresInMinutes} minutes to choose a new password.`}>
      <Eyebrow>Password reset</Eyebrow>
      <H1>Reset your password</H1>
      <P>Hi {firstName}, we received a request to reset the password for your account. Choose a new one below.</P>
      <Btn href={resetUrl}>Choose a new password</Btn>
      <Small>For your security this link expires in {expiresInMinutes} minutes and works once.</Small>
      <KV
        rows={[
          ["Requested from", device],
          ["Approximate location", location],
        ]}
      />
      <P>
        <strong>Didn't ask for this?</strong> Ignore this email — your password won't change. If you keep getting these,
        reply and we'll look into it.
      </P>
      <Divider my={16} />
      <Fallback href={resetUrl} />
    </Shell>
  );
}

PasswordReset.PreviewProps = {} satisfies PasswordResetProps;

The TSX imports components.tsx and theme.ts from the kit. Grab the free starter (all six free templates with their components) on the free page.

Related

← Card expiringMagic link →
Magic link email template preview

Magic link

№15 · Security

Passwordless sign-in link with a backup code, in the style of Linear and Vercel.

Two-factor code email template preview

Two-factor code

№16 · Security

One-time passcode email with a big, selectable code and expiry.

New sign-in alert email template preview

New sign-in alert

№17 · Security

Security alert with device, location, IP and time, plus a secure-my-account action.

Password changed email template preview

Password changed

№18 · Security

Confirmation that a password changed, with an urgent path if it wasn't the user.