FE - Account Page Updates (2FA Passkey Sign-in Section)

Figma

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

Context

• For the Add 2FA when passkeys are on flow, we show the "Passkey sign-in section"
• Show when you have at least 1 passkey and 2FA disabled
• Button is always disabled and has a tooltip (TODO: Ask UX if there is alternative approach since it's confusing to always have a disabled button)

Implementation Plan

• Implement behind feature flag
• Implement show/hide logic for the section
• Implement Alert Banner
• Unit Tests

Backend Considerations

• List of passkeys, should be available as a ruby variable so we can inject to HAML or a view helper that returns a boolean if we have at least 1 passkey

• Passkey enabled/disabled 2FA state available as a ruby variable so we can inject into HAML. (Logic needs to be updated to account for Passkeys)

We should have the data available to frontend already, but need to re-confirm:

Ability to detect if 2FA is enabled:

• Ability to detect at least 1 webauthn device
• Ability to detect at least OTP enabled