WebAuthn: Emulate authenticators

Fawaz Mohammad

Jecelyn Yeen

Sofia Emelianova

Use the WebAuthn panel to create and interact with software-based virtual authenticators.

Overview

The WebAuthn panel lets you add, rename, and remove authenticators. Register credentials, which are like users, to an authenticator and monitor IDs, User Handles and Sign Counts as you test.

Open the WebAuthn panel

1. Visit a page that uses WebAuthn, such as our demo page (please login to access the page).
2. Open DevTools.
3. Open the Command menu by pressing:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
4. Start typing webauthn, select Show WebAuthn, and press Enter.

Alternatively, in the top right corner, click More Options > More tools > WebAuthn to open the WebAuthn panel.

Enable the virtual authenticator environment

1. On the WebAuthn panel, click to enable the checkbox check_box Enable virtual authenticator environment.
2. Once enabled, the New authenticator section appears.

Add a virtual authenticator

To add a new virtual authenticator:

1. In the New authenticator section, configure the following options:

   1. Protocol: ctap2 (Client to Authenticator Protocol) or u2f (Universal 2nd Factor)
   2. Transport: usb, nfc, ble, or internal
   3. Supports resident keys
   4. Supports user verification
   5. Supports large blob, available only for ctap2 protocol with resident keys support

   For example:

   

2. Click the Add button.

3. You can now see a section with your newly-created authenticator.

The Authenticator section includes a Credentials table. The table is empty until a credential is registered to the authenticator.

Register a new credential

To register a new credential, you need to have a web page that uses WebAuthn, for example, our demo page.

1. On the demo page, click Register new credential.
2. A new credential is now added to the Credentials table in the WebAuthn panel.

On the demo page, you can click the Authenticate button multiple times. Observe the Credentials table. The Sign Count of the credential will increase accordingly.

Export and remove credentials

You can export or remove a credential by clicking the Export or Remove buttons.

Rename an authenticator

1. To rename an authenticator, click the Edit button next to the authenticator's name.
2. Edit the name, then click Enter to save the changes.

Activate an authenticator

A newly created authenticator is set to active automatically. DevTools supports only one active virtual authenticator at any point of time.

To deactivate authentication, remove the currently active authenticator.

To activate an authenticator, select its Active radio button.

Remove a virtual authenticator

To remove a virtual authenticator, click its Remove button.