FE - Sign-in with Passkey flow (With 2FA)

Figma

https://www.figma.com/design/h8xsQafKqKr205RSsJU5Wk/Passkeys?node-id=3593-46664&t=zrEbr0J6zqgtojSC-1

Context

• Log in flow when the passkey is used for 2FA
• See Figma: Sign-in With Passkey enabled as 2FA

Implementation Plan

• Feature flag out showing "Sign in with Passkey Button"
• Show remaining states from Figma, (native browser passkey modal, etc)
• Handle error states
• Add unit tests
• Can leverage WebAuthN Vue component.

Backend Considerations

• Need to leverage what we already do for WebAuthN Vue component. as form post.

• We need a way to know what kind of 2FA is enabled.
• Ideally we need exposed via HAML injection the type of 2FA options enabled, and if passkeys are available.

UX Considerations

• WebAuthn shows errors on the device selection page, discuss where UX errors surfaced.