@syncello/auth 4.0.0 → 4.2.0

package/dist/index.cjs

@@ -121,6 +121,7 @@ __export(src_exports, {
   rateLimit: () => rateLimit,
   recentPasswordlessFailures: () => recentPasswordlessFailures,
   refreshSession: () => refreshSession,
+  renderEmail: () => renderEmail,
   requestEmailChange: () => requestEmailChange,
   requireAuth: () => requireAuth,
   requireVerifiedEmail: () => requireVerifiedEmail,
@@ -680,6 +681,9 @@ var AUTH_DEFAULTS = {
   LOCKOUT_DURATION_MINUTES: 30,
   LOCKOUT_MAX_ATTEMPTS: 5,
   PASSWORD_RESET_TTL_MINUTES: 15,
+  EMAIL_VERIFICATION_TTL_HOURS: 24,
+  EMAIL_CHANGE_TTL_HOURS: 24,
+  TWO_FACTOR_EMAIL_CODE_TTL_MINUTES: 5,
   TWO_FACTOR_CHALLENGE_TTL_SECONDS: 300,
   // 5 minutes
   APP_NAME: "App"
@@ -1169,7 +1173,7 @@ async function verifyTurnstileToken(token, secretKey, remoteIp, environment) {
 
 // src/core/email-change.ts
 var import_drizzle_orm3 = require("drizzle-orm");
-var TOKEN_EXPIRY_MS = 24 * 60 * 60 * 1e3;
+var TOKEN_EXPIRY_MS = AUTH_DEFAULTS.EMAIL_CHANGE_TTL_HOURS * 60 * 60 * 1e3;
 async function requestEmailChange(params) {
   const { userId, password, newEmail, pepper, db, tables: tables2 } = params;
   const { users, emailChangeTokens } = tables2;
@@ -1414,37 +1418,140 @@ function escapeHtml(text) {
 }
 
 // src/core/email-template.ts
-function generateEmailTemplate(options) {
-  const {
-    heading,
-    body,
-    buttonText,
-    buttonUrl,
-    welcomeMessage,
-    securityWarning,
-    footerNote,
-    appUrl,
-    marketingUrl = appUrl,
-    // Default to appUrl if no marketing site
-    appName = "App",
-    buttonBgColor = "#00fe9a",
-    buttonTextColor = "#000004",
-    buttonFontWeight = 500,
-    buttonRadius = "6px",
-    logoUrl,
-    footerColor = "#1e1b4b",
-    headingColor = "#1e1b4b"
-  } = options;
-  const safeAppName = escapeHtml(appName);
-  const safeButtonUrl = buttonUrl ? sanitizeEmailUrl(buttonUrl, appUrl) : "";
-  const safeAppUrl = appUrl ? sanitizeEmailUrl(appUrl, appUrl) : "";
-  const safeMarketingUrl = marketingUrl ? sanitizeEmailUrl(marketingUrl, appUrl) : "";
-  const safeLogoUrl = logoUrl ? sanitizeEmailUrl(logoUrl, appUrl) : `${safeAppUrl.replace(/\/$/, "")}/email-header-image.png`;
+var FONT = "'Montserrat',Arial,sans-serif";
+var PAGE = "#f4f5f7";
+var BODY_TEXT = "#404040";
+var MUTED = "#737373";
+var RULE = "#e5e7eb";
+var TABLE = 'width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"';
+function logoDimensions(width, height) {
+  if (width === void 0 && height === void 0) return null;
+  if (width === void 0 || height === void 0) {
+    throw new Error("logoWidth and logoHeight must be given together");
+  }
+  return { width: pixels("logoWidth", width), height: pixels("logoHeight", height) };
+}
+function pixels(name, value) {
+  if (typeof value !== "number" || !Number.isSafeInteger(value) || value <= 0) {
+    throw new Error(`${name} must be a positive integer`);
+  }
+  return escapeHtml(String(value));
+}
+function brandColours(branding) {
+  return {
+    buttonBgColor: escapeHtml(branding.buttonBgColor ?? "#00fe9a"),
+    buttonTextColor: escapeHtml(branding.buttonTextColor ?? "#000004"),
+    buttonFontWeight: escapeHtml(String(branding.buttonFontWeight ?? 500)),
+    buttonRadius: escapeHtml(branding.buttonRadius ?? "6px"),
+    footerColor: escapeHtml(branding.footerColor ?? "#1e1b4b"),
+    headingColor: escapeHtml(branding.headingColor ?? "#1e1b4b")
+  };
+}
+function logoUrlFor(logoUrl, appUrl) {
+  if (logoUrl) return escapeHtml(sanitizeEmailUrl(logoUrl, appUrl));
+  const base = appUrl ? sanitizeEmailUrl(appUrl, appUrl) : "";
+  return escapeHtml(`${base.replace(/\/$/, "")}/email-header-image.png`);
+}
+function marketingUrlFor(marketingUrl) {
+  return marketingUrl ? escapeHtml(sanitizeEmailUrl(marketingUrl, marketingUrl).replace(/\/$/, "")) : "";
+}
+var cardRow = (padding, content) => `
+                              <table ${TABLE}>
+                                <tr>
+                                  <td class="pad" style="${padding}">
+                                    ${content}
+                                  </td>
+                                </tr>
+                              </table>`;
+function logoBlock({ logoUrl, logoSize, appName }) {
+  const img = logoSize ? `<img src="${logoUrl}" width="${logoSize.width}" height="${logoSize.height}" style="width: ${logoSize.width}px; max-width: 100%; height: auto; display: block; border: 0;" alt="${appName}" title="${appName}">` : `<div class="fullWidth" style="max-width: 50%;">
+                                        <img src="${logoUrl}" style="display: block; height: auto; border: 0; width: 100%;" alt="${appName}" title="${appName}" height="auto">
+                                      </div>`;
+  return `
+                              <!-- Header Image -->
+                              <table class="image_block" ${TABLE}>
+                                <tr>
+                                  <td class="pad" style="padding-top:40px;padding-left:40px;padding-right:40px;padding-bottom:8px;">
+                                    <div class="alignment" align="center">
+                                      ${img}
+                                    </div>
+                                  </td>
+                                </tr>
+                              </table>`;
+}
+function buttonBlock({ label, url }, brand) {
+  const font = `font-family: ${FONT}; font-size: 16px; font-weight: ${brand.buttonFontWeight};`;
+  return `
+                              <!-- Button -->${cardRow(
+    "padding-top:8px;padding-bottom:32px;padding-left:40px;padding-right:40px;text-align:center;",
+    `<div class="alignment" align="center">
+                                      <!--[if mso]>
+                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${url}" style="height:48px;width:auto;v-text-anchor:middle;" arcsize="12%" fillcolor="${brand.buttonBgColor}">
+                                        <v:stroke dashstyle="Solid" weight="0px" color="${brand.buttonBgColor}"/>
+                                        <w:anchorlock/>
+                                        <v:textbox inset="0px,0px,0px,0px">
+                                          <center dir="false" style="color:${brand.buttonTextColor};${font}">
+                                      <![endif]-->
+                                      <a href="${url}" style="background-color: ${brand.buttonBgColor}; border: 0px solid transparent; border-radius: ${brand.buttonRadius}; color: ${brand.buttonTextColor}; display: inline-block; ${font} line-height: 24px; mso-border-alt: none; padding: 12px 28px; text-align: center; text-decoration: none; word-break: keep-all;">${label}</a>
+                                      <!--[if mso]>
+                                          </center>
+                                        </v:textbox>
+                                      </v:roundrect>
+                                      <![endif]-->
+                                    </div>`
+  )}
+
+                              <!-- Copy Link -->${cardRow(
+    "padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<div style="border-top: 1px solid ${RULE}; padding-top: 16px; color:${MUTED};font-family:${FONT};font-size:12px;line-height:1.5;text-align:left;mso-line-height-alt:18px;">
+                                      <p style="margin: 0 0 4px 0; word-break: break-word;">Or copy and paste this link into your browser:</p>
+                                      <a href="${url}" style="color:${MUTED};text-decoration:underline;word-break:break-all;">${url}</a>
+                                    </div>`
+  )}`;
+}
+function renderLayout(parts) {
+  const { brand } = parts;
+  const welcome = parts.welcome ? `
+                              <!-- Welcome Message -->${cardRow(
+    "padding-top:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${brand.headingColor};font-family:${FONT};font-size:20px;font-weight:600;line-height:1.4;text-align:left;mso-line-height-alt:28px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.welcome}</p>
+                                    </div>`
+  )}` : "";
+  const heading = parts.heading ? `
+                              <!-- Heading -->${cardRow(
+    "padding-top:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${brand.headingColor};font-family:${FONT};font-size:24px;font-weight:700;line-height:1.3;text-align:left;mso-line-height-alt:31px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.heading}</p>
+                                    </div>`
+  )}` : "";
+  const notice = parts.notice ? `
+                              <!-- Notice -->${cardRow(
+    "padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<table ${TABLE.replace('style="', `style="background-color: ${PAGE}; border-left: 3px solid ${brand.headingColor}; border-radius: 4px; `)}>
+                                      <tr>
+                                        <td style="padding: 14px 16px; color: ${BODY_TEXT}; font-family: ${FONT}; font-size: 13px; line-height: 1.5; text-align: left;">
+                                          ${parts.notice}
+                                        </td>
+                                      </tr>
+                                    </table>`
+  )}` : "";
+  const footerNote = parts.footerNote ? `
+                              <!-- Footer Note -->${cardRow(
+    "padding-bottom:32px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${MUTED};font-family:${FONT};font-size:13px;line-height:1.5;text-align:left;mso-line-height-alt:20px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.footerNote}</p>
+                                    </div>`
+  )}` : "";
+  const links = parts.marketingUrl ? `
+                                    <p style="margin: 0 0 12px 0; word-break: break-word;">
+                                      <a href="${parts.marketingUrl}/privacy" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a> &nbsp;|&nbsp; <a href="${parts.marketingUrl}/contact" style="color: #ffffff; text-decoration: underline;">Get in Touch</a>
+                                    </p>` : "";
   return `
     <!DOCTYPE html>
     <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
     <head>
-      <title>${heading}</title>
+      <title>${parts.title}</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!--[if mso]>
@@ -1459,7 +1566,7 @@ function generateEmailTemplate(options) {
       </xml>
       <![endif]-->
       <!--[if !mso]><!-->
-      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet" type="text/css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
       <!--<![endif]-->
       <style>
         * {
@@ -1480,13 +1587,6 @@ function generateEmailTemplate(options) {
         p {
           line-height: inherit;
         }
-        .desktop_hide,
-        .desktop_hide table {
-          mso-hide: all;
-          display: none;
-          max-height: 0px;
-          overflow: hidden;
-        }
         .image_block img+div {
           display: none;
         }
@@ -1495,41 +1595,16 @@ function generateEmailTemplate(options) {
           line-height: 0;
         }
         @media (max-width:660px) {
-          .desktop_hide table.icons-inner {
-            display: inline-block !important;
-          }
-          .icons-inner {
-            text-align: center;
-          }
-          .icons-inner td {
-            margin: 0 auto;
-          }
-                    .mobile_hide {
-            display: none;
+          .page {
+            padding: 16px 8px !important;
           }
           .row-content {
             width: 100% !important;
             max-width: 100% !important;
           }
-          .stack .column {
-            width: 100%;
-            display: block;
-          }
-          .mobile_hide {
-            min-height: 0;
-            max-height: 0;
-            max-width: 0;
-            overflow: hidden;
-            font-size: 0px;
-          }
-          .desktop_hide,
-          .desktop_hide table {
-            display: table !important;
-            max-height: none !important;
-          }
           .pad {
-            padding-left: 20px !important;
-            padding-right: 20px !important;
+            padding-left: 24px !important;
+            padding-right: 24px !important;
           }
         }
       </style>
@@ -1541,233 +1616,46 @@ function generateEmailTemplate(options) {
       </style>
       <![endif]-->
     </head>
-    <body class="body" style="background-color: #f8f9fa; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
-      <table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f8f9fa;">
+    <body class="body" style="background-color: ${PAGE}; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
+      <table class="nl-container" ${TABLE.replace('style="', `style="background-color: ${PAGE}; `)}>
         <tbody>
           <tr>
-            <td>
-              <!-- Main Content Row -->
-              <table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+            <td class="page" style="padding: 32px 16px;">
+              <!-- Card -->
+              <table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; border: 1px solid ${RULE}; border-radius: 12px; max-width: 640px; width: 100%; margin: 0 auto;">
                 <tbody>
                   <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top;">
-
-                              <!-- Top Spacer -->
-                              <table class="divider_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:12px;padding-top:30px;">
-                                    <div class="alignment" align="center">
-                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                        <tr>
-                                          <td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 0px solid #BBBBBB;">
-                                            <span style="word-break: break-word;">&#8202;</span>
-                                          </td>
-                                        </tr>
-                                      </table>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
+                    <td width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; vertical-align: top;">
+${logoBlock(parts)}
+${welcome}
+${heading}
+
+                              <!-- Body Text -->${cardRow(
+    "padding-top:16px;padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${BODY_TEXT};font-family:${FONT};font-size:15px;line-height:1.6;text-align:left;mso-line-height-alt:24px;">
+                                      ${parts.body}
+                                    </div>`
+  )}
+${parts.button ? buttonBlock(parts.button, brand) : ""}
+${notice}
+${footerNote}
 
-                              <!-- Header Image -->
-                              <table class="image_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-left:40px;padding-right:40px;width:100%;">
-                                    <div class="alignment" align="center">
-                                      <div class="fullWidth" style="max-width: 50%;">
-                                        <img src="${safeLogoUrl}" style="display: block; height: auto; border: 0; width: 100%;" alt="${safeAppName}" title="${safeAppName}" height="auto">
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              ${welcomeMessage ? `
-                              <!-- Welcome Message -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-top:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:${headingColor};font-family:'Montserrat',Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.4;text-align:center;mso-line-height-alt:31px;">
-                                      <p style="margin: 0; word-break: break-word;">${welcomeMessage}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              ${heading ? `
-                              <!-- Heading -->
-                              <table class="paragraph_block block-4" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:10px;padding-left:40px;padding-right:40px;padding-top:10px;">
-                                    <div style="color:${headingColor};font-family:'Montserrat',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.2;text-align:center;mso-line-height-alt:36px;">
-                                      <p style="margin: 0; word-break: break-word;">${heading}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              <!-- Body Text -->
-                              <table class="paragraph_block block-5" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;padding-top:30px;">
-                                    <div style="color:#404040;font-family:'Montserrat',Arial,sans-serif;font-size:15px;line-height:1.6;text-align:left;mso-line-height-alt:24px;">
-                                      <p style="margin: 0; word-break: break-word;">${body}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              ${safeButtonUrl ? `
-                              <!-- Button -->
-                              <table class="button_block block-6" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-left:10px;padding-right:10px;padding-bottom:10px;text-align:center;">
-                                    <div class="alignment" align="center">
-                                      <!--[if mso]>
-                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${safeButtonUrl}" style="height:52px;width:auto;v-text-anchor:middle;" arcsize="12%" fillcolor="${buttonBgColor}">
-                                        <v:stroke dashstyle="Solid" weight="0px" color="${buttonBgColor}"/>
-                                        <w:anchorlock/>
-                                        <v:textbox inset="0px,0px,0px,0px">
-                                          <center dir="false" style="color:${buttonTextColor};font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:${buttonFontWeight};">
-                                      <![endif]-->
-                                      <a href="${safeButtonUrl}" style="background-color: ${buttonBgColor}; border: 0px solid transparent; border-radius: ${buttonRadius}; color: ${buttonTextColor}; display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; font-weight: ${buttonFontWeight}; mso-border-alt: none; padding: 10px 20px; text-align: center; text-decoration: none; text-transform: capitalize; word-break: keep-all;">
-                                        ${buttonText}
-                                      </a>
-                                      <!--[if mso]>
-                                          </center>
-                                        </v:textbox>
-                                      </v:roundrect>
-                                      <![endif]-->
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              <!-- Copy Link -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#737373;font-family:'Montserrat',Arial,sans-serif;font-size:12px;line-height:1.5;text-align:center;mso-line-height-alt:18px;">
-                                      <p style="margin: 0 0 5px 0; word-break: break-word;">or copy and paste this link into your browser:</p>
-                                      <a href="${safeButtonUrl}" style="color:#4a90d9;text-decoration:underline;word-break:break-all;">${safeButtonUrl}</a>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              ${securityWarning ? `
-                              <!-- Security Warning -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-left:40px;padding-right:40px;padding-bottom:20px;">
-                                    <div style="background-color: #a1f1ff; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: center;">
-                                      <p style="margin: 0; color: #01001b; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; line-height: 1.5; text-align: center;">
-                                        ${securityWarning}
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              <!-- Footer Note -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#737373;font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.5;text-align:center;mso-line-height-alt:20px;">
-                                      <p style="margin: 0; word-break: break-word;">${footerNote}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
                     </td>
                   </tr>
                 </tbody>
               </table>
 
-              <!-- Spacer Row -->
-              <table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+              <!-- Footer -->
+              <table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: ${brand.footerColor}; border-radius: 12px; max-width: 640px; width: 100%; margin: 16px auto 0 auto;">
                 <tbody>
                   <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f8f9fa; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; vertical-align: top;">
-                              <table class="empty_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad">
-                                    <div></div>
-                                  </td>
-                                </tr>
-                              </table>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <!-- Footer Row -->
-              <table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                <tbody>
-                  <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: ${footerColor}; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding: 20px;">
-
-                              <!-- Policy Links -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:20px;padding-left:40px;padding-right:40px;padding-top:20px;">
-                                    <div style="color:#ffffff;font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.5;text-align:center;mso-line-height-alt:20px;">
-                                      <p style="margin: 0; word-break: break-word;">
-                                        <a href="${safeMarketingUrl}/privacy" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a> | <a href="${safeMarketingUrl}/contact" style="color: #ffffff; text-decoration: underline;">Get in Touch</a>
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              <!-- Copyright & Disclaimer -->
-                              <table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:15px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#a3a3a3;font-family:'Montserrat',Arial,sans-serif;font-size:12px;line-height:1.5;text-align:center;mso-line-height-alt:18px;">
-                                      <p style="margin: 0 0 12px 0; word-break: break-word;">\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${safeAppName}. All rights reserved.</p>
-                                      <p style="margin: 0; font-size: 11px; line-height: 1.5; word-break: break-word;">
-                                        Please do not reply to this email as this address does not accept incoming messages. This service email contains essential information relating to your ${safeAppName} account.
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
+                    <td class="pad" style="padding: 24px 40px; color:#a3a3a3; font-family:${FONT}; font-size:12px; line-height:1.5; text-align:center; mso-line-height-alt:18px;">${links}
+                                    <p style="margin: 0 0 8px 0; word-break: break-word;">\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${parts.appName}. All rights reserved.</p>
+                                    <p style="margin: 0; font-size: 11px; word-break: break-word;">Please do not reply to this email as this address does not accept incoming messages. This service email contains essential information relating to your ${parts.appName} account.</p>
                     </td>
                   </tr>
                 </tbody>
               </table>
-
             </td>
           </tr>
         </tbody>
@@ -1776,6 +1664,55 @@ function generateEmailTemplate(options) {
     </html>
   `;
 }
+function generateEmailTemplate(options) {
+  const { appUrl, buttonUrl } = options;
+  const safeButtonUrl = buttonUrl ? escapeHtml(sanitizeEmailUrl(buttonUrl, appUrl)) : "";
+  return renderLayout({
+    title: options.heading,
+    logoUrl: logoUrlFor(options.logoUrl, appUrl),
+    logoSize: logoDimensions(options.logoWidth, options.logoHeight),
+    appName: escapeHtml(options.appName ?? "App"),
+    welcome: options.welcomeMessage ?? "",
+    heading: options.heading,
+    body: options.body,
+    button: safeButtonUrl ? { label: options.buttonText, url: safeButtonUrl } : null,
+    notice: options.securityWarning?.trim() ?? "",
+    footerNote: options.footerNote,
+    marketingUrl: marketingUrlFor(options.marketingUrl),
+    brand: brandColours(options)
+  });
+}
+function renderEmail(content) {
+  const { appUrl, branding = {} } = content;
+  const link = (url) => escapeHtml(sanitizeEmailUrl(url, appUrl));
+  const text = (value) => escapeHtml(value).replace(/\r?\n/g, "<br>");
+  const brand = brandColours(branding);
+  const paragraphs = content.paragraphs.map(
+    (p) => `<p style="margin: 0 0 16px 0; word-break: break-word;">${text(p)}</p>`
+  );
+  const sections = (content.sections ?? []).map((section) => {
+    const title = section.url ? `<a href="${link(section.url)}" style="color: ${brand.headingColor}; font-weight: 600; text-decoration: none;">${text(section.title)}</a>` : `<span style="color: ${brand.headingColor}; font-weight: 600;">${text(section.title)}</span>`;
+    const rows = section.rows.map(
+      (row) => `<li style="margin: 0 0 4px 0;">${row.url ? `<a href="${link(row.url)}" style="color: ${BODY_TEXT}; text-decoration: underline;">${text(row.text)}</a>` : text(row.text)}</li>`
+    );
+    return `<p style="margin: 8px 0 4px 0; word-break: break-word;">${title}</p>
+                                      <ul style="margin: 0 0 16px 0; padding-left: 20px;">${rows.join("")}</ul>`;
+  });
+  return renderLayout({
+    title: escapeHtml(content.heading),
+    logoUrl: logoUrlFor(branding.logoUrl, appUrl),
+    logoSize: logoDimensions(branding.logoWidth, branding.logoHeight),
+    appName: escapeHtml(content.appName ?? "App"),
+    welcome: "",
+    heading: escapeHtml(content.heading),
+    body: [...paragraphs, ...sections].join("\n                                      "),
+    button: content.button ? { label: escapeHtml(content.button.label), url: link(content.button.url) } : null,
+    notice: content.notice ? text(content.notice) : "",
+    footerNote: content.footerNote ? text(content.footerNote) : "",
+    marketingUrl: marketingUrlFor(branding.marketingUrl),
+    brand
+  });
+}
 
 // src/core/passwordless.ts
 var PASSWORDLESS_TTL_MS = 10 * 60 * 1e3;
@@ -1870,13 +1807,13 @@ async function cleanupExpiredPasswordlessChallenges(db, tables2) {
 function passwordlessEmail(input) {
   const { appName, appUrl, linkUrl, code } = input;
   const minutes = Math.max(1, Math.round((input.ttlMs ?? PASSWORDLESS_TTL_MS) / 6e4));
-  const lifetime = `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
+  const lifetime2 = `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
   const safeLink = sanitizeEmailUrl(linkUrl, appUrl);
   const html = generateEmailTemplate({
     heading: `Sign in to ${escapeHtml(appName)}`,
     body: `<p>Use this code, or the button below, to sign in:</p>
 			<p style="font-size: 32px; font-weight: bold; letter-spacing: 4px; text-align: center; margin: 24px 0; font-family: monospace;">${escapeHtml(code)}</p>
-			<p>The code and the link expire in ${lifetime}.</p>`,
+			<p>The code and the link expire in ${lifetime2}.</p>`,
     buttonText: "Sign in",
     buttonUrl: safeLink,
     footerNote: "If you didn't ask to sign in, you can ignore this email.",
@@ -1891,7 +1828,7 @@ function passwordlessEmail(input) {
 Or sign in with this link:
 ${safeLink}
 
-The code and the link expire in ${lifetime}.
+The code and the link expire in ${lifetime2}.
 
 If you didn't ask to sign in, you can ignore this email.`
   };
@@ -2441,6 +2378,15 @@ var import_drizzle_orm10 = require("drizzle-orm");
 var import_drizzle_orm7 = require("drizzle-orm");
 
 // src/lib/email/templates.ts
+function lifetime(minutes) {
+  if (minutes % 60 !== 0) return `${minutes} ${minutes === 1 ? "minute" : "minutes"}`;
+  const hours = minutes / 60;
+  return `${hours} ${hours === 1 ? "hour" : "hours"}`;
+}
+var VERIFICATION_LIFETIME = lifetime(AUTH_DEFAULTS.EMAIL_VERIFICATION_TTL_HOURS * 60);
+var PASSWORD_RESET_LIFETIME = lifetime(AUTH_DEFAULTS.PASSWORD_RESET_TTL_MINUTES);
+var EMAIL_CHANGE_LIFETIME = lifetime(AUTH_DEFAULTS.EMAIL_CHANGE_TTL_HOURS * 60);
+var TWO_FACTOR_CODE_LIFETIME = lifetime(AUTH_DEFAULTS.TWO_FACTOR_EMAIL_CODE_TTL_MINUTES);
 function extractAppUrl(url) {
   try {
     const parsed = new URL(url);
@@ -2456,7 +2402,7 @@ function generateVerificationEmail(data, appName = "Your App", configuredAppUrl
   const safeFirstName = firstName ? escapeHtml(firstName) : null;
   const html = generateEmailTemplate({
     heading: "",
-    body: `Please verify that your email address is <strong>${escapeHtml(email)}</strong>, and that you entered it when signing up for ${escapeHtml(appName)}.`,
+    body: `Please verify that your email address is <strong>${escapeHtml(email)}</strong>, and that you entered it when signing up for ${escapeHtml(appName)}. This link expires in ${VERIFICATION_LIFETIME}.`,
     buttonText: "Verify Email",
     buttonUrl: safeUrl,
     welcomeMessage: safeFirstName ? `Hi ${safeFirstName}, Welcome to ${escapeHtml(appName)}!` : void 0,
@@ -2475,7 +2421,7 @@ Thank you for signing up for ${appName}! Please verify your email address by cli
 
 ${safeUrl}
 
-This link expires in 48 hours.
+This link expires in ${VERIFICATION_LIFETIME}.
 
 If you didn't create an account with ${appName}, you can safely ignore this email.`,
     tags: {
@@ -2493,7 +2439,7 @@ function generatePasswordResetEmail(data, appName = "Your App", configuredAppUrl
     buttonText: "Reset Password",
     buttonUrl: safeUrl,
     securityWarning: `
-			<strong>Link expires in 1 hour.</strong><br>
+			<strong>Link expires in ${PASSWORD_RESET_LIFETIME}.</strong><br>
 			For security, this link can only be used once.
 		`,
     footerNote: "If you didn't request this change, no action is needed. Your password will remain unchanged.",
@@ -2511,7 +2457,7 @@ We received a request to reset your password. Click the link below to create a n
 
 ${safeUrl}
 
-This link will expire in 1 hour.
+This link expires in ${PASSWORD_RESET_LIFETIME}.
 
 If you didn't request a password reset, you can safely ignore this email.`,
     tags: {
@@ -2529,7 +2475,7 @@ function generateEmailChangeConfirmation(data, appName = "Your App", configuredA
     buttonText: "Confirm Email Change",
     buttonUrl: safeUrl,
     securityWarning: `
-			<strong>This link expires in 24 hours.</strong><br>
+			<strong>This link expires in ${EMAIL_CHANGE_LIFETIME}.</strong><br>
 			For security, this link can only be used once.
 		`,
     footerNote: "If you didn't request this change, you can safely ignore this email.",
@@ -2549,7 +2495,7 @@ Click the link below to confirm this change:
 
 ${safeUrl}
 
-This link expires in 24 hours.
+This link expires in ${EMAIL_CHANGE_LIFETIME}.
 
 If you didn't request this change, you can safely ignore this email.`,
     tags: {
@@ -2603,7 +2549,7 @@ function generate2faCodeEmail(data, appName = "Your App", appUrl = "", branding)
 			<p>Hi ${safeFirstName},</p>
 			<p>Your verification code is:</p>
 			<p style="font-size: 32px; font-weight: bold; letter-spacing: 4px; text-align: center; margin: 24px 0; font-family: monospace;">${escapeHtml(code)}</p>
-			<p>This code expires in 5 minutes.</p>
+			<p>This code expires in ${TWO_FACTOR_CODE_LIFETIME}.</p>
 			<p>If you didn't request this code, you can safely ignore this email.</p>
 		`,
     buttonText: "",
@@ -2623,7 +2569,7 @@ Your verification code is:
 
 ${code}
 
-This code expires in 5 minutes.
+This code expires in ${TWO_FACTOR_CODE_LIFETIME}.
 
 If you didn't request this code, you can safely ignore this email.
 
@@ -3702,7 +3648,7 @@ var signupHandler = async (c) => {
   if (!invitedVerified) {
     const emailToken = generateSecureToken(32);
     const tokenHash = await hashToken(emailToken);
-    const expiresAt = Date.now() + 24 * 60 * 60 * 1e3;
+    const expiresAt = Date.now() + AUTH_DEFAULTS.EMAIL_VERIFICATION_TTL_HOURS * 60 * 60 * 1e3;
     await database.insert(schema.emailVerificationTokens).values({
       tokenHash,
       userId: newUser.id,
@@ -3781,7 +3727,7 @@ function generateEmailOtp() {
   const num = (bytes[0] << 24 | bytes[1] << 16 | bytes[2] << 8 | bytes[3]) >>> 0;
   return String(num % 1e6).padStart(6, "0");
 }
-var EMAIL_CODE_TTL_SECONDS = 300;
+var EMAIL_CODE_TTL_SECONDS = AUTH_DEFAULTS.TWO_FACTOR_EMAIL_CODE_TTL_MINUTES * 60;
 async function sendEmailChallengeCode(env, database, usersTable, user, emailBranding) {
   const code = generateEmailOtp();
   await env.OAUTH_STATES.put(`email_2fa_challenge:${user.id}`, await hashToken(code), {
@@ -4839,7 +4785,7 @@ var resendVerificationHandler = async (c) => {
   await db.delete(schema.emailVerificationTokens).where((0, import_drizzle_orm20.eq)(schema.emailVerificationTokens.userId, userId));
   const emailToken = generateSecureToken(32);
   const tokenHash = await hashToken(emailToken);
-  const expiresAt = Date.now() + 24 * 60 * 60 * 1e3;
+  const expiresAt = Date.now() + AUTH_DEFAULTS.EMAIL_VERIFICATION_TTL_HOURS * 60 * 60 * 1e3;
   await db.insert(schema.emailVerificationTokens).values({
     tokenHash,
     userId: user.id,
@@ -6448,6 +6394,7 @@ function verifyWebhookSignature(payload, headers, secret) {
   rateLimit,
   recentPasswordlessFailures,
   refreshSession,
+  renderEmail,
   requestEmailChange,
   requireAuth,
   requireVerifiedEmail,