From ac4bacada25b1e5b7267701f3b6002c652b9fa7e Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 26 Mar 2026 11:00:59 +0100
Subject: [PATCH] feat(manacore): integrate PasskeyManager in settings page

- Add passkey management methods to manacore authStore (register, list,
  delete, rename)
- PasskeyManager component in settings between Account and My Data
- Passkeys loaded on mount alongside credits

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/stores/auth.svelte.ts    | 24 +++++++++++++++++++
 .../src/routes/(app)/settings/+page.svelte    | 20 ++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/apps/manacore/apps/web/src/lib/stores/auth.svelte.ts b/apps/manacore/apps/web/src/lib/stores/auth.svelte.ts
index 89b112403..5f159f77f 100644
--- a/apps/manacore/apps/web/src/lib/stores/auth.svelte.ts
+++ b/apps/manacore/apps/web/src/lib/stores/auth.svelte.ts
@@ -138,6 +138,30 @@ export const authStore = {
 		}
 	},
 
+	async registerPasskey(friendlyName?: string) {
+		const authService = getAuthService();
+		if (!authService) return { success: false, error: 'Auth not available' };
+		return authService.registerPasskey(friendlyName);
+	},
+
+	async listPasskeys() {
+		const authService = getAuthService();
+		if (!authService) return [];
+		return authService.listPasskeys();
+	},
+
+	async deletePasskey(passkeyId: string) {
+		const authService = getAuthService();
+		if (!authService) return { success: false, error: 'Auth not available' };
+		return authService.deletePasskey(passkeyId);
+	},
+
+	async renamePasskey(passkeyId: string, friendlyName: string) {
+		const authService = getAuthService();
+		if (!authService) return { success: false, error: 'Auth not available' };
+		return authService.renamePasskey(passkeyId, friendlyName);
+	},
+
 	/**
 	 * Sign in with email and password
 	 */
diff --git a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
index 9b86f12fe..99d87441c 100644
--- a/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/settings/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button, Input, Card, PageHeader, GlobalSettingsSection } from '@manacore/shared-ui';
+	import { PasskeyManager } from '@manacore/shared-auth-ui';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { creditsService } from '$lib/api/credits';
 	import type { CreditBalance } from '$lib/api/credits';
@@ -10,6 +11,7 @@
 	import { ManaCoreEvents } from '@manacore/shared-utils/analytics';
 
 	let loading = $state(true);
+	let passkeys = $state<any[]>([]);
 	let savingProfile = $state(false);
 	let profileSuccess = $state(false);
 	let profileError = $state<string | null>(null);
@@ -25,6 +27,7 @@
 		if (authStore.isAuthenticated) {
 			try {
 				creditBalance = await creditsService.getBalance();
+				passkeys = await authStore.listPasskeys();
 				// Load user settings from server
 				await userSettings.load();
 			} catch (e) {
@@ -274,6 +277,23 @@
 				</div>
 			</Card>
 
+			<!-- Passkeys Section -->
+			<Card>
+				<div class="p-6">
+					<PasskeyManager
+						{passkeys}
+						passkeyAvailable={authStore.isPasskeyAvailable()}
+						onRegister={(name) => authStore.registerPasskey(name)}
+						onDelete={(id) => authStore.deletePasskey(id)}
+						onRename={(id, name) => authStore.renamePasskey(id, name)}
+						onRefresh={async () => {
+							passkeys = await authStore.listPasskeys();
+						}}
+						primaryColor="#6366f1"
+					/>
+				</div>
+			</Card>
+
 			<!-- My Data & Danger Zone -->
 			<Card>
 				<div class="p-6">