corbado/javascript

Add password manager information to client side state

Adam3371 opened this issue · 0 comments

Adam3371 commented

Why

Sometimes it might not be clear to the user if he have created/used a passkey from a native provider (e.g. iCloud Keychaing, Windows Hello or Google Password Manager) or on a 3rd party Password Manager (e.g. 1Password, NordPass ect.)
In case that the user saves a passkey on a 3rd party password manager we want to assist the user by saving the information and provide additional information on the passkey-button.

In order to save the information about the saved passkey, use the AAGUID.

Draft on how the Information should be displayed can be found in this Fimga.

TODOS

(For this ticket the TODOS might not be 100% accurate, if you have a different/better implementation idea, talk to Adam, Martin or Stefan.)

  • At a signup/login with a successfully used passkey, save also the AAGUID to the Client side state.
  • In the login screen, read the additional client side state information. If the AAGUID is matching one of the listed password manager, show a variation of the passkey-button according to the Figma draft. (If not listed, keep the passkey-button style).
  • Add the name of the password manager in brackets and regular font weight next to the "Login with Passkey" text.
  • Decide if it is more convenient to export the icons from Figma or to use the "empty icon" and add the SVG form the aaguid.json. Keep in mind that it also need to support dark-mode. Implement your decision.
  • Add dark-mode support.
  • For the smaller version/mobile responsiveness make sure that text and icons are visible. (TBD if short with 3 dots or go new line)

3rd Party Password Manager (Tick the ones implemented)

  • 1Password
  • Dashlane
  • NordPass
  • Keeper
  • Enpass
  • IDmelon
  • Bitwarden
  • Proton Pass
  • KeyPassXC

Acceptance criteria

  • Passkeys created on Apple Keychain, Google Password Manager, Windows Hello etc are not changing the passkey button.
  • Any other AAGUID that is not listed will just show the normal passkey-button.
  • Successful passkey signups/logins where the passkey is saved on a 3rd party password manger, is shown the information in the passkey button.
  • Light/Dark-mode are supported.
  • Mobile responsiveness is supported.

Implementation idea