Password Reset Email

A secure and clear password reset email template. Guides users through resetting their password safely.

responsive

dark-mode

security-focused

VARIABLES

Template Variables

Variable	Type	Description	Example
`{{user_name}}`required	string	The user's first name or display name	John
`{{reset_url}}`required	string	The password reset link (should expire)	https://app.example.com/reset?token=abc123
`{{expiry_time}}`required	string	How long the reset link is valid	1 hour
`{{product_name}}`required	string	Your product or company name	Acme App
`{{support_email}}`	string	Support email for questions	support@acme.com

CODE

Template Source

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reset your password</title>
</head>
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f4f4f5;">
  <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: 0 auto; padding: 40px 20px;">
    <tr>
      <td style="background-color: #ffffff; border-radius: 8px; padding: 40px;">
        <h1 style="margin: 0 0 24px; font-size: 24px; color: #09090b;">
          Reset your password
        </h1>
        <p style="margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #71717a;">
          Hi {{user_name}},
        </p>
        <p style="margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #71717a;">
          We received a request to reset your password for your {{product_name}} account. Click the button below to choose a new password:
        </p>
        <a href="{{reset_url}}" style="display: inline-block; padding: 14px 28px; background-color: #09090b; color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600;">
          Reset Password
        </a>
        <p style="margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: #a1a1aa;">
          This link will expire in {{expiry_time}}. If you didn't request this, you can safely ignore this email.
        </p>
        <hr style="margin: 32px 0; border: none; border-top: 1px solid #e4e4e7;">
        <p style="margin: 0; font-size: 12px; color: #a1a1aa;">
          If the button doesn't work, copy and paste this link into your browser:<br>
          <a href="{{reset_url}}" style="color: #3b82f6; word-break: break-all;">{{reset_url}}</a>
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

Security Best Practices

Token Security

Generate cryptographically secure tokens (at least 32 bytes)
Store only the hashed token in your database
Set a short expiry time (1 hour recommended)
Invalidate the token after use

Email Security

Never include the user's current password
Use HTTPS for all reset links
Consider adding the user's IP address or location
Log all password reset attempts

Customization Tips

Adding Device Information

Include information about where the request came from:

const html = render(<PasswordResetEmail
  userName={user.name}
  resetUrl={resetUrl}
  expiryTime="1 hour"
  productName="Acme App"
  deviceInfo="Chrome on Windows, New York, USA"
/>);

Multiple Languages

Create localized versions of this template for international users. Store the user's language preference and use the appropriate template.