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
This commit is contained in:
parent
1af1b07fb3
commit
a177020186
5 changed files with 217 additions and 32 deletions
145
public/app.js
145
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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
console.error(`Failed to send recovery key to ${cleanEmail}:`, err);
|
||||
// Return key in response — shown once in browser, never emailed
|
||||
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":
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
try {
|
||||
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;
|
||||
}
|
||||
}
|
||||
// NOTE: sendRecoveryEmail removed — API keys must NEVER be sent via email.
|
||||
// Key recovery now shows the key in the browser after code verification.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue