feat(auth): add WebAuthn/Passkey support across all apps

Implements passwordless authentication via passkeys using @simplewebauthn:

Backend (mana-core-auth):
- New passkeys table in auth schema (credentialId, publicKey, counter, etc.)
- PasskeyService with registration/authentication flows and challenge storage
- 7 new API endpoints (register, authenticate, list, delete, rename)
- createSessionAndTokens helper for non-password auth flows
- Security event types for passkey operations

Client (shared-auth):
- signInWithPasskey() and registerPasskey() with dynamic @simplewebauthn/browser imports
- isPasskeyAvailable() browser capability check
- Passkey management methods (list, delete, rename)

UI (shared-auth-ui):
- Passkey button on LoginPage with key icon, shown when browser supports WebAuthn
- Divider between passkey and email/password form

App integration:
- All 19 web app auth stores have isPasskeyAvailable() and signInWithPasskey()
- All 19 web app login pages pass passkeyAvailable and onSignInWithPasskey props
- rpID=mana.how in production enables cross-app passkey usage (SSO-compatible)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/calendar/apps/web/src/lib/stores/auth.svelte.ts

@@ -118,6 +118,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/calendar/apps/web/src/routes/(auth)/login/+page.svelte

@@ -56,6 +56,8 @@
 	primaryColor="#0ea5e9"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/chat/apps/web/src/lib/stores/auth.svelte.ts

@@ -118,6 +118,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/chat/apps/web/src/routes/(auth)/login/+page.svelte

@@ -63,6 +63,8 @@
 	primaryColor="#0ea5e9"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/citycorners/apps/web/src/lib/stores/auth.svelte.ts

@@ -105,6 +105,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/citycorners/apps/web/src/routes/(auth)/login/+page.svelte

@@ -47,6 +47,8 @@
 	primaryColor="#2563eb"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/clock/apps/web/src/lib/stores/auth.svelte.ts

@@ -118,6 +118,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/clock/apps/web/src/routes/(auth)/login/+page.svelte

@@ -54,6 +54,8 @@
 	primaryColor="#f59e0b"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/contacts/apps/web/src/lib/stores/auth.svelte.ts

@@ -118,6 +118,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/contacts/apps/web/src/routes/(auth)/login/+page.svelte

@@ -53,6 +53,8 @@
 	primaryColor="#3b82f6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/context/apps/web/src/lib/stores/auth.svelte.ts

@@ -106,6 +106,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/context/apps/web/src/routes/(auth)/login/+page.svelte

@@ -48,6 +48,8 @@
 	primaryColor="#0ea5e9"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/manacore/apps/web/src/lib/stores/auth.svelte.ts

@@ -101,6 +101,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/manacore/apps/web/src/routes/(auth)/login/+page.svelte

@@ -32,6 +32,8 @@
 	primaryColor="#6366f1"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect="/dashboard"
 	registerPath="/register"

apps/manadeck/apps/web/src/lib/stores/auth.svelte.ts

@@ -93,6 +93,20 @@ export const authStore = {
 		return true;
 	},
 
+	isPasskeyAvailable(): boolean {
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const result = await authService.signInWithPasskey();
+		if (result.success) {
+			const userData = await authService.getUserFromToken();
+			user = toManaUser(userData);
+		}
+		return result;
+	},
+
+	/**
 	/**
 	 * Sign in with email and password
 	 */

apps/manadeck/apps/web/src/routes/(auth)/login/+page.svelte

@@ -32,6 +32,8 @@
 	primaryColor="#8b5cf6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect="/decks"
 	registerPath="/register"

apps/mukke/apps/web/src/lib/stores/auth.svelte.ts

@@ -107,6 +107,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/mukke/apps/web/src/routes/(auth)/login/+page.svelte

@@ -50,6 +50,8 @@
 	primaryColor="#f97316"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts

@@ -116,6 +116,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/nutriphi/apps/web/src/routes/(auth)/login/+page.svelte

@@ -52,6 +52,8 @@
 	primaryColor="#22C55E"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/photos/apps/web/src/lib/stores/auth.svelte.ts

@@ -109,6 +109,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/photos/apps/web/src/routes/(auth)/login/+page.svelte

@@ -43,6 +43,8 @@
 	primaryColor="#8b5cf6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/picture/apps/web/src/lib/stores/auth.svelte.ts

@@ -116,6 +116,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/picture/apps/web/src/routes/auth/login/+page.svelte

@@ -36,6 +36,8 @@
 	primaryColor="#3b82f6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect="/app/gallery"
 	registerPath="/auth/signup"

apps/planta/apps/web/src/lib/stores/auth.svelte.ts

@@ -115,6 +115,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/planta/apps/web/src/routes/(auth)/login/+page.svelte

@@ -52,6 +52,8 @@
 	primaryColor="#22c55e"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/playground/apps/web/src/lib/stores/auth.svelte.ts

@@ -84,6 +84,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) throw new Error('Auth not initialized');

apps/playground/apps/web/src/routes/(auth)/login/+page.svelte

@@ -34,6 +34,8 @@
 	primaryColor="#06b6d4"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/presi/apps/web/src/lib/stores/auth.svelte.ts

@@ -115,6 +115,43 @@ export const auth = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/presi/apps/web/src/routes/(auth)/login/+page.svelte

@@ -40,6 +40,8 @@
 	primaryColor="#f97316"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={auth.isPasskeyAvailable()}
+	onSignInWithPasskey={() => auth.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/questions/apps/web/src/lib/stores/auth.svelte.ts

@@ -113,6 +113,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/questions/apps/web/src/routes/(auth)/login/+page.svelte

@@ -58,6 +58,8 @@
 	primaryColor="#8b5cf6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/skilltree/apps/web/src/lib/stores/auth.svelte.ts

@@ -117,6 +117,35 @@ export const authStore = {
 		}
 	},
 
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	async signIn(email: string, password: string) {
 		const authService = getAuthService();
 		if (!authService) {

apps/skilltree/apps/web/src/routes/(auth)/login/+page.svelte

@@ -58,6 +58,8 @@
 	primaryColor="#10b981"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/storage/apps/web/src/lib/stores/auth.svelte.ts

@@ -114,6 +114,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/todo/apps/web/src/lib/stores/auth.svelte.ts

@@ -129,6 +129,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/todo/apps/web/src/routes/(auth)/login/+page.svelte

@@ -55,6 +55,8 @@
 	primaryColor="#8b5cf6"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"

apps/zitare/apps/web/src/lib/stores/auth.svelte.ts

@@ -118,6 +118,43 @@ export const authStore = {
 		}
 	},
 
+	/**
+	/**
+	 * Check if passkeys are available in this browser
+	 */
+	isPasskeyAvailable(): boolean {
+		const authService = getAuthService();
+		if (!authService) return false;
+		return authService.isPasskeyAvailable();
+	},
+
+	/**
+	 * Sign in with a passkey
+	 */
+	async signInWithPasskey() {
+		const authService = getAuthService();
+		if (!authService) {
+			return { success: false, error: 'Auth not available on server' };
+		}
+
+		try {
+			const result = await authService.signInWithPasskey();
+
+			if (!result.success) {
+				return { success: false, error: result.error || 'Passkey authentication failed' };
+			}
+
+			// Get user data from token
+			const userData = await authService.getUserFromToken();
+			user = userData;
+
+			return { success: true };
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+			return { success: false, error: errorMessage };
+		}
+	},
+
 	/**
 	 * Sign in with email and password
 	 */

apps/zitare/apps/web/src/routes/(auth)/login/+page.svelte

@@ -53,6 +53,8 @@
 	primaryColor="#f59e0b"
 	onSignIn={handleSignIn}
 	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
 	{goto}
 	successRedirect={redirectTo}
 	registerPath="/register"