@draftlab/auth 0.1.3 → 0.1.5

package/dist/provider/passkey.d.ts

@@ -0,0 +1,104 @@
+import { Provider } from "./provider.js";
+import { AuthenticatorSelectionCriteria, AuthenticatorTransportFuture, Base64URLString, CredentialDeviceType } from "@simplewebauthn/server";
+
+//#region src/provider/passkey.d.ts
+
+/**
+ * User model for passkey authentication.
+ * Contains the core user data needed for WebAuthn operations.
+ */
+interface UserModel {
+  id: string;
+  username: string;
+}
+/**
+ * Original PasskeyModel structure for in-memory use.
+ * Represents a registered credential with public key as Uint8Array.
+ */
+interface PasskeyModel {
+  id: string;
+  publicKey: Uint8Array;
+  userId: string;
+  webauthnUserID: string;
+  counter: number;
+  deviceType: CredentialDeviceType;
+  backedUp: boolean;
+  transports?: AuthenticatorTransportFuture[];
+}
+/**
+ * PasskeyModel version for KV storage with publicKey as string.
+ * Used for storing credentials in a key-value store.
+ */
+interface PasskeyModelStored extends Omit<PasskeyModel, "publicKey"> {
+  publicKey: string;
+}
+declare const DEFAULT_COPY: {
+  error_user_not_allowed: string;
+};
+/**
+ * Configuration for the PasskeyProvider.
+ * Defines how the passkey authentication flow should behave.
+ */
+interface PasskeyProviderConfig {
+  /**
+   * Custom authorization handler that generates the UI for authorization.
+   */
+  authorize: (req: Request) => Promise<Response>;
+  /**
+   * Custom registration handler that generates the UI for registration.
+   */
+  register: (req: Request) => Promise<Response>;
+  /**
+   * The human-readable name of the relying party (your application).
+   */
+  rpName: string;
+  /**
+   * The ID of the relying party, typically the domain name without protocol.
+   */
+  rpID?: string;
+  /**
+   * The origin URL(s) that are allowed to initiate WebAuthn ceremonies.
+   */
+  origin?: string | string[];
+  /**
+   * Optional function to check if a user is allowed to register a passkey.
+   */
+  userCanRegisterPasskey?: (userId: string, req: Request) => Promise<boolean>;
+  /**
+   * Optional WebAuthn authenticator selection criteria.
+   */
+  authenticatorSelection?: AuthenticatorSelectionCriteria;
+  /**
+   * Optional attestation type.
+   */
+  attestationType?: "none" | "direct" | "enterprise";
+  /**
+   * Optional timeout for challenges in milliseconds.
+   */
+  timeout?: number;
+  /**
+   * Custom copy texts for error messages and UI elements.
+   */
+  copy?: Partial<typeof DEFAULT_COPY>;
+}
+/**
+ * Creates a passkey (WebAuthn) authentication provider.
+ *
+ * This provider enables passwordless authentication using biometrics, hardware security
+ * keys, or platform authenticators. It implements the Web Authentication (WebAuthn) standard.
+ *
+ * It handles:
+ * - Passkey registration (creating new credentials)
+ * - Authentication with existing passkeys
+ * - Secure storage of credentials
+ * - Challenge verification
+ *
+ * @param config Configuration options for the passkey provider
+ * @returns A Provider instance configured for passkey authentication
+ */
+declare const PasskeyProvider: (config: PasskeyProviderConfig) => Provider<{
+  userId: string;
+  credentialId?: Base64URLString;
+}>;
+//#endregion
+export { PasskeyModel, PasskeyModelStored, PasskeyProvider, PasskeyProviderConfig, UserModel };

package/dist/provider/passkey.js

@@ -0,0 +1,324 @@
+import { Storage } from "../storage/storage.js";
+import { generateAuthenticationOptions, generateRegistrationOptions, verifyAuthenticationResponse, verifyRegistrationResponse } from "@simplewebauthn/server";
+
+//#region src/provider/passkey.ts
+/**
+* Converts a Uint8Array to a Base64URL encoded string.
+* This is used to convert binary data for storage in databases or JSON.
+*
+* @param bytes - The Uint8Array to convert
+* @returns Base64URL encoded string
+*/
+const uint8ArrayToBase64Url = (bytes) => {
+	let str = "";
+	for (const charCode of bytes) str += String.fromCharCode(charCode);
+	const base64String = btoa(str);
+	return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+};
+/**
+* Converts a Base64URL encoded string back to a Uint8Array.
+* This is used to convert stored data back to binary format for WebAuthn operations.
+*
+* @param base64urlString - The Base64URL encoded string to convert
+* @returns Uint8Array containing the decoded data
+*/
+const base64UrlToUint8Array = (base64urlString) => {
+	const base64 = base64urlString.replace(/-/g, "+").replace(/_/g, "/");
+	/**
+	* Pad with '=' until it's a multiple of four
+	* (4 - (85 % 4 = 1) = 3) % 4 = 3 padding
+	* (4 - (86 % 4 = 2) = 2) % 4 = 2 padding
+	* (4 - (87 % 4 = 3) = 1) % 4 = 1 padding
+	* (4 - (88 % 4 = 0) = 4) % 4 = 0 padding
+	*/
+	const padLength = (4 - base64.length % 4) % 4;
+	const padded = base64.padEnd(base64.length + padLength, "=");
+	const binary = atob(padded);
+	const buffer = new ArrayBuffer(binary.length);
+	const bytes = new Uint8Array(buffer);
+	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+	return bytes;
+};
+const userKey = (userId) => [
+	"passkey",
+	"user",
+	userId
+];
+const passkeyKey = (userId, credentialId) => [
+	"passkey",
+	"user",
+	userId,
+	"credential",
+	credentialId,
+	"passkey"
+];
+const optionsKey = (userId) => [
+	"passkey",
+	"user",
+	userId,
+	"options"
+];
+const userPasskeysIndexKey = (userId) => [
+	"passkey",
+	"user",
+	userId,
+	"passkeys"
+];
+const DEFAULT_COPY = { error_user_not_allowed: "There is already an account with this email. Login to add a passkey." };
+/**
+* Creates a passkey (WebAuthn) authentication provider.
+*
+* This provider enables passwordless authentication using biometrics, hardware security
+* keys, or platform authenticators. It implements the Web Authentication (WebAuthn) standard.
+*
+* It handles:
+* - Passkey registration (creating new credentials)
+* - Authentication with existing passkeys
+* - Secure storage of credentials
+* - Challenge verification
+*
+* @param config Configuration options for the passkey provider
+* @returns A Provider instance configured for passkey authentication
+*/
+const PasskeyProvider = (config) => {
+	const copy = {
+		...DEFAULT_COPY,
+		...config.copy
+	};
+	return {
+		type: "passkey",
+		init(routes, ctx) {
+			const { rpName, authenticatorSelection, attestationType = "none", timeout = 5 * 60 * 1e3 } = config;
+			const getStoredUserById = async (userId) => {
+				return await Storage.get(ctx.storage, userKey(userId));
+			};
+			const saveUser = async (user) => {
+				await Storage.set(ctx.storage, userKey(user.id), user);
+			};
+			const getStoredPasskeyById = async (userId, credentialID) => {
+				const storedPasskey = await Storage.get(ctx.storage, passkeyKey(userId, credentialID));
+				if (!storedPasskey) return null;
+				return {
+					...storedPasskey,
+					publicKey: base64UrlToUint8Array(storedPasskey.publicKey)
+				};
+			};
+			const getStoredUserPasskeys = async (userId) => {
+				const passkeyIds = await Storage.get(ctx.storage, userPasskeysIndexKey(userId)) || [];
+				const passkeys = [];
+				for (const id of passkeyIds) {
+					const pk = await getStoredPasskeyById(userId, id);
+					if (pk) passkeys.push(pk);
+				}
+				return passkeys;
+			};
+			const saveNewStoredPasskey = async (passkeyData) => {
+				const storablePasskey = {
+					...passkeyData,
+					publicKey: uint8ArrayToBase64Url(passkeyData.publicKey)
+				};
+				await Storage.set(ctx.storage, passkeyKey(passkeyData.userId, passkeyData.id), storablePasskey);
+				const passkeyIds = await Storage.get(ctx.storage, userPasskeysIndexKey(passkeyData.userId)) || [];
+				if (!passkeyIds.includes(passkeyData.id)) {
+					passkeyIds.push(passkeyData.id);
+					await Storage.set(ctx.storage, userPasskeysIndexKey(passkeyData.userId), passkeyIds);
+				}
+			};
+			const updateStoredPasskeyCounter = async (userId, credentialID, newCounter) => {
+				const passkey = await getStoredPasskeyById(userId, credentialID);
+				if (passkey) {
+					passkey.counter = newCounter;
+					const storablePasskey = {
+						...passkey,
+						publicKey: uint8ArrayToBase64Url(passkey.publicKey)
+					};
+					await Storage.set(ctx.storage, passkeyKey(userId, credentialID), storablePasskey);
+				}
+			};
+			routes.get("/authorize", async (c) => {
+				return ctx.forward(c, await config.authorize(c.request));
+			});
+			routes.get("/register", async (c) => {
+				return ctx.forward(c, await config.register(c.request));
+			});
+			routes.get("/register-request", async (c) => {
+				const userId = c.query("userId");
+				const rpID = config.rpID || c.query("rpID");
+				const otherDevice = c.query("otherDevice") === "true";
+				if (!userId) return c.json({ error: "User ID for registration is required." }, { status: 400 });
+				if (!rpID) return c.json({ error: "RP ID for registration is required." }, { status: 400 });
+				const username = c.query("username") || userId;
+				let user = await getStoredUserById(userId);
+				if (config.userCanRegisterPasskey) {
+					const isAllowed = await config.userCanRegisterPasskey(userId, c.request);
+					if (!isAllowed) return c.json({ error: copy.error_user_not_allowed }, { status: 403 });
+				}
+				if (!user) {
+					user = {
+						id: userId,
+						username
+					};
+					await saveUser(user);
+				}
+				const userPasskeys = await getStoredUserPasskeys(user.id);
+				const regOptions = await generateRegistrationOptions({
+					rpName,
+					rpID,
+					userName: user.username,
+					attestationType,
+					excludeCredentials: userPasskeys.map((pk) => ({
+						id: pk.id,
+						transports: pk.transports
+					})),
+					authenticatorSelection: authenticatorSelection ?? {
+						residentKey: "preferred",
+						userVerification: "preferred",
+						authenticatorAttachment: otherDevice ? "cross-platform" : "platform"
+					},
+					timeout
+				});
+				await Storage.set(ctx.storage, optionsKey(user.id), regOptions);
+				return c.json(regOptions);
+			});
+			routes.post("/register-verify", async (c) => {
+				const body = await c.parseJson();
+				const userId = c.query("userId");
+				const rpID = config.rpID || c.query("rpID");
+				const origin = config.origin || c.query("origin");
+				if (!userId) return c.json({
+					verified: false,
+					error: "User ID for verification is required."
+				}, { status: 400 });
+				if (!rpID) return c.json({ error: "RP ID for verification is required." }, { status: 400 });
+				if (!origin) return c.json({ error: "Origin for verification is required." }, { status: 400 });
+				const user = await getStoredUserById(userId);
+				if (!user) return c.json({
+					verified: false,
+					error: "User not found during verification."
+				}, { status: 404 });
+				const regOptions = await Storage.get(ctx.storage, optionsKey(user.id));
+				if (!regOptions) return c.json({
+					verified: false,
+					error: "Registration options not found."
+				}, { status: 400 });
+				const challenge = regOptions.challenge;
+				let verification;
+				try {
+					verification = await verifyRegistrationResponse({
+						response: body,
+						expectedChallenge: challenge,
+						expectedOrigin: origin,
+						expectedRPID: rpID,
+						requireUserVerification: authenticatorSelection?.userVerification !== "discouraged"
+					});
+				} catch (error) {
+					console.error("Passkey Registration Verification Error:", error);
+					return c.json({
+						verified: false,
+						error: error.message
+					}, { status: 400 });
+				}
+				const { verified, registrationInfo } = verification;
+				if (verified && registrationInfo) {
+					const { credential, credentialDeviceType, credentialBackedUp } = registrationInfo;
+					if (credential) {
+						const newPasskey = {
+							id: credential.id,
+							userId: user.id,
+							webauthnUserID: regOptions.user.id,
+							publicKey: credential.publicKey,
+							counter: credential.counter,
+							transports: credential.transports,
+							deviceType: credentialDeviceType,
+							backedUp: credentialBackedUp
+						};
+						await saveNewStoredPasskey(newPasskey);
+						return ctx.success(c, {
+							userId: user.id,
+							credentialId: newPasskey.id,
+							verified: true
+						});
+					}
+				}
+				return c.json({
+					verified: false,
+					error: "Registration verification failed."
+				}, { status: 400 });
+			});
+			routes.get("/authenticate-options", async (c) => {
+				const userId = c.query("userId");
+				if (!userId) return c.json({ error: "User ID for authentication is required." }, { status: 400 });
+				const rpID = config.rpID || c.query("rpID");
+				if (!rpID) return c.json({ error: "RP ID for authentication is required." }, { status: 400 });
+				const userForAuth = await getStoredUserById(userId);
+				if (!userForAuth) return c.json({ error: "User not found for authentication." }, { status: 404 });
+				const userPasskeys = await getStoredUserPasskeys(userForAuth.id);
+				const allowCredentialsList = userPasskeys.map((pk) => ({
+					id: pk.id,
+					transports: pk.transports
+				}));
+				const authOptions = await generateAuthenticationOptions({
+					rpID,
+					allowCredentials: allowCredentialsList,
+					userVerification: authenticatorSelection?.userVerification ?? "preferred",
+					timeout
+				});
+				await Storage.set(ctx.storage, optionsKey(userForAuth.id), authOptions);
+				return c.json(authOptions);
+			});
+			routes.post("/authenticate-verify", async (c) => {
+				const body = await c.parseJson();
+				const userId = c.query("userId");
+				if (!userId) return c.json({ error: "User ID for authentication is required." }, { status: 400 });
+				const rpID = config.rpID || c.query("rpID");
+				if (!rpID) return c.json({ error: "RP ID for authentication is required." }, { status: 400 });
+				const origin = config.origin || c.query("origin");
+				if (!origin) return c.json({ error: "Origin for authentication is required." }, { status: 400 });
+				const user = await getStoredUserById(userId);
+				if (!user) return c.json({
+					verified: false,
+					error: `User ${userId} not found.`
+				}, { status: 404 });
+				const authOptions = await Storage.get(ctx.storage, optionsKey(user.id));
+				if (!authOptions) return c.json({ error: "Authentication options not found." }, { status: 400 });
+				const passkey = await getStoredPasskeyById(userId, body.id);
+				if (!passkey) return c.json({
+					verified: false,
+					error: `Passkey ${body.id} not found for user ${user.username}.`
+				}, { status: 400 });
+				const { publicKey, counter, transports } = passkey;
+				if (!publicKey || typeof counter !== "number" || !transports) return c.json({ error: "Passkey not found for authentication." }, { status: 400 });
+				const challenge = authOptions.challenge;
+				if (!challenge) return c.json({ error: "Authentication challenge not found." }, { status: 400 });
+				const verification = await verifyAuthenticationResponse({
+					response: body,
+					expectedChallenge: challenge,
+					expectedOrigin: origin || "",
+					expectedRPID: rpID,
+					credential: {
+						id: passkey.id,
+						publicKey,
+						counter,
+						transports
+					}
+				});
+				const { verified, authenticationInfo } = verification;
+				if (verified) {
+					await updateStoredPasskeyCounter(user.id, passkey.id, authenticationInfo.newCounter);
+					return ctx.success(c, {
+						userId: user.id,
+						credentialId: passkey.id,
+						verified: true
+					});
+				}
+				return c.json({
+					verified: false,
+					error: "Authentication verification failed."
+				}, { status: 400 });
+			});
+		}
+	};
+};
+
+//#endregion
+export { PasskeyProvider };

package/dist/ui/base.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from "../themes/theme.js";
-import * as preact6 from "preact";
+import * as preact0 from "preact";
 import { ComponentChildren } from "preact";
 
 //#region src/ui/base.d.ts
@@ -21,7 +21,7 @@ declare const Layout: ({
   theme,
   title,
   size
-}: LayoutProps) => preact6.JSX.Element;
+}: LayoutProps) => preact0.JSX.Element;
 /**
  * Helper function to render a Preact component to HTML string
  */

package/dist/ui/passkey.d.ts

@@ -0,0 +1,30 @@
+import { PasskeyProviderConfig } from "../provider/passkey.js";
+
+//#region src/ui/passkey.d.ts
+
+/**
+ * Strongly typed copy text configuration for passkey UI
+ */
+interface PasskeyUICopy {
+  readonly authorize_title: string;
+  readonly authorize_description: string;
+  readonly register_title: string;
+  readonly register_description: string;
+  readonly register: string;
+  readonly register_with_passkey: string;
+  readonly register_other_device: string;
+  readonly register_prompt: string;
+  readonly login_prompt: string;
+  readonly login: string;
+  readonly login_with_passkey: string;
+  readonly change_prompt: string;
+  readonly code_resend: string;
+  readonly code_return: string;
+  readonly input_email: string;
+}
+interface PasskeyUIOptions extends Omit<PasskeyProviderConfig, "authorize" | "register" | "copy"> {
+  readonly copy?: Partial<PasskeyUICopy>;
+}
+declare const PasskeyUI: (options: PasskeyUIOptions) => PasskeyProviderConfig;
+//#endregion
+export { PasskeyUI };

package/dist/ui/passkey.js

@@ -0,0 +1,341 @@
+import { Layout, renderToHTML } from "./base.js";
+import { FormAlert } from "./form.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+
+//#region src/ui/passkey.tsx
+const DEFAULT_COPY = {
+	authorize_title: "Sign in with Passkey",
+	authorize_description: "Passkeys are a simple and more secure alternative to passwords. With passkeys, you can log in with your PIN, biometric sensor, or hardware security key.",
+	register_title: "Create a Passkey",
+	register_description: "Create a passkey to enable secure, passwordless authentication for your account.",
+	register: "Register",
+	register_with_passkey: "Register With Passkey",
+	register_other_device: "Use another device",
+	register_prompt: "Don't have an account?",
+	login_prompt: "Already have an account?",
+	login: "Login",
+	login_with_passkey: "Login With Passkey",
+	change_prompt: "Forgot password?",
+	code_resend: "Resend code",
+	code_return: "Back to",
+	input_email: "Email"
+};
+const PasskeyUI = (options) => {
+	const { rpName, rpID, origin, userCanRegisterPasskey, authenticatorSelection, attestationType, timeout } = options;
+	const copy = {
+		...DEFAULT_COPY,
+		...options.copy
+	};
+	return {
+		authorize: async () => {
+			const jsx$1 = /* @__PURE__ */ jsxs(Layout, { children: [
+				/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `
+								window.addEventListener("load", async () => {
+									const { startAuthentication } = SimpleWebAuthnBrowser;
+									const authorizeForm = document.getElementById("authorizeForm");
+									const origin = window.location.origin;
+									const rpID = window.location.hostname;
+									
+									const showMessage = (msg) => {
+										const messageEl = document.querySelector("[data-slot='message']");
+										if (messageEl) {
+											messageEl.innerHTML = msg;
+										} else {
+											// Create alert if it doesn't exist
+											const alertDiv = document.createElement("div");
+											alertDiv.setAttribute("data-component", "form-alert");
+											alertDiv.setAttribute("role", "alert");
+											alertDiv.setAttribute("aria-live", "polite");
+											alertDiv.setAttribute("data-color", "error");
+											alertDiv.innerHTML = '<span data-slot="message">' + msg + '</span>';
+											authorizeForm.insertBefore(alertDiv, authorizeForm.firstChild);
+										}
+									};
+									
+									const clearMessage = () => {
+										const alertDiv = document.querySelector("[data-component='form-alert']");
+										if (alertDiv) {
+											alertDiv.remove();
+										}
+									};
+									
+									authorizeForm.addEventListener("submit", async (e) => {
+										e.preventDefault();
+										const formData = new FormData(authorizeForm);
+										const email = formData.get("email");
+										clearMessage();
+
+										// GET authentication options from the endpoint that calls
+										// @simplewebauthn/server -> generateAuthenticationOptions()
+										const resp = await fetch(
+											"./passkey/authenticate-options?userId=" + email + "&rpID=" + rpID
+										);
+
+										const optionsJSON = await resp.json();
+
+										if (optionsJSON.error) {
+											showMessage(optionsJSON.error);
+											return;
+										}
+
+										let attResp;
+										try {
+											// Pass the options to the authenticator and wait for a response
+											attResp = await startAuthentication({ optionsJSON });
+										} catch (error) {
+											showMessage(error);
+											throw error;
+										}
+										
+										const verificationResp = await fetch(
+											"./passkey/authenticate-verify?userId=" +
+												email +
+												"&rpID=" +
+												rpID +
+												"&origin=" +
+												origin,
+											{
+												method: "POST",
+												headers: {
+													"Content-Type": "application/json",
+												},
+												body: JSON.stringify(attResp),
+											}
+										);
+										
+										// Check if the request was redirected and the final response is OK
+										if (verificationResp.redirected && verificationResp.ok) {
+											// Navigate the browser to the final URL
+											window.location.href = verificationResp.url;
+										} else {
+											// Handle errors (e.g., 4xx, 5xx status codes from the final URL)
+											console.error(
+												"Request failed:",
+												verificationResp.status,
+												verificationResp.statusText
+											);
+											try {
+												const errorData = await verificationResp.json();
+												showMessage(errorData.error);
+											} catch (error) {
+												showMessage("Something went wrong");
+											}
+										}
+									});
+								});
+							` } }),
+				/* @__PURE__ */ jsx("h1", { children: copy.authorize_title }),
+				/* @__PURE__ */ jsx("p", { children: copy.authorize_description }),
+				/* @__PURE__ */ jsxs("form", {
+					id: "authorizeForm",
+					"data-component": "form",
+					children: [
+						/* @__PURE__ */ jsx(FormAlert, {}),
+						/* @__PURE__ */ jsx("input", {
+							"data-component": "input",
+							type: "email",
+							name: "email",
+							required: true,
+							placeholder: copy.input_email
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							id: "btnLogin",
+							"data-component": "button",
+							children: copy.login_with_passkey
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-component": "form-footer",
+							children: /* @__PURE__ */ jsxs("span", { children: [
+								copy.register_prompt,
+								" ",
+								/* @__PURE__ */ jsx("a", {
+									"data-component": "link",
+									href: "./register",
+									children: copy.register
+								})
+							] })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("script", { src: "https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js" })
+			] });
+			return new Response(renderToHTML(jsx$1), {
+				status: 200,
+				headers: { "Content-Type": "text/html" }
+			});
+		},
+		register: async () => {
+			const jsx$1 = /* @__PURE__ */ jsxs(Layout, { children: [
+				/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `
+								window.addEventListener("load", async () => {
+									const { startRegistration } = SimpleWebAuthnBrowser;
+									const registerForm = document.getElementById("registerForm");
+									const origin = window.location.origin;
+									const rpID = window.location.hostname;
+									
+									const showMessage = (msg) => {
+										const messageEl = document.querySelector("[data-slot='message']");
+										if (messageEl) {
+											messageEl.innerHTML = msg;
+										} else {
+											// Create alert if it doesn't exist
+											const alertDiv = document.createElement("div");
+											alertDiv.setAttribute("data-component", "form-alert");
+											alertDiv.setAttribute("role", "alert");
+											alertDiv.setAttribute("aria-live", "polite");
+											alertDiv.setAttribute("data-color", "error");
+											alertDiv.innerHTML = '<span data-slot="message">' + msg + '</span>';
+											registerForm.insertBefore(alertDiv, registerForm.firstChild);
+										}
+									};
+									
+									const clearMessage = () => {
+										const alertDiv = document.querySelector("[data-component='form-alert']");
+										if (alertDiv) {
+											alertDiv.remove();
+										}
+									};
+									
+									// Start registration when the user clicks a button
+									const register = async (otherDevice = false) => {
+										const formData = new FormData(registerForm);
+										const email = formData.get("email");
+										clearMessage();
+
+										// GET registration options from the endpoint that calls
+										// @simplewebauthn/server -> generateRegistrationOptions()
+										const resp = await fetch(
+											"./passkey/register-request?userId=" +
+												email +
+												"&origin=" +
+												origin +
+												"&rpID=" +
+												rpID +
+												"&otherDevice=" +
+												otherDevice,
+										);
+										const optionsJSON = await resp.json();
+
+										if (optionsJSON.error) {
+											showMessage(optionsJSON.error);
+											return;
+										}
+
+										let attResp;
+										try {
+											// Pass the options to the authenticator and wait for a response
+											attResp = await startRegistration({ optionsJSON });
+										} catch (error) {
+											showMessage(error);
+											throw error;
+										}
+
+										// POST the response to the endpoint that calls
+										// @simplewebauthn/server -> verifyRegistrationResponse()
+										try {
+											const verificationResp = await fetch(
+												"./passkey/register-verify?userId=" +
+													email +
+													"&origin=" +
+													origin +
+													"&rpID=" +
+													rpID,
+												{
+													method: "POST",
+													headers: {
+														"Content-Type": "application/json",
+													},
+													body: JSON.stringify(attResp),
+												}
+											);
+
+											// Check if the request was redirected and the final response is OK
+											if (verificationResp.redirected && verificationResp.ok) {
+												// Navigate the browser to the final URL
+												window.location.href = verificationResp.url;
+											} else {
+												// Handle errors (e.g., 4xx, 5xx status codes from the final URL)
+												console.error(
+													"Request failed:",
+													verificationResp.status,
+													verificationResp.statusText
+												);
+												try {
+													const errorData = await verificationResp.json();
+													showMessage(errorData.error);
+												} catch (error) {
+													showMessage("Something went wrong");
+												}
+											}
+										} catch (error) {
+											console.error(error);
+											showMessage("Something went wrong");
+										}
+									};
+									
+									registerForm.addEventListener("submit", (e) => {
+										e.preventDefault();
+										register();
+									});
+								});
+							` } }),
+				/* @__PURE__ */ jsx("h1", { children: copy.register_title }),
+				/* @__PURE__ */ jsx("p", { children: copy.register_description }),
+				/* @__PURE__ */ jsxs("form", {
+					id: "registerForm",
+					"data-component": "form",
+					children: [
+						/* @__PURE__ */ jsx(FormAlert, {}),
+						/* @__PURE__ */ jsx("input", {
+							"data-component": "input",
+							type: "email",
+							name: "email",
+							required: true,
+							placeholder: copy.input_email
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"data-component": "button",
+							type: "submit",
+							id: "btnRegister",
+							children: copy.register_with_passkey
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"data-component": "button",
+							type: "submit",
+							id: "btnOtherDevice",
+							children: copy.register_other_device
+						}),
+						/* @__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__ */ jsx("script", { src: "https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js" })
+			] });
+			return new Response(renderToHTML(jsx$1), {
+				status: 200,
+				headers: { "Content-Type": "text/html" }
+			});
+		},
+		rpName,
+		rpID,
+		origin,
+		userCanRegisterPasskey,
+		authenticatorSelection,
+		attestationType,
+		timeout
+	};
+};
+
+//#endregion
+export { PasskeyUI };

package/dist/ui/select.js

@@ -26,6 +26,7 @@ const DEFAULT_DISPLAYS = {
 	github: "GitHub",
 	google: "Google",
 	code: "Code",
+	passkey: "Passkey",
 	password: "Password"
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftlab/auth",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "Core implementation for @draftlab/auth",
   "author": "Matheus Pergoli",
@@ -37,7 +37,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.0.14",
     "tsdown": "^0.12.9",
     "typescript": "^5.8.3",
     "@draftlab/tsconfig": "0.1.0"
@@ -55,8 +55,9 @@
     }
   },
   "dependencies": {
+    "@simplewebauthn/server": "^13.1.2",
     "@standard-schema/spec": "^1.0.0",
-    "jose": "^6.0.11",
+    "jose": "^6.0.12",
     "preact": "^10.26.9",
     "preact-render-to-string": "^6.5.13",
     "@draftlab/auth-router": "0.0.4"