@mrgnw/anahtar 0.0.29 → 0.0.30

package/dist/components/AuthPill.svelte

@@ -60,10 +60,25 @@ let isTouch = $state(false);
 let hoveredKey = $state<string | null>(null);
 let passkeyRefresh = $state(0);
 let passkeyOnboarding = $state(false);
-let conditionalAbort: AbortController | null = null;
+
+const PASSKEY_TIMEOUT_MS = 8000;
+// Captured from the lazy @simplewebauthn/browser import so onMount cleanup (sync)
+// and handleEmailSubmit can cancel an in-flight ceremony without re-importing.
+let webauthnAbort: { cancelCeremony: () => void } | null = null;
 
 const isAuthenticated = $derived(!!user);
 
+// Best-effort bound on a promise so a WebAuthn ceremony that never settles
+// (e.g. rpID mismatch on preview domains) can't wedge the sign-in flow.
+function raceTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	const timeout = new Promise<never>((_, reject) => {
+		timer = setTimeout(() => reject(new Error('timeout')), ms);
+	});
+	// Promise.race consumes the loser's later settlement, so no unhandled rejection.
+	return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+
 function shortDate(ts?: number): string {
 	if (!ts) return '';
 	const d = new Date(ts);
@@ -77,7 +92,7 @@ const passkeyPromise = $derived(
 onMount(() => {
 	isTouch = matchMedia('(pointer: coarse)').matches;
 	if (!isAuthenticated) tryConditionalWebAuthn();
-	return () => conditionalAbort?.abort();
+	return () => webauthnAbort?.cancelCeremony();
 });
 
 async function handleSignOut() {
@@ -94,40 +109,45 @@ async function handleSignOut() {
 
 async function tryConditionalWebAuthn() {
 	try {
-		const { startAuthentication } = await import('@simplewebauthn/browser');
+		const mod = await import('@simplewebauthn/browser');
+		webauthnAbort = mod.WebAuthnAbortService;
 		const res = await fetch(`${apiBase}/passkey/login-start`);
 		if (!res.ok) return;
 		const options = (await res.json()) as any;
-		conditionalAbort = new AbortController();
-		const authResponse = await startAuthentication({
+		const authResponse = await mod.startAuthentication({
 			optionsJSON: options,
 			useBrowserAutofill: true,
 		});
+		// Only reached when the user actually picks a passkey via autofill.
+		// Scope `loading` to the verify step so the abort path never touches it
+		// (an aborted ceremony throws straight to the catch below).
 		loading = true;
-		const verifyRes = await fetch(`${apiBase}/passkey/login-finish`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify(authResponse),
-		});
-		if (verifyRes.ok) await onSuccess?.();
+		try {
+			const verifyRes = await fetch(`${apiBase}/passkey/login-finish`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(authResponse),
+			});
+			if (verifyRes.ok) await onSuccess?.();
+		} finally {
+			loading = false;
+		}
 	} catch {
 		/* not available or cancelled */
-	} finally {
-		loading = false;
 	}
 }
 
 async function handleEmailSubmit(e: SubmitEvent) {
 	e.preventDefault();
 	if (!email.includes('@')) return;
-	conditionalAbort?.abort();
-	conditionalAbort = null;
+	webauthnAbort?.cancelCeremony();
 	loading = true;
 	error = '';
 	try {
 		// Passkey-first: check if user has passkeys before falling back to OTP
 		try {
-			const { startAuthentication } = await import('@simplewebauthn/browser');
+			const mod = await import('@simplewebauthn/browser');
+			webauthnAbort = mod.WebAuthnAbortService;
 			const checkRes = await fetch(`${apiBase}/passkey/check-email`, {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
@@ -137,7 +157,10 @@ async function handleEmailSubmit(e: SubmitEvent) {
 				const opts = (await checkRes.json()) as any;
 				if ((opts?.allowCredentials?.length ?? 0) > 0) {
 					try {
-						const authResp = await startAuthentication({ optionsJSON: opts });
+						const authResp = await raceTimeout(
+							mod.startAuthentication({ optionsJSON: opts }),
+							PASSKEY_TIMEOUT_MS,
+						);
 						const vRes = await fetch(`${apiBase}/passkey/login-finish`, {
 							method: 'POST',
 							headers: { 'Content-Type': 'application/json' },
@@ -148,7 +171,8 @@ async function handleEmailSubmit(e: SubmitEvent) {
 							return;
 						}
 					} catch {
-						/* cancelled */
+						mod.WebAuthnAbortService.cancelCeremony();
+						/* stalled, cancelled, or failed — fall through to OTP */
 					}
 				}
 			}
@@ -417,11 +441,13 @@ async function removePasskey(id: string) {
 					spellcheck="false"
 					disabled={loading}
 				/>
-			<button type="submit" class="anahtar-pill-go" disabled={loading || !email.includes('@')}>
+			<button type="submit" class="anahtar-pill-go" disabled={loading || !email.includes('@')} aria-label={m.continue}>
 				{#if loading}
-					...
+					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="anahtar-spinner" aria-hidden="true">
+						<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+					</svg>
 				{:else}
-					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 						<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
 					</svg>
 				{/if}
@@ -588,6 +614,11 @@ async function removePasskey(id: string) {
 	.anahtar-pill-go:disabled { opacity: 0.4; cursor: not-allowed; }
 	.anahtar-pill-go:hover:not(:disabled) { opacity: 0.85; }
 
+	@keyframes anahtar-spin {
+		to { transform: rotate(360deg); }
+	}
+	.anahtar-spinner { animation: anahtar-spin 0.8s linear infinite; }
+
 	/* OTP */
 	.anahtar-pill-otp-label {
 		font-size: 0.8125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrgnw/anahtar",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "Opinionated, reusable auth for SvelteKit. Email+OTP + passkeys.",
   "license": "MIT",
   "type": "module",
@@ -40,6 +40,10 @@
       "types": "./dist/db/d1.d.ts",
       "default": "./dist/db/d1.js"
     },
+    "./device": {
+      "types": "./dist/device.d.ts",
+      "default": "./dist/device.js"
+    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "svelte": "./dist/components/index.js",
@@ -64,7 +68,6 @@
     }
   },
   "dependencies": {
-    "@mrgnw/anahtar": "0.0.29-diagnostic.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@simplewebauthn/server": "^13.2.2"