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>
This commit is contained in:
Till JS 2026-03-26 21:15:09 +01:00
parent 69aa837898
commit 7073756117
8 changed files with 903 additions and 208 deletions

View file

@ -747,6 +747,37 @@ export function createAuthService(config: AuthServiceConfig) {
}
},
/**
* Change password
*/
async changePassword(currentPassword: string, newPassword: string): Promise<AuthResult> {
try {
const appToken = await service.getAppToken();
if (!appToken) return { success: false, error: 'Not authenticated' };
const response = await fetch(`${baseUrl}/api/v1/auth/change-password`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${appToken}`,
},
body: JSON.stringify({ currentPassword, newPassword }),
});
if (!response.ok) {
const err = await response.json().catch(() => ({}));
return { success: false, error: err.message || 'Failed to change password' };
}
return { success: true };
} catch (error) {
return {
success: false,
error: error instanceof Error ? error.message : 'Failed to change password',
};
}
},
/**
* Get the current app token
*/