Emulate authenticators and debug WebAuthn in Microsoft Edge DevTools

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

Before you begin

A great place to get started with Web Authentication is the Web Authentication API specification.

Set up the WebAuthn tool

  1. Navigate to a webpage that uses WebAuthn, such as the following demo website.

    webauthndemo.appspot.com

  2. Sign into the website.

  3. Open DevTools.

  4. To open the WebAuthn tool, choose the Customize and control DevTools (...) icon > More tools > WebAuthn.

    WebAuthn tool

  5. In the WebAuthn tool, turn on Enable virtual authenticator environment checkbox.

  6. After it is enabled, a new section named New authenticator is displayed.

    Enable virtual authenticator environment

  7. 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. For more information, navigate to 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). For more information, navigate to 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. For more information, navigate to User Verification
  8. Choose the Add button.

  9. 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, complete the following steps. For more information about what the Web Authentication API is doing when registering a new credential, navigate to Create a New Credential.

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

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

    View credentials

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

Export and remove credentials

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

Export or remove a credential

Rename an authenticator

To rename an authenticator, complete the following steps.

  1. Next to the authenticator name, choose the Edit button.
  2. Edit the name, then choose Enter to save the changes.

Rename an authenticator

Set the active authenticator

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

Note

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

Set active authenticator

Remove a virtual authenticator

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

Remove authenticator

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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.