feat(ux): ✨ allow user to deactivate passkey for login

.vscode/settings.json

@@ -28,7 +28,7 @@
 	],
 	"cssvar.enable": true,
 	"cssvar.files": ["./_fresh/*"],
-	"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api"],
+	"conventionalCommits.scopes": ["css", "config", "ui", "pwa", "api", "ux"],
 	"[ignore]": {
 		"editor.defaultFormatter": "foxundermoon.shell-format"
 	}

islands/LoginForm.tsx

@@ -9,7 +9,12 @@ import { requestApi } from '../src/utils.ts'
 
 export default function LoginForm() {
 	return (
-		<form onSubmit={connect} method='POST' action=''>
+		<form
+			onSubmit={connect}
+			method='POST'
+			action=''
+			className='island__login_form__form'
+		>
 			<Input
 				label='Email'
 				name='email'
@@ -17,13 +22,20 @@ export default function LoginForm() {
 				type='email'
 				required
 			/>
-			<Button label='Connection' variant='primary'>Connection</Button>
+			<Input
+				label='Utiliser une Passkey'
+				name='passkey'
+				type='checkbox'
+				checked
+			/>
+			<Button label='Me connecter' variant='primary'>Me connecter</Button>
 		</form>
 	)
 }
 
 type LoginFormFields = {
 	email: string
+	passkey: boolean
 }
 
 async function connect(event: Event) {
@@ -33,6 +45,11 @@ async function connect(event: Event) {
 	const fields = formJSON<LoginFormFields>(form)
 
 	try {
+		// User disable passkey
+		if (!fields.passkey) {
+			throw new Error('User refused passkey')
+		}
+
 		// Try PassKey connection
 		if (!isWebAuthnSupported()) {
 			throw new Error('WebAuthn is not supported by your browser')
@@ -77,7 +94,7 @@ async function webAuthnLogin(fields: LoginFormFields) {
 	const verification = await requestApi<
 		WebAuthnLoginFinishPayload,
 		{ verified: boolean }
-	>('webauthn/login/finish', 'POST', { ...fields, authentication })
+	>('webauthn/login/finish', 'POST', authentication)
 
 	// Show UI appropriate for the `verified` status
 	if (verification.verified) {