Emulate authenticators and debug WebAuthn

Instead of debugging Web Authentication in your website or app with physical authenticators, use the WebAuthn tool to create and interact with software-based virtual authenticators.

By using the WebAuthn tool, you can do the following without relying on physical authenticators:

  • Emulate authenticators.
  • Customize attributes of authenticators.
  • Inspect states of authenticators.

You can emulate authenticators and debug the Web Authentication API by using the WebAuthn tool.

Set up the WebAuthn tool

  1. Go to a webpage that uses WebAuthn. For example, open the following demo website in a new browser window or tab: try-webauthn.appspot.com.

  2. Sign into the website.

  3. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  4. In DevTools, on the main toolbar, select the WebAuthn tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

    The WebAuthn tool opens:

    WebAuthn tool.

  5. In the WebAuthn tool, select the Enable virtual authenticator environment checkbox. A new section named New authenticator is displayed:

    Enable virtual authenticator environment.

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

    Option Value Details
    Protocol ctap2 or u2f The protocol the virtual authenticator uses for encoding and decoding
    Transport usb, nfc, ble, or internal The virtual authenticator simulates the selected transport for communicating with clients in order to obtain an assertion for a specific credential. See Authenticator Transport Enumeration
    Supports resident keys Turn on (or off) using the checkbox Turn on if your web app relies on resident keys (also known as client-side discoverable credentials). See Resident Key Requirement Enumeration.
    Supports user verification Turn on (or off) using the checkbox Turn on if your web app relies on local authorization using gesture modalities like touch plus pin code, password entry, or biometric recognition. See User Verification
  7. Click the Add button.

  8. A new section of your newly created authenticator is displayed:

    Authenticator.

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

No credentials.

Register a new credential

To register a new credential:

  1. On the demo website, click Register new credential.

  2. A new credential is now added to the Credentials table in the WebAuthn tool:

    View credentials.

On the demo website, click the Authenticate button. Verify that the Sign Count of the credential in the Credentials table increased by 1, which marks a successful authenticatorGetAssertion operation.

For more information about what the Web Authentication API is doing when registering a new credential, see Create a New Credential.

Export and remove credentials

To export or remove a credential, click the Export or Remove button.

Export or remove a credential.

Rename an authenticator

To rename an authenticator:

  1. Next to the authenticator name, click the Edit button.

  2. Edit the name, then press Enter to save the changes.

Renaming an authenticator.

Set the active authenticator

A newly created authenticator is automatically activated. To use another virtual authenticator, click the Active radio button next to the authenticator.

DevTools supports only one active virtual authenticator at any point of time. If you remove the active authenticator, another authenticator isn't automatically activated.

Setting the active authenticator.

Remove a virtual authenticator

To remove a virtual authenticator, next to the authenticator, click the Remove button.

Removing an authenticator.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.