When using hardware tokens that require a PIN, Firefox needs to display a dialog for the user to enter the PIN. On some platforms (e.g. Windows 10) we use operating system APIs for the webauthn flow, and the operating system pops up its own dialogs for PIN entry (or alternative mechanisms, like fingerprints). But on e.g. Linux, there is no operating system support, and we have a separate code path. This means that Firefox needs its own dialog for this purpose.

For reference I'm attaching the PIN entry dialog that Windows 10 displays.

Currently Firefox displays this dialog, which lets the user know they need to connect and authorize their token and waits until that's done. E.g. if the user has a YubiKey, they would plug it in and touch it to authorize. If a PIN is required, the dialog needs to have a field to enter the PIN. (Later on this dialog might need to be extended with other features, e.g. the ability to choose between PIN or biometrics, but for now we can just start with PIN entry.)

There are a few open questions:

• Modality: on Windows 10 the dialog is modal and blocks the entire browser window, but the existing Firefox popup acts more like a notification and ends up being dismissed by e.g. switching focus to a different window.
• Accessibility, perhaps?

As an additional data point, Chrome seems to use door-hanger style popups for all their dialogs, except where there is operating system support where it just uses the operating system functionality the same way as Firefox.

Just as a reference. On linux, the Belgian eID used to use a dialog like this https://www.stroobant.be/sites/default/files/inline-images/eid-pin.png before more recently switching to a standard password dialog like the image attached.

Hey Meridel, as discussed on Slack, setting the ni? flag so this appears on the radar - thank you!

This is the Chrome PIN entry dialog. It's a door-hanger style popup and it's tab-modal (i.e. you can switch to other tabs without answering the prompt, and when you switch back it's still there waiting).

Hey Jules, I am working with the ENG on this (Martinho) to create a tab-blocking modal. I don't think UX or visual design is needed (I can just copy the modal design into a Google Doc and collaborate on strings there). Questions for you, please:

• What does Martinho need in this case to build the modal? Access to our modal design file to inspect it?
• Does Martinho actually need to create a Figma file or can we just use a Google Doc?

I created a first draft of copy and design in our Google Doc. Please take a look (second page): https://docs.google.com/document/d/1wbicXv0hxp2I__ys4JrNOpQQMnT5n3yMmnLgw7V-YDM/edit#heading=h.pxhbd25z72l2

Hey,

I think giving access to our library would be the way to go to build the modal. As a viewer, Martinho can even look at the specs.

Martinho, can I please have an email you'd like to have access as a viewer to our systems libraries in Figma?

I can also link you to the exact page that has modal specs.

Currently waiting for https://github.com/mozilla/authenticator-rs/pull/163 to get merged

It appears 163 was merged.

This was fixed in Bug 1530373.