feat(auth): UX improvements for passkeys, 2FA, and password management

1. Passkey Conditional UI: autocomplete="username webauthn" on email
   field enables browser passkey suggestions in autofill dropdown
2. Trust Device checkbox: "Diesem Gerät 30 Tage vertrauen" option
   during 2FA verification (uses Better Auth trust_device cookie)
3. Local QR code generation: replaced external api.qrserver.com with
   local qrcode package for 2FA setup (no external dependency)
4. SecurityOnboarding component: post-registration wizard suggesting
   passkey setup to new users
5. ChangePassword component: reusable password change form with
   validation, visibility toggles, and changePassword() in authService

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

packages/shared-auth-ui/src/components/ChangePassword.svelte

@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { Eye, EyeSlash } from '@manacore/shared-icons';
+
+	interface Props {
+		onChangePassword: (
+			currentPassword: string,
+			newPassword: string
+		) => Promise<{ success: boolean; error?: string }>;
+		primaryColor?: string;
+	}
+
+	let { onChangePassword, primaryColor = '#6366f1' }: Props = $props();
+
+	let currentPassword = $state('');
+	let newPassword = $state('');
+	let confirmPassword = $state('');
+	let showCurrentPassword = $state(false);
+	let showNewPassword = $state(false);
+	let showConfirmPassword = $state(false);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	let passwordsMatch = $derived(newPassword === confirmPassword);
+	let passwordLongEnough = $derived(newPassword.length >= 8);
+	let canSubmit = $derived(
+		currentPassword.length > 0 && passwordLongEnough && passwordsMatch && !loading
+	);
+
+	function reset() {
+		currentPassword = '';
+		newPassword = '';
+		confirmPassword = '';
+		showCurrentPassword = false;
+		showNewPassword = false;
+		showConfirmPassword = false;
+		error = null;
+	}
+
+	async function handleSubmit() {
+		if (!canSubmit) return;
+
+		loading = true;
+		error = null;
+		success = false;
+
+		const result = await onChangePassword(currentPassword, newPassword);
+		loading = false;
+
+		if (result.success) {
+			success = true;
+			reset();
+			setTimeout(() => (success = false), 4000);
+		} else {
+			error = result.error || 'Fehler beim Ändern des Passworts';
+		}
+	}
+</script>
+
+<div class="change-password">
+	<h3 class="section-title">Passwort ändern</h3>
+
+	{#if success}
+		<div class="success-message" role="status">
+			<p>Passwort erfolgreich geändert.</p>
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="error-message" role="alert">
+			<p>{error}</p>
+		</div>
+	{/if}
+
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSubmit();
+		}}
+	>
+		<div class="input-group">
+			<label for="current-password" class="input-label">Aktuelles Passwort</label>
+			<div class="input-wrapper">
+				<input
+					id="current-password"
+					type={showCurrentPassword ? 'text' : 'password'}
+					bind:value={currentPassword}
+					required
+					autocomplete="current-password"
+					class="input-field has-icon"
+					style:--ring-color={primaryColor}
+				/>
+				<button
+					type="button"
+					onclick={() => (showCurrentPassword = !showCurrentPassword)}
+					class="password-toggle"
+					aria-label={showCurrentPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+				>
+					{#if showCurrentPassword}
+						<EyeSlash size={18} />
+					{:else}
+						<Eye size={18} />
+					{/if}
+				</button>
+			</div>
+		</div>
+
+		<div class="input-group">
+			<label for="new-password" class="input-label">Neues Passwort</label>
+			<div class="input-wrapper">
+				<input
+					id="new-password"
+					type={showNewPassword ? 'text' : 'password'}
+					bind:value={newPassword}
+					required
+					autocomplete="new-password"
+					class="input-field has-icon"
+					class:input-error={newPassword.length > 0 && !passwordLongEnough}
+					style:--ring-color={primaryColor}
+				/>
+				<button
+					type="button"
+					onclick={() => (showNewPassword = !showNewPassword)}
+					class="password-toggle"
+					aria-label={showNewPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+				>
+					{#if showNewPassword}
+						<EyeSlash size={18} />
+					{:else}
+						<Eye size={18} />
+					{/if}
+				</button>
+			</div>
+			{#if newPassword.length > 0 && !passwordLongEnough}
+				<p class="field-hint error">Mindestens 8 Zeichen</p>
+			{:else}
+				<p class="field-hint">Mindestens 8 Zeichen</p>
+			{/if}
+		</div>
+
+		<div class="input-group">
+			<label for="confirm-password" class="input-label">Neues Passwort bestätigen</label>
+			<div class="input-wrapper">
+				<input
+					id="confirm-password"
+					type={showConfirmPassword ? 'text' : 'password'}
+					bind:value={confirmPassword}
+					required
+					autocomplete="new-password"
+					class="input-field has-icon"
+					class:input-error={confirmPassword.length > 0 && !passwordsMatch}
+					style:--ring-color={primaryColor}
+				/>
+				<button
+					type="button"
+					onclick={() => (showConfirmPassword = !showConfirmPassword)}
+					class="password-toggle"
+					aria-label={showConfirmPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+				>
+					{#if showConfirmPassword}
+						<EyeSlash size={18} />
+					{:else}
+						<Eye size={18} />
+					{/if}
+				</button>
+			</div>
+			{#if confirmPassword.length > 0 && !passwordsMatch}
+				<p class="field-hint error">Passwörter stimmen nicht überein</p>
+			{/if}
+		</div>
+
+		<button
+			type="submit"
+			disabled={!canSubmit}
+			class="submit-button"
+			style:background-color={primaryColor + '60'}
+			style:border-color={primaryColor}
+		>
+			{loading ? 'Wird geändert...' : 'Passwort ändern'}
+		</button>
+	</form>
+</div>
+
+<style>
+	.change-password {
+		padding: 1rem;
+		border-radius: 0.75rem;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(255, 255, 255, 0.05);
+	}
+
+	:global(.light) .change-password {
+		border-color: rgba(0, 0, 0, 0.1);
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.section-title {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0 0 1rem;
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	:global(.light) .section-title {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.success-message {
+		padding: 0.625rem 0.75rem;
+		margin-bottom: 0.75rem;
+		border-radius: 0.5rem;
+		background: rgba(34, 197, 94, 0.15);
+		border: 1px solid rgba(34, 197, 94, 0.3);
+		color: #22c55e;
+		font-size: 0.8125rem;
+	}
+
+	.success-message p {
+		margin: 0;
+	}
+
+	.error-message {
+		padding: 0.625rem 0.75rem;
+		margin-bottom: 0.75rem;
+		border-radius: 0.5rem;
+		background: rgba(239, 68, 68, 0.15);
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		color: #ef4444;
+		font-size: 0.8125rem;
+	}
+
+	.error-message p {
+		margin: 0;
+	}
+
+	.input-group {
+		margin-bottom: 0.75rem;
+	}
+
+	.input-label {
+		display: block;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		margin-bottom: 0.375rem;
+		color: rgba(255, 255, 255, 0.7);
+	}
+
+	:global(.light) .input-label {
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.input-wrapper {
+		position: relative;
+	}
+
+	.input-field {
+		width: 100%;
+		height: 2.75rem;
+		padding: 0 0.75rem;
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		border-radius: 0.5rem;
+		font-size: 0.9375rem;
+		background: rgba(0, 0, 0, 0.2);
+		color: #fff;
+		transition:
+			border-color 0.2s,
+			box-shadow 0.2s;
+	}
+
+	:global(.light) .input-field {
+		background: rgba(255, 255, 255, 0.8);
+		border-color: rgba(0, 0, 0, 0.1);
+		color: #000;
+	}
+
+	.input-field.has-icon {
+		padding-right: 2.75rem;
+	}
+
+	.input-field:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--ring-color, currentColor);
+	}
+
+	.input-field.input-error {
+		border-color: #ef4444;
+	}
+
+	.password-toggle {
+		position: absolute;
+		right: 0.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+		background: none;
+		border: none;
+		color: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		padding: 0.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.light) .password-toggle {
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.password-toggle:hover {
+		color: rgba(255, 255, 255, 0.8);
+	}
+
+	:global(.light) .password-toggle:hover {
+		color: rgba(0, 0, 0, 0.8);
+	}
+
+	.field-hint {
+		font-size: 0.75rem;
+		margin: 0.25rem 0 0;
+		color: rgba(255, 255, 255, 0.4);
+	}
+
+	:global(.light) .field-hint {
+		color: rgba(0, 0, 0, 0.4);
+	}
+
+	.field-hint.error {
+		color: #ef4444;
+	}
+
+	.submit-button {
+		width: 100%;
+		height: 2.75rem;
+		border: 2px solid;
+		border-radius: 0.5rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: opacity 0.2s;
+		color: rgba(255, 255, 255, 0.9);
+		margin-top: 0.5rem;
+	}
+
+	:global(.light) .submit-button {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.submit-button:hover:not(:disabled) {
+		opacity: 0.8;
+	}
+
+	.submit-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

packages/shared-auth-ui/src/components/SecurityOnboarding.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	interface Props {
+		onSetupPasskey?: () => Promise<{ success: boolean; error?: string }>;
+		onSkip: () => void;
+		passkeyAvailable: boolean;
+		primaryColor?: string;
+	}
+
+	let { onSetupPasskey, onSkip, passkeyAvailable, primaryColor = '#6366f1' }: Props = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	async function handleSetupPasskey() {
+		if (!onSetupPasskey) return;
+		loading = true;
+		error = null;
+
+		const result = await onSetupPasskey();
+		loading = false;
+
+		if (result.success) {
+			success = true;
+		} else {
+			error = result.error || 'Fehler beim Einrichten des Passkeys';
+		}
+	}
+</script>
+
+<div class="onboarding-container">
+	{#if success}
+		<div class="onboarding-card">
+			<div class="icon-circle success-icon">
+				<svg
+					width="32"
+					height="32"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<polyline points="20 6 9 17 4 12" />
+				</svg>
+			</div>
+			<h2 class="onboarding-title">Passkey eingerichtet!</h2>
+			<p class="onboarding-description">
+				Dein Konto ist jetzt mit einem Passkey gesichert. Du kannst dich ab sofort ohne Passwort
+				anmelden.
+			</p>
+			<button
+				type="button"
+				class="primary-button"
+				style:background-color={primaryColor + '60'}
+				style:border-color={primaryColor}
+				onclick={onSkip}
+			>
+				Weiter
+			</button>
+		</div>
+	{:else}
+		<div class="onboarding-card">
+			<div class="icon-circle" style:border-color={primaryColor}>
+				<svg
+					width="32"
+					height="32"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+					<path d="M7 11V7a5 5 0 0 1 10 0v4" />
+				</svg>
+			</div>
+			<h2 class="onboarding-title">Sichere dein Konto</h2>
+			<p class="onboarding-description">Schütze dein Konto mit zusätzlicher Sicherheit.</p>
+
+			{#if error}
+				<div class="error-message" role="alert">
+					<p>{error}</p>
+				</div>
+			{/if}
+
+			{#if passkeyAvailable && onSetupPasskey}
+				<div class="option-card">
+					<div class="option-icon">
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
+							<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+						</svg>
+					</div>
+					<div class="option-content">
+						<h3 class="option-title">Passkey einrichten</h3>
+						<p class="option-description">
+							Anmelden ohne Passwort mit Touch ID, Face ID oder Windows Hello
+						</p>
+					</div>
+					<button
+						type="button"
+						class="setup-button"
+						style:background-color={primaryColor + '60'}
+						style:border-color={primaryColor}
+						disabled={loading}
+						onclick={handleSetupPasskey}
+					>
+						{loading ? '...' : 'Jetzt einrichten'}
+					</button>
+				</div>
+			{/if}
+
+			<p class="hint-text">Du kannst 2FA jederzeit in den Einstellungen aktivieren.</p>
+
+			<button type="button" class="skip-button" onclick={onSkip}> Überspringen </button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.onboarding-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem 1rem;
+	}
+
+	.onboarding-card {
+		width: 100%;
+		max-width: 24rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		padding: 2rem;
+		border-radius: 1rem;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(255, 255, 255, 0.05);
+	}
+
+	:global(.light) .onboarding-card {
+		border-color: rgba(0, 0, 0, 0.1);
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.icon-circle {
+		width: 4rem;
+		height: 4rem;
+		border-radius: 50%;
+		border: 2px solid rgba(255, 255, 255, 0.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 1.25rem;
+		color: rgba(255, 255, 255, 0.8);
+	}
+
+	:global(.light) .icon-circle {
+		border-color: rgba(0, 0, 0, 0.15);
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.success-icon {
+		border-color: #22c55e;
+		color: #22c55e;
+	}
+
+	.onboarding-title {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 0 0 0.5rem;
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	:global(.light) .onboarding-title {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.onboarding-description {
+		font-size: 0.875rem;
+		color: rgba(255, 255, 255, 0.6);
+		margin: 0 0 1.5rem;
+		line-height: 1.5;
+	}
+
+	:global(.light) .onboarding-description {
+		color: rgba(0, 0, 0, 0.6);
+	}
+
+	.error-message {
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		margin-bottom: 1rem;
+		border-radius: 0.5rem;
+		background: rgba(239, 68, 68, 0.15);
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		color: #ef4444;
+		font-size: 0.8125rem;
+		text-align: left;
+	}
+
+	.error-message p {
+		margin: 0;
+	}
+
+	.option-card {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 1.25rem;
+		border-radius: 0.75rem;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(255, 255, 255, 0.05);
+		margin-bottom: 1rem;
+	}
+
+	:global(.light) .option-card {
+		border-color: rgba(0, 0, 0, 0.1);
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.option-icon {
+		color: rgba(255, 255, 255, 0.7);
+	}
+
+	:global(.light) .option-icon {
+		color: rgba(0, 0, 0, 0.6);
+	}
+
+	.option-content {
+		text-align: center;
+	}
+
+	.option-title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		margin: 0 0 0.25rem;
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	:global(.light) .option-title {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.option-description {
+		font-size: 0.8125rem;
+		color: rgba(255, 255, 255, 0.5);
+		margin: 0;
+		line-height: 1.4;
+	}
+
+	:global(.light) .option-description {
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.setup-button {
+		width: 100%;
+		height: 2.5rem;
+		border: 2px solid;
+		border-radius: 0.5rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: opacity 0.2s;
+		color: rgba(255, 255, 255, 0.9);
+		background: transparent;
+	}
+
+	:global(.light) .setup-button {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.setup-button:hover:not(:disabled) {
+		opacity: 0.8;
+	}
+
+	.setup-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.hint-text {
+		font-size: 0.8125rem;
+		color: rgba(255, 255, 255, 0.4);
+		margin: 0 0 1.25rem;
+	}
+
+	:global(.light) .hint-text {
+		color: rgba(0, 0, 0, 0.4);
+	}
+
+	.skip-button {
+		background: none;
+		border: none;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		padding: 0.5rem 1rem;
+		transition: color 0.2s;
+	}
+
+	:global(.light) .skip-button {
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.skip-button:hover {
+		color: rgba(255, 255, 255, 0.8);
+	}
+
+	:global(.light) .skip-button:hover {
+		color: rgba(0, 0, 0, 0.8);
+	}
+
+	.primary-button {
+		width: 100%;
+		height: 2.75rem;
+		border: 2px solid;
+		border-radius: 0.5rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: opacity 0.2s;
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	:global(.light) .primary-button {
+		color: rgba(0, 0, 0, 0.9);
+	}
+
+	.primary-button:hover {
+		opacity: 0.8;
+	}
+</style>

packages/shared-auth-ui/src/components/TwoFactorSetup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import QRCode from 'qrcode';
 	import type { AuthResult } from '../types';
 
 	export interface TwoFactorSetupTranslations {
@@ -94,6 +95,15 @@
 	let backupCodes = $state<string[]>([]);
 	let copied = $state(false);
 	let codesCopied = $state(false);
+	let qrCodeDataUrl = $state('');
+
+	$effect(() => {
+		if (totpURI) {
+			QRCode.toDataURL(totpURI, { width: 200, margin: 2 }).then((url: string) => {
+				qrCodeDataUrl = url;
+			});
+		}
+	});
 
 	/** Extract the secret from an otpauth:// URI */
 	function extractSecret(uri: string): string {
@@ -299,15 +309,17 @@
 
 			{#if totpURI}
 				<div class="qr-section">
-					<img
-						src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data={encodeURIComponent(
-							totpURI
-						)}"
-						alt="QR Code for TOTP setup"
-						width="200"
-						height="200"
-						class="qr-image"
-					/>
+					{#if qrCodeDataUrl}
+						<img
+							src={qrCodeDataUrl}
+							alt="QR Code for TOTP setup"
+							width="200"
+							height="200"
+							class="qr-image"
+						/>
+					{:else}
+						<div class="qr-placeholder" style:width="200px" style:height="200px"></div>
+					{/if}
 				</div>
 
 				<div class="manual-entry">
@@ -605,6 +617,14 @@
 		padding: 0.5rem;
 	}
 
+	.qr-placeholder {
+		border-radius: 0.5rem;
+		background: rgba(255, 255, 255, 0.1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	.manual-entry {
 		margin-top: 0.75rem;
 	}

packages/shared-auth-ui/src/index.ts

@@ -10,6 +10,8 @@ export { default as SessionExpiredBanner } from './components/SessionExpiredBann
 export { default as AuthGate } from './components/AuthGate.svelte';
 export { default as PasskeyManager } from './components/PasskeyManager.svelte';
 export { default as TwoFactorSetup } from './components/TwoFactorSetup.svelte';
+export { default as SecurityOnboarding } from './components/SecurityOnboarding.svelte';
+export { default as ChangePassword } from './components/ChangePassword.svelte';
 
 // Utilities
 export {

packages/shared-auth-ui/src/pages/LoginPage.svelte

@@ -144,6 +144,7 @@
 	let showTwoFactor = $state(false);
 	let twoFactorCode = $state('');
 	let useBackupCode = $state(false);
+	let trustDevice = $state(false);
 
 	// Theme state - can be toggled manually, defaults to system preference
 	let userThemePreference = $state<'light' | 'dark' | null>(null);
@@ -276,13 +277,14 @@
 		loading = true;
 		clearError();
 
-		const handler = useBackupCode ? onVerifyBackupCode : onVerifyTwoFactor;
-		if (!handler) {
+		if ((useBackupCode && !onVerifyBackupCode) || (!useBackupCode && !onVerifyTwoFactor)) {
 			loading = false;
 			return;
 		}
 
-		const result = await handler(twoFactorCode);
+		const result = useBackupCode
+			? await onVerifyBackupCode!(twoFactorCode)
+			: await onVerifyTwoFactor!(twoFactorCode, trustDevice);
 		loading = false;
 
 		if (result.success) {
@@ -430,6 +432,17 @@
 							/>
 						</div>
 
+						{#if !useBackupCode}
+							<label class="remember-label" style:margin-bottom="1rem">
+								<input
+									type="checkbox"
+									bind:checked={trustDevice}
+									style:accent-color={primaryColor}
+								/>
+								<span>Diesem Gerät 30 Tage vertrauen</span>
+							</label>
+						{/if}
+
 						<button
 							type="submit"
 							disabled={loading || !twoFactorCode}
@@ -576,7 +589,7 @@
 								bind:value={email}
 								placeholder={t.emailPlaceholder}
 								required
-								autocomplete="email"
+								autocomplete={passkeyAvailable ? 'username webauthn' : 'email'}
 								aria-invalid={errorField === 'email'}
 								class="input-field"
 								class:input-error={errorField === 'email'}