verification

(no submodules)

Purpose

The verificationTemplate is the standard email-address verification flow message. It greets the recipient, optionally displays a one-time code in a centred tinted container with tracked letter-spacing for readability, exposes the verify-link CTA, and includes an expiry notice.

The template handles both code-only and link-only verification flows by making the code field optional. When omitted, the code container is skipped entirely.

Features

Optional one-time code rendering in a tinted container (32 px, bold, 8 px letter-spacing — the conventional "OTP display" treatment).
Configurable expiresInMinutes (defaults to 30).
Themed verify-email CTA pointing at verificationUrl.
Footer with injectable Clock for deterministic year.
"If you didn't create an account" caution paragraph.

Usage: Basic

import { renderToHtml } from "@suaveplan/email-templates/renderer";
import { verificationTemplate } from "@suaveplan/email-templates/templates";

const { html, text, subject } = renderToHtml(verificationTemplate, {
  recipientName: "Jane",
  verificationUrl: "https://app.example.test/verify?token=abc",
  code: "ABC123",
});

Usage: Advanced

Link-only verification with a tighter expiry and a tenant-specific brand:

import { renderToHtml } from "@suaveplan/email-templates/renderer";
import { createTheme } from "@suaveplan/email-templates/theme";
import { verificationTemplate } from "@suaveplan/email-templates/templates";

const theme = createTheme({ branding: { companyName: "Acme" } });
renderToHtml(
  verificationTemplate,
  {
    recipientName: "Jane",
    verificationUrl: "https://acme.test/verify?token=abc",
    expiresInMinutes: 5,
    companyName: "Acme",
  },
  { theme },
);

API Reference

Symbol	Kind	Description
`verificationTemplate`	const	`EmailTemplate<VerificationProps>`.
`VerificationEmail`	function	Component returning a `VNode`.
`VerificationProps`	type	`{ recipientName, verificationUrl, code?, expiresInMinutes?, companyName? }`

Implementation Notes

The empty-string check on code is intentional: an upstream sanitiser that strips whitespace from a missing-value form field commonly produces "" rather than undefined. Treating both as "no code" keeps the template stable against caller-side variance without requiring a Zod schema at the boundary.

The OTP container's letter-spacing: 8px is wide enough that 6-digit codes render as visually-grouped pairs in most clients, which improves copy-by-eye accuracy. The font size (32 px) is large enough to remain legible on a phone-sized email preview without dominating the layout.

2.9 KiB Raw Permalink Blame History