@draftlab/auth 0.2.3 → 0.2.5

package/dist/provider/totp.d.ts

@@ -0,0 +1,120 @@
+import { Provider } from "./provider.js";
+
+//#region src/provider/totp.d.ts
+
+/**
+ * TOTP data model stored in the database.
+ * Contains the user's TOTP configuration and backup codes.
+ */
+interface TOTPModel {
+  /** Base32-encoded secret key */
+  secret: string;
+  /** Whether TOTP is enabled for this user */
+  enabled: boolean;
+  /** Array of one-time backup/recovery codes */
+  backupCodes: string[];
+  /** Timestamp when TOTP was first set up */
+  createdAt: string;
+  /** Optional user label for the TOTP */
+  label?: string;
+}
+/**
+ * Configuration for the TOTPProvider.
+ * Defines how the TOTP authentication flow should behave.
+ */
+interface TOTPProviderConfig {
+  /**
+   * The human-readable name of the issuer (your application).
+   * This appears in authenticator apps next to the TOTP entry.
+   */
+  issuer: string;
+  /**
+   * Custom authorize handler that generates the UI for TOTP login.
+   * Called when user wants to login with TOTP (main page).
+   *
+   * @param req - The HTTP request object
+   * @param error - Optional error message to display
+   */
+  authorize: (req: Request, error?: string) => Promise<Response>;
+  /**
+   * Custom register handler that generates the UI for TOTP setup.
+   * Called when user is setting up TOTP for the first time.
+   *
+   * @param req - The HTTP request object
+   * @param qrCodeUrl - The otpauth:// URL for QR code generation
+   * @param secret - The raw secret (for manual entry)
+   * @param backupCodes - Array of backup/recovery codes
+   * @param error - Optional error message to display
+   */
+  register: (req: Request, qrCodeUrl: string, secret: string, backupCodes: string[], error?: string, email?: string) => Promise<Response>;
+  /**
+   * Custom verification handler that generates the UI for TOTP verification.
+   * Called when user needs to enter their TOTP code.
+   *
+   * @param req - The HTTP request object
+   * @param error - Optional error message to display
+   */
+  verify: (req: Request, error?: string) => Promise<Response>;
+  /**
+   * Custom recovery handler that generates the UI for backup code entry.
+   * Called when user wants to use a recovery code instead of TOTP.
+   *
+   * @param req - The HTTP request object
+   * @param error - Optional error message to display
+   */
+  recovery: (req: Request, error?: string) => Promise<Response>;
+  /**
+   * Optional TOTP algorithm. Defaults to SHA1 for maximum compatibility.
+   * Most authenticator apps support SHA1, fewer support SHA256/SHA512.
+   */
+  algorithm?: "SHA1" | "SHA256" | "SHA512";
+  /**
+   * Optional number of digits in TOTP codes. Defaults to 6.
+   * Some apps support 8 digits for increased security.
+   */
+  digits?: 6 | 8;
+  /**
+   * Optional validity period for TOTP codes in seconds. Defaults to 30.
+   * Standard is 30 seconds, some high-security apps use 60.
+   */
+  period?: number;
+  /**
+   * Optional time window tolerance for clock drift. Defaults to 1.
+   * Allows tokens from previous/next time window to be valid.
+   */
+  window?: number;
+  /**
+   * Optional number of backup codes to generate. Defaults to 10.
+   */
+  backupCodesCount?: number;
+  /**
+   * Optional function to check if a user is allowed to set up TOTP.
+   */
+  userCanSetupTOTP?: (userId: string, req: Request) => Promise<boolean>;
+  /**
+   * Optional custom label generator for TOTP entries.
+   * Defaults to using the userId as the label.
+   */
+  generateLabel?: (userId: string) => Promise<string>;
+}
+/**
+ * Creates a TOTP (Time-based One-Time Password) authentication provider.
+ *
+ * TOTP tokens. Users can set up TOTP using any compatible authenticator app
+ * and use backup codes when their primary device is unavailable.
+ *
+ * It handles:
+ * - TOTP secret generation and QR code creation
+ * - Token verification with timing attack protection
+ * - Backup code generation and one-time usage validation
+ * - Complete setup, verification, and recovery flows
+ *
+ * @param config Configuration options for the TOTP provider
+ * @returns A Provider instance configured for TOTP authentication
+ */
+declare const TOTPProvider: (config: TOTPProviderConfig) => Provider<{
+  email: string;
+  method: "totp" | "recovery";
+}>;
+//#endregion
+export { TOTPModel, TOTPProvider, TOTPProviderConfig };

package/dist/provider/totp.js

@@ -0,0 +1,191 @@
+import { generateSecureToken } from "../random.js";
+import { Storage } from "../storage/storage.js";
+import { Secret, TOTP } from "otpauth";
+
+//#region src/provider/totp.ts
+const totpKey = (userId) => [
+	"totp",
+	"user",
+	userId
+];
+const DEFAULT_CONFIG = {
+	algorithm: "SHA1",
+	digits: 6,
+	period: 30,
+	window: 1,
+	backupCodesCount: 4,
+	qrSize: 200
+};
+/**
+* Creates a TOTP (Time-based One-Time Password) authentication provider.
+*
+* TOTP tokens. Users can set up TOTP using any compatible authenticator app
+* and use backup codes when their primary device is unavailable.
+*
+* It handles:
+* - TOTP secret generation and QR code creation
+* - Token verification with timing attack protection
+* - Backup code generation and one-time usage validation
+* - Complete setup, verification, and recovery flows
+*
+* @param config Configuration options for the TOTP provider
+* @returns A Provider instance configured for TOTP authentication
+*/
+const TOTPProvider = (config) => {
+	const { issuer, algorithm = DEFAULT_CONFIG.algorithm, digits = DEFAULT_CONFIG.digits, period = DEFAULT_CONFIG.period, window = DEFAULT_CONFIG.window, backupCodesCount = DEFAULT_CONFIG.backupCodesCount } = config;
+	return {
+		type: "totp",
+		init(routes, ctx) {
+			const getTOTPData = async (userId) => {
+				return await Storage.get(ctx.storage, totpKey(userId));
+			};
+			const saveTOTPData = async (userId, data) => {
+				await Storage.set(ctx.storage, totpKey(userId), data);
+			};
+			const deleteTOTPData = async (userId) => {
+				await Storage.remove(ctx.storage, totpKey(userId));
+			};
+			const generateBackupCodes = (count) => {
+				const codes = [];
+				for (let i = 0; i < count; i++) {
+					const code = generateSecureToken().slice(0, 8).toUpperCase();
+					codes.push(`${code.slice(0, 4)}-${code.slice(4)}`);
+				}
+				return codes;
+			};
+			const createTOTPInstance = (secret, label) => {
+				return new TOTP({
+					issuer,
+					label,
+					algorithm,
+					digits,
+					period,
+					secret
+				});
+			};
+			routes.get("/register", async (c) => {
+				return ctx.forward(c, await config.register(c.request, "", "", []));
+			});
+			routes.post("/register-verify", async (c) => {
+				const formData = await c.formData();
+				const email = formData.get("email")?.toString();
+				const action = formData.get("action")?.toString();
+				if (!email) return ctx.forward(c, await config.register(c.request, "", "", [], "Email is required"));
+				if (action === "generate") {
+					const secret = new Secret({ size: 20 });
+					const label = config.generateLabel ? await config.generateLabel(email) : email;
+					const backupCodes = generateBackupCodes(backupCodesCount);
+					const totp$1 = createTOTPInstance(secret.base32, label);
+					const qrCodeUrl$1 = totp$1.toString();
+					const totpData$1 = {
+						secret: secret.base32,
+						enabled: false,
+						backupCodes,
+						createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+						label
+					};
+					await saveTOTPData(email, totpData$1);
+					return ctx.forward(c, await config.register(c.request, qrCodeUrl$1, secret.base32, backupCodes, void 0, email));
+				}
+				const token = formData.get("token")?.toString();
+				if (!token) return ctx.forward(c, await config.register(c.request, "", "", [], "Verification code is required"));
+				const totpData = await getTOTPData(email);
+				if (!totpData) return ctx.forward(c, await config.register(c.request, "", "", [], "TOTP setup session not found"));
+				const totp = createTOTPInstance(totpData.secret, totpData.label || email);
+				const delta = totp.validate({
+					token,
+					window
+				});
+				if (delta !== null) {
+					totpData.enabled = true;
+					await saveTOTPData(email, totpData);
+					return ctx.success(c, {
+						email,
+						method: "totp"
+					});
+				}
+				const qrCodeUrl = totp.toString();
+				return ctx.forward(c, await config.register(c.request, qrCodeUrl, totpData.secret, totpData.backupCodes, "Invalid verification code. Please try again."));
+			});
+			routes.get("/authorize", async (c) => {
+				return ctx.forward(c, await config.authorize(c.request));
+			});
+			routes.post("/verify", async (c) => {
+				const formData = await c.formData();
+				const email = formData.get("email")?.toString();
+				const token = formData.get("token")?.toString();
+				if (!email || !token) return ctx.forward(c, await config.verify(c.request, "Email and verification code are required"));
+				const totpData = await getTOTPData(email);
+				if (!totpData || !totpData.enabled) return ctx.forward(c, await config.verify(c.request, "TOTP is not set up for this email"));
+				const totp = createTOTPInstance(totpData.secret, totpData.label || email);
+				const delta = totp.validate({
+					token,
+					window
+				});
+				if (delta !== null) return ctx.success(c, {
+					email,
+					method: "totp"
+				});
+				return ctx.forward(c, await config.verify(c.request, "Invalid verification code"));
+			});
+			routes.get("/recovery", async (c) => {
+				return ctx.forward(c, await config.recovery(c.request));
+			});
+			routes.post("/recovery-verify", async (c) => {
+				const formData = await c.formData();
+				const email = formData.get("email")?.toString();
+				const code = formData.get("code")?.toString()?.toUpperCase();
+				if (!email || !code) return ctx.forward(c, await config.recovery(c.request, "Email and recovery code are required"));
+				const totpData = await getTOTPData(email);
+				if (!totpData || !totpData.enabled) return ctx.forward(c, await config.recovery(c.request, "TOTP is not set up for this email"));
+				const codeIndex = totpData.backupCodes.indexOf(code);
+				if (codeIndex !== -1) {
+					totpData.backupCodes.splice(codeIndex, 1);
+					await saveTOTPData(email, totpData);
+					return ctx.success(c, {
+						email,
+						method: "recovery"
+					});
+				}
+				return ctx.forward(c, await config.recovery(c.request, "Invalid or already used recovery code"));
+			});
+			routes.post("/disable", async (c) => {
+				const userId = c.query("userId");
+				if (!userId) return c.json({ error: "User ID is required" }, { status: 400 });
+				await deleteTOTPData(userId);
+				return c.json({
+					success: true,
+					message: "TOTP has been disabled"
+				});
+			});
+			routes.get("/status", async (c) => {
+				const userId = c.query("userId");
+				if (!userId) return c.json({ error: "User ID is required" }, { status: 400 });
+				const totpData = await getTOTPData(userId);
+				return c.json({
+					enabled: totpData?.enabled || false,
+					hasBackupCodes: (totpData?.backupCodes?.length || 0) > 0,
+					backupCodesCount: totpData?.backupCodes?.length || 0,
+					setupDate: totpData?.createdAt
+				});
+			});
+			routes.post("/regenerate-backup-codes", async (c) => {
+				const userId = c.query("userId");
+				if (!userId) return c.json({ error: "User ID is required" }, { status: 400 });
+				const totpData = await getTOTPData(userId);
+				if (!totpData || !totpData.enabled) return c.json({ error: "TOTP is not enabled for this user" }, { status: 400 });
+				const newBackupCodes = generateBackupCodes(backupCodesCount);
+				totpData.backupCodes = newBackupCodes;
+				await saveTOTPData(userId, totpData);
+				return c.json({
+					success: true,
+					backupCodes: newBackupCodes,
+					message: "New backup codes generated"
+				});
+			});
+		}
+	};
+};
+
+//#endregion
+export { TOTPProvider };

package/dist/ui/base.js

@@ -78,7 +78,6 @@ const css = `@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  user-select: none;
   color: var(--color-high);
 }
 

package/dist/ui/password.js

@@ -1,4 +1,5 @@
 import { Layout, renderToHTML } from "./base.js";
+import { FormAlert } from "./form.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 
 //#region src/ui/password.tsx
@@ -31,80 +32,6 @@ const DEFAULT_COPY = {
 	logo: "A"
 };
 /**
-* FormAlert component for displaying error messages
-*/
-const FormAlert = ({ message, color = "danger" }) => {
-	if (!message) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-component": "form-alert",
-		"data-color": color,
-		children: [/* @__PURE__ */ jsx("i", {
-			"data-slot": color === "success" ? "icon-success" : "icon-danger",
-			children: color === "success" ? /* @__PURE__ */ jsx("svg", {
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-label": "Success",
-				role: "img",
-				children: /* @__PURE__ */ jsx("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M5 13l4 4L19 7"
-				})
-			}) : /* @__PURE__ */ jsx("svg", {
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-label": "Error",
-				role: "img",
-				children: /* @__PURE__ */ jsx("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.232 16.5c-.77.833.192 2.5 1.732 2.5z"
-				})
-			})
-		}), /* @__PURE__ */ jsx("span", {
-			"data-slot": "message",
-			children: message
-		})]
-	});
-};
-/**
-* Input component with consistent styling
-*/
-const Input = ({ type, name, placeholder, value, required, autoComplete,...props }) => /* @__PURE__ */ jsx("input", {
-	type,
-	name,
-	placeholder,
-	value,
-	required,
-	autoComplete,
-	"data-component": "input",
-	...props
-});
-/**
-* Button component with consistent styling
-*/
-const Button = ({ type = "submit", children,...props }) => /* @__PURE__ */ jsx("button", {
-	type,
-	"data-component": "button",
-	...props,
-	children
-});
-/**
-* Link component with consistent styling
-*/
-const Link = ({ href, children,...props }) => /* @__PURE__ */ jsx("a", {
-	href,
-	"data-component": "link",
-	...props,
-	children
-});
-/**
 * Creates a complete UI configuration for password-based authentication
 */
 const PasswordUI = (options) => {
@@ -129,22 +56,25 @@ const PasswordUI = (options) => {
 		method: "post",
 		children: [
 			/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-			/* @__PURE__ */ jsx(Input, {
+			/* @__PURE__ */ jsx("input", {
 				type: "email",
 				name: "email",
 				placeholder: copy.input_email,
 				value: form?.get("email")?.toString() || "",
 				autoComplete: "email",
+				"data-component": "input",
 				required: true
 			}),
-			/* @__PURE__ */ jsx(Input, {
+			/* @__PURE__ */ jsx("input", {
 				type: "password",
 				name: "password",
 				placeholder: copy.input_password,
 				autoComplete: "current-password",
+				"data-component": "input",
 				required: true
 			}),
-			/* @__PURE__ */ jsx(Button, {
+			/* @__PURE__ */ jsx("button", {
+				"data-component": "button",
 				type: "submit",
 				children: copy.button_continue
 			}),
@@ -153,11 +83,13 @@ const PasswordUI = (options) => {
 				children: [/* @__PURE__ */ jsxs("span", { children: [
 					copy.register_prompt,
 					" ",
-					/* @__PURE__ */ jsx(Link, {
+					/* @__PURE__ */ jsx("a", {
+						"data-component": "link",
 						href: "./register",
 						children: copy.register
 					})
-				] }), /* @__PURE__ */ jsx(Link, {
+				] }), /* @__PURE__ */ jsx("a", {
+					"data-component": "link",
 					href: "./change",
 					children: copy.change_prompt
 				})]
@@ -184,30 +116,34 @@ const PasswordUI = (options) => {
 					type: "hidden",
 					value: "register"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "email",
 					name: "email",
 					placeholder: copy.input_email,
 					value: emailError ? "" : form?.get("email")?.toString() || "",
 					autoComplete: "email",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "password",
 					name: "password",
 					placeholder: copy.input_password,
 					value: passwordError ? "" : form?.get("password")?.toString() || "",
 					autoComplete: "new-password",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "password",
 					name: "repeat",
 					placeholder: copy.input_repeat,
 					autoComplete: "new-password",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx("button", {
+					"data-component": "button",
 					type: "submit",
 					children: copy.button_continue
 				}),
@@ -216,7 +152,8 @@ const PasswordUI = (options) => {
 					children: /* @__PURE__ */ jsxs("span", { children: [
 						copy.login_prompt,
 						" ",
-						/* @__PURE__ */ jsx(Link, {
+						/* @__PURE__ */ jsx("a", {
+							"data-component": "link",
 							href: "./authorize",
 							children: copy.login
 						})
@@ -233,20 +170,21 @@ const PasswordUI = (options) => {
 					type: "hidden",
 					value: "verify"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "text",
 					name: "code",
 					placeholder: copy.input_code,
 					"aria-label": "6-digit verification code",
 					autoComplete: "one-time-code",
+					"data-component": "input",
 					inputMode: "numeric",
 					maxLength: 6,
 					minLength: 6,
 					pattern: "[0-9]{6}",
-					autoFocus: true,
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx("button", {
+					"data-component": "button",
 					type: "submit",
 					children: copy.button_continue
 				})
@@ -272,15 +210,17 @@ const PasswordUI = (options) => {
 					type: "hidden",
 					value: "code"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "email",
 					name: "email",
 					placeholder: copy.input_email,
 					value: form?.get("email")?.toString() || "",
 					autoComplete: "email",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx("button", {
+					"data-component": "button",
 					type: "submit",
 					children: copy.button_continue
 				})
@@ -295,7 +235,7 @@ const PasswordUI = (options) => {
 					type: "hidden",
 					value: "verify"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "text",
 					name: "code",
 					placeholder: copy.input_code,
@@ -304,11 +244,12 @@ const PasswordUI = (options) => {
 					inputMode: "numeric",
 					maxLength: 6,
 					minLength: 6,
+					"data-component": "input",
 					pattern: "[0-9]{6}",
-					autoFocus: true,
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx("button", {
+					"data-component": "button",
 					type: "submit",
 					children: copy.button_continue
 				})
@@ -331,11 +272,12 @@ const PasswordUI = (options) => {
 					children: [/* @__PURE__ */ jsxs("span", { children: [
 						copy.code_return,
 						" ",
-						/* @__PURE__ */ jsx(Link, {
+						/* @__PURE__ */ jsx("a", {
+							"data-component": "link",
 							href: "./authorize",
 							children: copy.login
 						})
-					] }), /* @__PURE__ */ jsx(Button, {
+					] }), /* @__PURE__ */ jsx("button", {
 						type: "submit",
 						"data-component": "link",
 						children: copy.code_resend
@@ -352,23 +294,26 @@ const PasswordUI = (options) => {
 					type: "hidden",
 					value: "update"
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "password",
 					name: "password",
 					placeholder: copy.input_password,
 					value: passwordError ? "" : form?.get("password")?.toString() || "",
 					autoComplete: "new-password",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Input, {
+				/* @__PURE__ */ jsx("input", {
 					type: "password",
 					name: "repeat",
 					placeholder: copy.input_repeat,
 					value: passwordError ? "" : form?.get("repeat")?.toString() || "",
 					autoComplete: "new-password",
+					"data-component": "input",
 					required: true
 				}),
-				/* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx("button", {
+					"data-component": "button",
 					type: "submit",
 					children: copy.button_continue
 				})

package/dist/ui/totp.d.ts

@@ -0,0 +1,40 @@
+import { TOTPProviderConfig } from "../provider/totp.js";
+
+//#region src/ui/totp.d.ts
+
+/**
+ * Strongly typed copy text configuration for TOTP UI
+ */
+interface TOTPUICopy {
+  readonly setup_title: string;
+  readonly setup_description: string;
+  readonly verify_title: string;
+  readonly verify_description: string;
+  readonly recovery_title: string;
+  readonly recovery_description: string;
+  readonly setup_manual_entry: string;
+  readonly setup_backup_codes_title: string;
+  readonly setup_backup_codes_description: string;
+  readonly button_continue: string;
+  readonly link_use_recovery: string;
+  readonly link_back_to_totp: string;
+  readonly input_token: string;
+  readonly input_recovery_code: string;
+}
+/**
+ * Configuration options for TOTP UI
+ */
+interface TOTPUIOptions {
+  /** Custom copy text overrides */
+  readonly copy?: Partial<TOTPUICopy>;
+  /** QR code image size in pixels */
+  readonly qrSize?: number;
+  /** Whether to show manual secret entry option */
+  readonly showManualEntry?: boolean;
+}
+/**
+ * Creates a complete UI configuration for TOTP authentication
+ */
+declare const TOTPUI: (options?: TOTPUIOptions) => Omit<TOTPProviderConfig, "issuer">;
+//#endregion
+export { TOTPUI };

package/dist/ui/totp.js

@@ -0,0 +1,323 @@
+import { Layout, renderToHTML } from "./base.js";
+import { FormAlert } from "./form.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import QRCode from "qrcode";
+
+//#region src/ui/totp.tsx
+const DEFAULT_COPY = {
+	setup_title: "Set up Two-Factor Authentication",
+	setup_description: "Scan the QR code with your authenticator app, then enter the verification code.",
+	verify_title: "Enter authentication code",
+	verify_description: "Open your authenticator app and enter the current 6-digit code.",
+	recovery_title: "Use backup code",
+	recovery_description: "Enter one of your backup codes. Each code can only be used once.",
+	setup_manual_entry: "Can't scan? Enter this code manually:",
+	setup_backup_codes_title: "Save your backup codes",
+	setup_backup_codes_description: "Store these backup codes in a safe place. You can use them to access your account if you lose your device.",
+	button_continue: "Continue",
+	link_use_recovery: "Use backup code instead",
+	link_back_to_totp: "Back to authenticator code",
+	input_token: "000000",
+	input_recovery_code: "XXXX-XXXX"
+};
+/**
+* Creates a complete UI configuration for TOTP authentication
+*/
+const TOTPUI = (options = {}) => {
+	const { qrSize = 200, showManualEntry = true } = options;
+	const copy = {
+		...DEFAULT_COPY,
+		...options.copy
+	};
+	/**
+	* Generates QR code as data URL using the qrcode library
+	*/
+	const generateQRCode = async (text) => {
+		try {
+			return await QRCode.toDataURL(text, {
+				width: qrSize,
+				margin: 1,
+				color: {
+					dark: "#000000",
+					light: "#FFFFFF"
+				}
+			});
+		} catch (error) {
+			console.error("QR Code generation failed:", error);
+			return "";
+		}
+	};
+	/**
+	* Renders the setup form with QR code and backup codes
+	*/
+	const renderRegister = async (qrCodeUrl, secret, backupCodes, error, email) => {
+		if (!qrCodeUrl) return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			action: "./register-verify",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: error }),
+				/* @__PURE__ */ jsx("input", {
+					type: "email",
+					name: "email",
+					placeholder: "Email",
+					autoComplete: "email",
+					"data-component": "input",
+					required: true
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: "action",
+					value: "generate"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					"data-component": "button",
+					children: "Generate QR Code"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-component": "form-footer",
+					children: /* @__PURE__ */ jsxs("span", { children: [
+						"Already have TOTP?",
+						" ",
+						/* @__PURE__ */ jsx("a", {
+							href: "./authorize",
+							"data-component": "link",
+							children: "Login"
+						})
+					] })
+				})
+			]
+		}) });
+		const qrCodeDataUrl = await generateQRCode(qrCodeUrl);
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+			"data-component": "form",
+			method: "post",
+			action: "./register-verify",
+			children: [
+				/* @__PURE__ */ jsx(FormAlert, { message: error }),
+				email && /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: "email",
+					value: email
+				}),
+				qrCodeDataUrl && /* @__PURE__ */ jsx("img", {
+					src: qrCodeDataUrl,
+					alt: "TOTP QR Code",
+					width: qrSize,
+					height: qrSize,
+					style: {
+						display: "block",
+						margin: "0 auto"
+					}
+				}),
+				showManualEntry && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					"data-component": "description",
+					children: copy.setup_manual_entry
+				}), /* @__PURE__ */ jsx("code", {
+					style: {
+						display: "block",
+						textAlign: "center",
+						margin: "8px 0"
+					},
+					children: secret
+				})] }),
+				/* @__PURE__ */ jsx("input", {
+					type: "text",
+					name: "token",
+					placeholder: copy.input_token,
+					pattern: "[0-9]{6}",
+					maxLength: 6,
+					minLength: 6,
+					autoComplete: "one-time-code",
+					"data-component": "input",
+					required: true
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					"data-component": "button",
+					children: copy.button_continue
+				}),
+				backupCodes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("h3", {
+						style: { textAlign: "center" },
+						children: copy.setup_backup_codes_title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						"data-component": "description",
+						children: copy.setup_backup_codes_description
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "repeat(2, 1fr)",
+							gap: "8px",
+							margin: "16px 0"
+						},
+						children: backupCodes.map((code, index) => /* @__PURE__ */ jsx("code", {
+							"data-component": "button",
+							children: code
+						}, `${code}-${index + Math.random()}`))
+					})
+				] })
+			]
+		}) });
+	};
+	/**
+	* Renders the authorize form (main TOTP login page following passkey pattern)
+	*/
+	const renderAuthorize = (error) => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+		"data-component": "form",
+		method: "post",
+		action: "./verify",
+		children: [
+			/* @__PURE__ */ jsx(FormAlert, { message: error }),
+			/* @__PURE__ */ jsx("input", {
+				type: "email",
+				name: "email",
+				placeholder: "Email",
+				autoComplete: "email",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				name: "token",
+				placeholder: copy.input_token,
+				pattern: "[0-9]{6}",
+				maxLength: 6,
+				minLength: 6,
+				autoComplete: "one-time-code",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"data-component": "button",
+				children: copy.button_continue
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-component": "form-footer",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"Don't have TOTP setup?",
+					" ",
+					/* @__PURE__ */ jsx("a", {
+						href: "./register",
+						"data-component": "link",
+						children: "Register"
+					})
+				] }), /* @__PURE__ */ jsx("a", {
+					href: "./recovery",
+					"data-component": "link",
+					children: copy.link_use_recovery
+				})]
+			})
+		]
+	}) });
+	/**
+	* Renders the verification form
+	*/
+	const renderVerify = (error) => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+		"data-component": "form",
+		method: "post",
+		action: "./verify",
+		children: [
+			/* @__PURE__ */ jsx(FormAlert, { message: error }),
+			/* @__PURE__ */ jsx("input", {
+				type: "email",
+				name: "email",
+				placeholder: "Email",
+				autoComplete: "email",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				name: "token",
+				placeholder: copy.input_token,
+				pattern: "[0-9]{6}",
+				maxLength: 6,
+				minLength: 6,
+				autoComplete: "one-time-code",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"data-component": "button",
+				children: copy.button_continue
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-component": "form-footer",
+				children: /* @__PURE__ */ jsx("a", {
+					href: "./recovery",
+					"data-component": "link",
+					children: copy.link_use_recovery
+				})
+			})
+		]
+	}) });
+	/**
+	* Renders the recovery form
+	*/
+	const renderRecovery = (error) => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("form", {
+		"data-component": "form",
+		method: "post",
+		action: "./recovery-verify",
+		children: [
+			/* @__PURE__ */ jsx(FormAlert, { message: error }),
+			/* @__PURE__ */ jsx("input", {
+				type: "email",
+				name: "email",
+				placeholder: "Email",
+				autoComplete: "email",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				name: "code",
+				placeholder: copy.input_recovery_code,
+				pattern: "[A-Z0-9]{4}-[A-Z0-9]{4}",
+				maxLength: 9,
+				autoComplete: "off",
+				"data-component": "input",
+				required: true
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				"data-component": "button",
+				children: copy.button_continue
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-component": "form-footer",
+				children: /* @__PURE__ */ jsx("a", {
+					href: "./authorize",
+					"data-component": "link",
+					children: copy.link_back_to_totp
+				})
+			})
+		]
+	}) });
+	return {
+		authorize: async (_req, error) => {
+			const jsx$1 = renderAuthorize(error);
+			return new Response(renderToHTML(jsx$1), { headers: { "Content-Type": "text/html" } });
+		},
+		register: async (_req, qrCodeUrl, secret, backupCodes, error, email) => {
+			const jsx$1 = await renderRegister(qrCodeUrl, secret, backupCodes, error, email);
+			return new Response(renderToHTML(jsx$1), { headers: { "Content-Type": "text/html" } });
+		},
+		verify: async (_req, error) => {
+			const jsx$1 = renderVerify(error);
+			return new Response(renderToHTML(jsx$1), { headers: { "Content-Type": "text/html" } });
+		},
+		recovery: async (_req, error) => {
+			const jsx$1 = renderRecovery(error);
+			return new Response(renderToHTML(jsx$1), { headers: { "Content-Type": "text/html" } });
+		}
+	};
+};
+
+//#endregion
+export { TOTPUI };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftlab/auth",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "Core implementation for @draftlab/auth",
   "author": "Matheus Pergoli",
@@ -38,6 +38,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^24.1.0",
+    "@types/qrcode": "^1.5.5",
     "tsdown": "^0.13.0",
     "typescript": "^5.8.3",
     "@draftlab/tsconfig": "0.1.0"
@@ -58,8 +59,10 @@
     "@simplewebauthn/server": "^13.1.2",
     "@standard-schema/spec": "^1.0.0",
     "jose": "^6.0.12",
+    "otpauth": "^9.4.0",
     "preact": "^10.26.9",
     "preact-render-to-string": "^6.5.13",
+    "qrcode": "^1.5.4",
     "@draftlab/auth-router": "0.0.4"
   },
   "engines": {