@draftlab/auth 0.13.1 → 0.15.0

package/dist/ui/passkey.mjs

@@ -10,10 +10,12 @@ const DEFAULT_COPY = {
 	login_prompt: "Already have an account?",
 	login: "Login",
 	button_continue: "Continue",
-	change_prompt: "Forgot password?",
-	code_resend: "Resend code",
-	code_return: "Back to",
-	input_email: "Email"
+	input_email: "Email",
+	error_register_already_registered: "This device is already registered. Please use the login page or try a different device.",
+	error_register_cancelled: "Registration was cancelled or timed out. Please try again.",
+	error_register_failed: "Registration failed. Please try again.",
+	error_auth_cancelled: "Authentication was cancelled or timed out. Please try again.",
+	error_auth_failed: "Authentication failed. Please try again."
 };
 const PasskeyUI = (options) => {
 	const { rpName, rpID, origin, userCanRegisterPasskey, authenticatorSelection, attestationType, timeout } = options;
@@ -57,8 +59,17 @@ const PasskeyUI = (options) => {
 											// Pass the options to the authenticator and wait for a response
 											attResp = await startAuthentication({ optionsJSON });
 										} catch (error) {
-											message.textContent = error;
-											throw error;
+											// Handle WebAuthn errors with friendly messages
+											const errorName = error.name;
+											if (errorName === "NotAllowedError") {
+												message.textContent = "${copy.error_auth_cancelled}";
+											} else if (errorName === "InvalidStateError") {
+												message.textContent = "${copy.error_auth_failed}";
+											} else {
+												message.textContent = error.message || "${copy.error_auth_failed}";
+											}
+											console.error(error);
+											return;
 										}
 										
 										const verificationResp = await fetch(
@@ -147,6 +158,7 @@ const PasskeyUI = (options) => {
 								window.addEventListener("load", async () => {
 									const { startRegistration } = SimpleWebAuthnBrowser;
 									const registerForm = document.getElementById("registerForm");
+									const btnOtherDevice = document.getElementById("btnOtherDevice");
 									const message = document.querySelector("[data-slot='message']");
 									const origin = window.location.origin;
 									const rpID = window.location.hostname;
@@ -181,8 +193,17 @@ const PasskeyUI = (options) => {
 											// Pass the options to the authenticator and wait for a response
 											attResp = await startRegistration({ optionsJSON });
 										} catch (error) {
-											message.textContent = error;
-											throw error;
+											// Handle WebAuthn errors with friendly messages
+											const errorName = error.name;
+											if (errorName === "InvalidStateError") {
+												message.textContent = "${copy.error_register_already_registered}";
+											} else if (errorName === "NotAllowedError") {
+												message.textContent = "${copy.error_register_cancelled}";
+											} else {
+												message.textContent = error.message || "${copy.error_register_failed}";
+											}
+											console.error(error);
+											return;
 										}
 
 										// POST the response to the endpoint that calls
@@ -232,6 +253,11 @@ const PasskeyUI = (options) => {
 										e.preventDefault();
 										register();
 									});
+									
+									btnOtherDevice.addEventListener("click", (e) => {
+										e.preventDefault();
+										register(true);
+									});
 								});
 							` } }),
 				/* @__PURE__ */ jsxs("form", {

package/dist/ui/password.d.mts

@@ -11,10 +11,6 @@ interface PasswordUICopy {
   readonly error_invalid_email: string;
   readonly error_invalid_password: string;
   readonly error_password_mismatch: string;
-  readonly register_title: string;
-  readonly register_description: string;
-  readonly login_title: string;
-  readonly login_description: string;
   readonly register: string;
   readonly register_prompt: string;
   readonly login_prompt: string;

package/dist/ui/password.mjs

@@ -1,3 +1,4 @@
+import { run } from "../util.mjs";
 import { Layout, renderToHTML } from "./base.mjs";
 import { FormAlert } from "./form.mjs";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
@@ -12,10 +13,6 @@ const DEFAULT_COPY = {
 	error_invalid_email: "Email is not valid.",
 	error_invalid_password: "Password is incorrect.",
 	error_password_mismatch: "Passwords do not match.",
-	register_title: "Welcome to the app",
-	register_description: "Sign in with your email",
-	login_title: "Welcome to the app",
-	login_description: "Sign in with your email",
 	register: "Register",
 	register_prompt: "Don't have an account?",
 	login_prompt: "Already have an account?",
@@ -104,130 +101,133 @@ const PasswordUI = (options) => {
 			"password_mismatch",
 			"validation_error"
 		].includes(error?.type || "");
-		return /* @__PURE__ */ jsx(Layout, { children: state.type === "start" ? /* @__PURE__ */ jsxs("form", {
-			"data-component": "form",
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "register"
-				}),
-				/* @__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", {
-					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", {
-					type: "password",
-					name: "repeat",
-					placeholder: copy.input_repeat,
-					autoComplete: "new-password",
-					"data-component": "input",
-					required: true
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"data-component": "button",
-					type: "submit",
-					children: copy.button_continue
-				}),
-				/* @__PURE__ */ jsx("div", {
-					"data-component": "form-footer",
-					children: /* @__PURE__ */ jsxs("span", { children: [
-						copy.login_prompt,
-						" ",
-						/* @__PURE__ */ jsx("a", {
-							"data-component": "link",
-							href: "./authorize",
-							children: copy.login
-						})
-					] })
-				})
-			]
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
-			"data-component": "form",
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "verify"
-				}),
-				/* @__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}",
-					required: true
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"data-component": "button",
-					type: "submit",
-					children: copy.button_continue
-				})
-			]
-		}), /* @__PURE__ */ jsxs("form", {
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "register"
-				}),
-				/* @__PURE__ */ jsx("input", {
-					name: "email",
-					type: "hidden",
-					value: state.email
-				}),
-				/* @__PURE__ */ jsx("input", {
-					name: "password",
-					type: "hidden",
-					value: ""
-				}),
-				/* @__PURE__ */ jsx("input", {
-					name: "repeat",
-					type: "hidden",
-					value: ""
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					"data-component": "form-footer",
-					children: [/* @__PURE__ */ jsxs("span", { children: [
-						copy.code_return,
-						" ",
-						/* @__PURE__ */ jsx("a", {
-							"data-component": "link",
-							href: "./authorize",
-							children: copy.login
-						})
-					] }), /* @__PURE__ */ jsx("button", {
+		return /* @__PURE__ */ jsx(Layout, { children: run(() => {
+			if (state.type === "start") return /* @__PURE__ */ jsxs("form", {
+				"data-component": "form",
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "register"
+					}),
+					/* @__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", {
+						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", {
+						type: "password",
+						name: "repeat",
+						placeholder: copy.input_repeat,
+						autoComplete: "new-password",
+						"data-component": "input",
+						required: true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"data-component": "button",
 						type: "submit",
-						"data-component": "link",
-						children: copy.code_resend
-					})]
-				})
-			]
-		})] }) });
+						children: copy.button_continue
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-component": "form-footer",
+						children: /* @__PURE__ */ jsxs("span", { children: [
+							copy.login_prompt,
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								"data-component": "link",
+								href: "./authorize",
+								children: copy.login
+							})
+						] })
+					})
+				]
+			});
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
+				"data-component": "form",
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "verify"
+					}),
+					/* @__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}",
+						required: true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"data-component": "button",
+						type: "submit",
+						children: copy.button_continue
+					})
+				]
+			}), /* @__PURE__ */ jsxs("form", {
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "register"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						name: "email",
+						type: "hidden",
+						value: state.email
+					}),
+					/* @__PURE__ */ jsx("input", {
+						name: "password",
+						type: "hidden",
+						value: ""
+					}),
+					/* @__PURE__ */ jsx("input", {
+						name: "repeat",
+						type: "hidden",
+						value: ""
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-component": "form-footer",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							copy.code_return,
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								"data-component": "link",
+								href: "./authorize",
+								children: copy.login
+							})
+						] }), /* @__PURE__ */ jsx("button", {
+							type: "submit",
+							"data-component": "link",
+							children: copy.code_resend
+						})]
+					})
+				]
+			})] });
+		}) });
 	};
 	/**
 	* Renders the password change form based on current state
@@ -238,124 +238,140 @@ const PasswordUI = (options) => {
 			"password_mismatch",
 			"validation_error"
 		].includes(error?.type || "");
-		return /* @__PURE__ */ jsx(Layout, { children: state.type === "start" ? /* @__PURE__ */ jsxs("form", {
-			"data-component": "form",
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "code"
-				}),
-				/* @__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", {
-					"data-component": "button",
-					type: "submit",
-					children: copy.button_continue
-				})
-			]
-		}) : state.type === "code" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
-			"data-component": "form",
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "verify"
-				}),
-				/* @__PURE__ */ jsx("input", {
-					type: "text",
-					name: "code",
-					placeholder: copy.input_code,
-					"aria-label": "6-digit verification code",
-					autoComplete: "one-time-code",
-					inputMode: "numeric",
-					maxLength: 6,
-					minLength: 6,
-					"data-component": "input",
-					pattern: "[0-9]{6}",
-					required: true
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"data-component": "button",
-					type: "submit",
-					children: copy.button_continue
-				})
-			]
-		}), /* @__PURE__ */ jsxs("form", {
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "code"
-				}),
-				/* @__PURE__ */ jsx("input", {
-					name: "email",
-					type: "hidden",
-					value: state.email
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					"data-component": "form-footer",
-					children: [/* @__PURE__ */ jsxs("span", { children: [
-						copy.code_return,
-						" ",
-						/* @__PURE__ */ jsx("a", {
+		return /* @__PURE__ */ jsx(Layout, { children: run(() => {
+			if (state.type === "start") return /* @__PURE__ */ jsxs("form", {
+				"data-component": "form",
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "code"
+					}),
+					/* @__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", {
+						"data-component": "button",
+						type: "submit",
+						children: copy.button_continue
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-component": "form-footer",
+						children: /* @__PURE__ */ jsxs("span", { children: [
+							copy.code_return,
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								"data-component": "link",
+								href: "./authorize",
+								children: copy.login
+							})
+						] })
+					})
+				]
+			});
+			if (state.type === "code") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("form", {
+				"data-component": "form",
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "verify"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						name: "code",
+						placeholder: copy.input_code,
+						"aria-label": "6-digit verification code",
+						autoComplete: "one-time-code",
+						inputMode: "numeric",
+						maxLength: 6,
+						minLength: 6,
+						"data-component": "input",
+						pattern: "[0-9]{6}",
+						required: true
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"data-component": "button",
+						type: "submit",
+						children: copy.button_continue
+					})
+				]
+			}), /* @__PURE__ */ jsxs("form", {
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "code"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						name: "email",
+						type: "hidden",
+						value: state.email
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-component": "form-footer",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							copy.code_return,
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								"data-component": "link",
+								href: "./authorize",
+								children: copy.login
+							})
+						] }), /* @__PURE__ */ jsx("button", {
+							type: "submit",
 							"data-component": "link",
-							href: "./authorize",
-							children: copy.login
-						})
-					] }), /* @__PURE__ */ jsx("button", {
+							children: copy.code_resend
+						})]
+					})
+				]
+			})] });
+			return /* @__PURE__ */ jsxs("form", {
+				"data-component": "form",
+				method: "post",
+				children: [
+					/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
+					/* @__PURE__ */ jsx("input", {
+						name: "action",
+						type: "hidden",
+						value: "update"
+					}),
+					/* @__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", {
+						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", {
+						"data-component": "button",
 						type: "submit",
-						"data-component": "link",
-						children: copy.code_resend
-					})]
-				})
-			]
-		})] }) : /* @__PURE__ */ jsxs("form", {
-			"data-component": "form",
-			method: "post",
-			children: [
-				/* @__PURE__ */ jsx(FormAlert, { message: getErrorMessage(error) }),
-				/* @__PURE__ */ jsx("input", {
-					name: "action",
-					type: "hidden",
-					value: "update"
-				}),
-				/* @__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", {
-					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", {
-					"data-component": "button",
-					type: "submit",
-					children: copy.button_continue
-				})
-			]
+						children: copy.button_continue
+					})
+				]
+			});
 		}) });
 	};
 	return {

package/dist/util.d.mts

@@ -1,4 +1,4 @@
-import { RouterContext } from "@draftlab/auth-router/types";
+import { RouterContext } from "./router/types.mjs";
 
 //#region src/util.d.ts
 
@@ -68,5 +68,28 @@ declare const isDomainMatch: (a: string, b: string) => boolean;
  * ```
  */
 declare const lazy: <T>(fn: () => T) => (() => T);
+/**
+ * Utility function to immediately invoke a function and return its result.
+ * Useful for complex conditional rendering logic in JSX/TSX where you want
+ * to use if/else statements instead of ternary operators.
+ *
+ * @template T - The return type of the function
+ * @param fn - Function to execute immediately
+ * @returns The result of executing the function
+ *
+ * @example
+ * ```tsx
+ * return (
+ *   <div>
+ *     {run(() => {
+ *       if (state === "loading") return <Spinner />
+ *       if (state === "error") return <Error />
+ *       return <Content />
+ *     })}
+ *   </div>
+ * )
+ * ```
+ */
+declare const run: <T>(fn: () => T) => T;
 //#endregion
-export { Prettify, getRelativeUrl, isDomainMatch, lazy };
+export { Prettify, getRelativeUrl, isDomainMatch, lazy, run };