feat: Improve error handling and registration options for WebAuthn passkeys

- Enhanced error parsing in passkey login to extract specific error messages
- Updated registration options schema to include optional authenticator selection parameters
- Renamed schema from RegistrationResultSchema to RegistrationOptionsSchema for clarity

Author: kentcdodds

app/routes/_auth+/login.tsx

@@ -255,7 +255,21 @@ function PasskeyLogin({
 			})
 
 			if (!verificationResponse.ok) {
-				throw new Error('Failed to authenticate with passkey')
+				const json = await verificationResponse.json().catch(() => ({
+					status: 'error',
+					error: 'Unknown error',
+				}))
+				const parsed = z
+					.object({
+						status: z.literal('error'),
+						error: z.string(),
+					})
+					.safeParse(json)
+				if (parsed.success) {
+					throw new Error(parsed.data.error)
+				} else {
+					throw new Error('Unknown error')
+				}
 			}
 
 			const verificationJson = await verificationResponse.json()

app/routes/settings+/profile.passkeys.tsx

@@ -56,7 +56,7 @@ export async function action({ request }: Route.ActionArgs) {
 	)
 }
 
-const RegistrationResultSchema = z.object({
+const RegistrationOptionsSchema = z.object({
 	options: z.object({
 		rp: z.object({
 			id: z.string(),
@@ -74,6 +74,20 @@ const RegistrationResultSchema = z.object({
 				alg: z.number(),
 			}),
 		),
+		authenticatorSelection: z
+			.object({
+				authenticatorAttachment: z
+					.enum(['platform', 'cross-platform'])
+					.optional(),
+				residentKey: z
+					.enum(['required', 'preferred', 'discouraged'])
+					.optional(),
+				userVerification: z
+					.enum(['required', 'preferred', 'discouraged'])
+					.optional(),
+				requireResidentKey: z.boolean().optional(),
+			})
+			.optional(),
 	}),
 }) satisfies z.ZodType<{ options: PublicKeyCredentialCreationOptionsJSON }>
 
@@ -86,7 +100,7 @@ export default function Passkeys({ loaderData }: Route.ComponentProps) {
 			setError(null)
 			const resp = await fetch('/webauthn/registration')
 			const jsonResult = await resp.json()
-			const parsedResult = RegistrationResultSchema.parse(jsonResult)
+			const parsedResult = RegistrationOptionsSchema.parse(jsonResult)
 
 			const regResult = await startRegistration({
 				optionsJSON: parsedResult.options,