Security: never send API keys via email, add browser-based recovery UI, adjust rate limits

Investor Directive 1: Key recovery now shows key in browser after email verification code.
- Removed sendRecoveryEmail function entirely
- Recovery endpoint returns apiKey in JSON response (shown once in browser)
- Added full recovery modal UI (email → code → key displayed)
- Added "Lost your API key?" links throughout signup flow

Investor Directive 3: Rate limits adjusted to match server capacity.
- Global rate limit: 100/min → 30/min (server handles ~28 PDFs/min)
- CORS: recover routes now restricted to docfast.dev origin

public/app.js

@@ -1,4 +1,5 @@
 var signupEmail = '';
+var recoverEmail = '';
 
 function showState(state) {
   ['signupInitial', 'signupLoading', 'signupVerify', 'signupResult'].forEach(function(id) {
@@ -8,6 +9,14 @@ function showState(state) {
   document.getElementById(state).classList.add('active');
 }
 
+function showRecoverState(state) {
+  ['recoverInitial', 'recoverLoading', 'recoverVerify', 'recoverResult'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.classList.remove('active');
+  });
+  document.getElementById(state).classList.add('active');
+}
+
 function openSignup() {
   document.getElementById('signupModal').classList.add('active');
   showState('signupInitial');
@@ -22,6 +31,23 @@ function closeSignup() {
   document.getElementById('signupModal').classList.remove('active');
 }
 
+function openRecover() {
+  closeSignup();
+  document.getElementById('recoverModal').classList.add('active');
+  showRecoverState('recoverInitial');
+  var errEl = document.getElementById('recoverError');
+  if (errEl) errEl.style.display = 'none';
+  var verifyErrEl = document.getElementById('recoverVerifyError');
+  if (verifyErrEl) verifyErrEl.style.display = 'none';
+  document.getElementById('recoverEmailInput').value = '';
+  document.getElementById('recoverCode').value = '';
+  recoverEmail = '';
+}
+
+function closeRecover() {
+  document.getElementById('recoverModal').classList.remove('active');
+}
+
 async function submitSignup() {
   var errEl = document.getElementById('signupError');
   var btn = document.getElementById('signupBtn');
@@ -106,17 +132,117 @@ async function submitVerify() {
   }
 }
 
+async function submitRecover() {
+  var errEl = document.getElementById('recoverError');
+  var btn = document.getElementById('recoverBtn');
+  var emailInput = document.getElementById('recoverEmailInput');
+  var email = emailInput.value.trim();
+
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    errEl.textContent = 'Please enter a valid email address.';
+    errEl.style.display = 'block';
+    return;
+  }
+
+  errEl.style.display = 'none';
+  btn.disabled = true;
+  showRecoverState('recoverLoading');
+
+  try {
+    var res = await fetch('/v1/recover', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email })
+    });
+    var data = await res.json();
+
+    if (!res.ok) {
+      showRecoverState('recoverInitial');
+      errEl.textContent = data.error || 'Something went wrong.';
+      errEl.style.display = 'block';
+      btn.disabled = false;
+      return;
+    }
+
+    recoverEmail = email;
+    document.getElementById('recoverEmailDisplay').textContent = email;
+    showRecoverState('recoverVerify');
+    document.getElementById('recoverCode').focus();
+    btn.disabled = false;
+  } catch (err) {
+    showRecoverState('recoverInitial');
+    errEl.textContent = 'Network error. Please try again.';
+    errEl.style.display = 'block';
+    btn.disabled = false;
+  }
+}
+
+async function submitRecoverVerify() {
+  var errEl = document.getElementById('recoverVerifyError');
+  var btn = document.getElementById('recoverVerifyBtn');
+  var codeInput = document.getElementById('recoverCode');
+  var code = codeInput.value.trim();
+
+  if (!code || !/^\d{6}$/.test(code)) {
+    errEl.textContent = 'Please enter a 6-digit code.';
+    errEl.style.display = 'block';
+    return;
+  }
+
+  errEl.style.display = 'none';
+  btn.disabled = true;
+
+  try {
+    var res = await fetch('/v1/recover/verify', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: recoverEmail, code: code })
+    });
+    var data = await res.json();
+
+    if (!res.ok) {
+      errEl.textContent = data.error || 'Verification failed.';
+      errEl.style.display = 'block';
+      btn.disabled = false;
+      return;
+    }
+
+    if (data.apiKey) {
+      document.getElementById('recoveredKeyText').textContent = data.apiKey;
+      showRecoverState('recoverResult');
+    } else {
+      errEl.textContent = data.message || 'No key found for this email.';
+      errEl.style.display = 'block';
+      btn.disabled = false;
+    }
+  } catch (err) {
+    errEl.textContent = 'Network error. Please try again.';
+    errEl.style.display = 'block';
+    btn.disabled = false;
+  }
+}
+
 function copyKey() {
   var key = document.getElementById('apiKeyText').textContent;
   var btn = document.getElementById('copyBtn');
+  doCopy(key, btn);
+}
+
+function copyRecoveredKey() {
+  var key = document.getElementById('recoveredKeyText').textContent;
+  var btn = document.getElementById('copyRecoveredBtn');
+  doCopy(key, btn);
+}
+
+function doCopy(text, btn) {
   function showCopied() {
     btn.textContent = '\u2713 Copied!';
     setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
   }
   try {
-    navigator.clipboard.writeText(key).then(showCopied).catch(function() {
+    navigator.clipboard.writeText(text).then(showCopied).catch(function() {
       var ta = document.createElement('textarea');
-      ta.value = key; ta.style.position = 'fixed'; ta.style.opacity = '0';
+      ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
       document.body.appendChild(ta); ta.select();
       document.execCommand('copy');
       document.body.removeChild(ta);
@@ -146,6 +272,21 @@ document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('signupBtn').addEventListener('click', submitSignup);
   document.getElementById('verifyBtn').addEventListener('click', submitVerify);
   document.getElementById('copyBtn').addEventListener('click', copyKey);
+
+  // Recovery modal
+  document.getElementById('btn-close-recover').addEventListener('click', closeRecover);
+  document.getElementById('recoverBtn').addEventListener('click', submitRecover);
+  document.getElementById('recoverVerifyBtn').addEventListener('click', submitRecoverVerify);
+  document.getElementById('copyRecoveredBtn').addEventListener('click', copyRecoveredKey);
+  document.getElementById('recoverModal').addEventListener('click', function(e) {
+    if (e.target === this) closeRecover();
+  });
+
+  // Open recovery from links
+  document.querySelectorAll('.open-recover').forEach(function(el) {
+    el.addEventListener('click', function(e) { e.preventDefault(); openRecover(); });
+  });
+
   document.getElementById('signupModal').addEventListener('click', function(e) {
     if (e.target === this) closeSignup();
   });

public/index.html

@@ -188,6 +188,13 @@ html, body {
     overflow-x: hidden !important;
   }
 }
+
+/* Recovery modal states */
+#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
+#recoverInitial.active { display: block; }
+#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
+#recoverResult.active { display: block; }
+#recoverVerify.active { display: block; }
 </style>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -349,7 +356,7 @@ html, body {
       <div class="signup-error" id="signupError"></div>
       <input type="email" id="signupEmail" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="signupBtn">Generate API Key →</button>
-      <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included</p>
+      <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included<br><a href="#" class="open-recover" style="color:var(--muted)">Lost your API key? Recover it →</a></p>
     </div>
 
     <div id="signupLoading">
@@ -370,7 +377,7 @@ html, body {
       <h2>🚀 Your API key is ready!</h2>
       <div class="warning-box">
         <span class="icon">⚠️</span>
-        <span>Save your API key securely. Lost it? <a href="#" onclick="document.getElementById('recover-section').scrollIntoView()" style="color:#fbbf24">Recover via email</a></span>
+        <span>Save your API key securely. Lost it? <a href="#" class="open-recover" style="color:#fbbf24">Recover via email</a></span>
       </div>
       <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
         <span id="apiKeyText"></span>
@@ -381,6 +388,50 @@ html, body {
   </div>
 </div>
 
+
+<!-- Recovery Modal -->
+<div class="modal-overlay" id="recoverModal">
+  <div class="modal">
+    <button class="close" id="btn-close-recover">&times;</button>
+
+    <div id="recoverInitial" class="active">
+      <h2>Recover your API key</h2>
+      <p>Enter the email you signed up with. We'll send a verification code.</p>
+      <div class="signup-error" id="recoverError"></div>
+      <input type="email" id="recoverEmailInput" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
+      <button class="btn btn-primary" style="width:100%" id="recoverBtn">Send Verification Code →</button>
+      <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Your key will be shown here after verification — never sent via email</p>
+    </div>
+
+    <div id="recoverLoading">
+      <div class="spinner"></div>
+      <p style="color:var(--muted);margin:0">Sending verification code…</p>
+    </div>
+
+    <div id="recoverVerify">
+      <h2>Enter verification code</h2>
+      <p>We sent a 6-digit code to <strong id="recoverEmailDisplay"></strong></p>
+      <div class="signup-error" id="recoverVerifyError"></div>
+      <input type="text" id="recoverCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <button class="btn btn-primary" style="width:100%" id="recoverVerifyBtn">Verify →</button>
+      <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
+    </div>
+
+    <div id="recoverResult">
+      <h2>🔑 Your API key</h2>
+      <div class="warning-box">
+        <span class="icon">⚠️</span>
+        <span>Save your API key securely. This is the only time it will be shown.</span>
+      </div>
+      <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
+        <span id="recoveredKeyText"></span>
+        <button onclick="copyRecoveredKey()" id="copyRecoveredBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
+      </div>
+      <p style="margin-top:20px;color:var(--muted);font-size:0.9rem;"><a href="/docs">Read the docs →</a></p>
+    </div>
+  </div>
+</div>
+
 <script src="/app.js"></script>
 </body>
 </html>

src/index.ts

@@ -27,6 +27,7 @@ app.use(helmet({ crossOriginResourcePolicy: { policy: "cross-origin" } }));
 // Differentiated CORS middleware
 app.use((req, res, next) => {
   const isAuthBillingRoute = req.path.startsWith('/v1/signup') || 
+                             req.path.startsWith('/v1/recover') || 
                              req.path.startsWith('/v1/billing');
   
   if (isAuthBillingRoute) {
@@ -59,7 +60,7 @@ app.set("trust proxy", 1);
 // Rate limiting
 const limiter = rateLimit({
   windowMs: 60_000,
-  max: 100,
+  max: 30,
   standardHeaders: true,
   legacyHeaders: false,
 });

src/routes/recover.ts

@@ -1,20 +1,20 @@
 import { Router, Request, Response } from "express";
 import rateLimit from "express-rate-limit";
 import { createPendingVerification, verifyCode } from "../services/verification.js";
-import { sendRecoveryEmail, sendVerificationEmail } from "../services/email.js";
+import { sendVerificationEmail } from "../services/email.js";
 import { getAllKeys } from "../services/keys.js";
 
 const router = Router();
 
 const recoverLimiter = rateLimit({
   windowMs: 60 * 60 * 1000,
-  max: 3,
+  max: 5,
   message: { error: "Too many recovery attempts. Please try again in 1 hour." },
   standardHeaders: true,
   legacyHeaders: false,
 });
 
-// Step 1: Request recovery — sends verification code
+// Step 1: Request recovery — sends verification code via email
 router.post("/", recoverLimiter, async (req: Request, res: Response) => {
   const { email } = req.body || {};
 
@@ -37,6 +37,7 @@ router.post("/", recoverLimiter, async (req: Request, res: Response) => {
 
   const pending = createPendingVerification(cleanEmail);
 
+  // Send verification CODE only — NEVER send the API key via email
   sendVerificationEmail(cleanEmail, pending.code).catch(err => {
     console.error(`Failed to send recovery email to ${cleanEmail}:`, err);
   });
@@ -44,7 +45,7 @@ router.post("/", recoverLimiter, async (req: Request, res: Response) => {
   res.json({ status: "recovery_sent", message: "If an account exists for this email, a verification code has been sent." });
 });
 
-// Step 2: Verify code — sends API key via email (NOT in response)
+// Step 2: Verify code — returns API key in response (NEVER via email)
 router.post("/verify", recoverLimiter, async (req: Request, res: Response) => {
   const { email, code } = req.body || {};
 
@@ -64,15 +65,19 @@ router.post("/verify", recoverLimiter, async (req: Request, res: Response) => {
       const userKey = keys.find(k => k.email === cleanEmail);
       
       if (userKey) {
-        sendRecoveryEmail(cleanEmail, userKey.key).catch(err => {
+        // Return key in response — shown once in browser, never emailed
-          console.error(`Failed to send recovery key to ${cleanEmail}:`, err);
+        res.json({
+          status: "recovered",
+          apiKey: userKey.key,
+          tier: userKey.tier,
+          message: "Your API key has been recovered. Save it securely — it is shown only once.",
+        });
+      } else {
+        res.json({
+          status: "recovered",
+          message: "No API key found for this email.",
         });
       }
-
-      res.json({
-        status: "recovered",
-        message: "Your API key has been sent to your email address.",
-      });
       break;
     }
     case "expired":

src/services/email.ts

@@ -16,7 +16,7 @@ export async function sendVerificationEmail(email: string, code: string): Promis
       from: "DocFast <noreply@docfast.dev>",
       to: email,
       subject: "DocFast - Verify your email",
-      text: `Your DocFast verification code is: ${code}\n\nThis code expires in 15 minutes.\n\nIf you didn't sign up for DocFast, ignore this email.`,
+      text: `Your DocFast verification code is: ${code}\n\nThis code expires in 15 minutes.\n\nIf you didn't request this, ignore this email.`,
     });
     console.log(`📧 Verification email sent to ${email}: ${info.messageId}`);
     return true;
@@ -26,18 +26,5 @@ export async function sendVerificationEmail(email: string, code: string): Promis
   }
 }
 
-export async function sendRecoveryEmail(email: string, apiKey: string): Promise<boolean> {
+// NOTE: sendRecoveryEmail removed — API keys must NEVER be sent via email.
-  try {
+// Key recovery now shows the key in the browser after code verification.
-    const info = await transporter.sendMail({
-      from: "DocFast <noreply@docfast.dev>",
-      to: email,
-      subject: "DocFast - Your API Key Recovery",
-      text: `Here is your DocFast API key:\n\n${apiKey}\n\nKeep this key safe. Do not share it with anyone.\n\nIf you didn't request this recovery, please ignore this email — your key has not been changed.`,
-    });
-    console.log(`📧 Recovery email sent to ${email}: ${info.messageId}`);
-    return true;
-  } catch (err) {
-    console.error(`📧 Failed to send recovery email to ${email}:`, err);
-    return false;
-  }
-}