auth0 / webauthn.me

webauthn.me, learn more about the Web Authentication API or try the debugger.

WebAuthn.me

Web Authentication is a new standard enabling the creation and use of strong, attested, scoped, public key-based credentials by web applications, for the purpose of strongly authenticating users using hardware authenticators.

WebAuthn.me contains a visual walkthrough of each step of the process of registering new credentials and authenticating using these credentials. There's also a debugger to play around with different configurations and an introduction page with some more information.

Sponsor

	If you want to quickly add secure token-based authentication to your projects, feel free to check Auth0's documentation and free plan at auth0.com/developers

How to build

First, install the required dependencies:

npm install

Spin up a development server:

npm run start:dev

Build the project:

npm run build

Run the tests:

npm run test

What is Auth0?

Auth0 helps you to:

• Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, among others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
• Add authentication through more traditional username/password databases.
• Add support for linking different user accounts with the same user.
• Support for generating signed JSON Web Tokens to call your APIs and flow the user identity securely.
• Analytics of how, when, and where users are logging in.
• Pull data from other sources and add it to the user profile, through JavaScript rules.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

webauthn.me's Issues

Can not start dev, got error:0308010C:digital envelope routines::unsupported

Please do not report security vulnerabilities here. The Responsible Disclosure Program details the procedure for disclosing security issues.

Thank you in advance for helping us to improve this library! Please read through the template below and answer all relevant questions. Your additional work here is greatly appreciated and will help us respond as quickly as possible. For general support or usage questions, use the Auth0 Community or Auth0 Support. Finally, to avoid duplicates, please search existing Issues before submitting one here.

By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.

Description

Provide a clear and concise description of the issue, including what you expected to happen.

can not start dev

Reproduction

Detail the steps taken to reproduce this error, what was expected, and whether this issue can be reproduced consistently or if it is intermittent.

Where applicable, please include:

• Code sample to reproduce the issue
• Log files (redact/remove sensitive information)
• Application settings (redact/remove sensitive information)
• Screenshots

npm i
npm run start:dev

> [email protected] start:dev
> grunt

Running "clean:default" (clean) task
>> 1 path cleaned.

Running "copy:default" (copy) task
Copied 33 files

Running "less:default" (less) task
>> Destination dist/css/index.css not written because no source files were found.
>> 6 stylesheets created.

Running "pug:default" (pug) task
>> 5 files created.
(node:2706) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

Running "webpack:dev" (webpack) task
10% building 0/6 modules 6 active ...gc3/webauthn.me/node_modules/babel-loader/lib/index.js??ref--4!/Users/liuyangc3/webauthn.me/src/index.jsFatal error: error:0308010C:digital envelope routines::unsupported

Environment

Please provide the following:

• Version of this library used: master branch
• Version of the platform or framework used, if applicable:
• Other relevant versions (language, server software, OS, browser): MacOS 14.4.1 (23E224), Chrome 124.0.6367.93 (Official Build) (arm64)
• Other modules/plugins/libraries that might be involved: No

Add opengraph and twitter data

Open graph image / twitter card image is requested.

Debugger > Register `timeout` should be a number, not a string

Description

The Register tab on the debugger uses a string for the timeout instead of an unsigned long.

https://webauthn.me/debugger > publicKey.timeout
Docs: https://www.w3.org/TR/webauthn/#dictionary-makecredentialoptions

Improve login success step

After the login is successful I see nothing other than the green check. As a developer what does this mean?

excludeCredentials causes an error if transports is not indicated

Description

In the Debugger view it's not possible to set one element in excludeCredentials without indicating transports. According to the specs, transports should be optional. When I try to not add transports I see this error

TypeError: Failed to execute 'create' on 'CredentialsContainer': Failed to read the 'publicKey' property from 'CredentialCreationOptions': Failed to read the 'excludeCredentials' property from 'PublicKeyCredentialCreationOptions': The provided value is not of type 'PublicKeyCredentialDescriptor'.

while indicating one of the three transports methods everything works as expected.

Reproduction

• Open Debugger view
• Register a new device (e.g. Macbook Touch ID)
• Copy the rawId to a file (in binary format)
• Add one excludeCredentials element and upload binary file
• Try to register a second device
• Observe the failure
• Expected behavior: I can register a second device

Environment

• Version of this library used:
• Used web version of the tool deployed at https://webauthn.me/debugger, latest commit on master is 77679df
• Chrome Version 103.0.5060.53 (Official Build) (arm64)

"DOWNLOAD (CBOR)" button does not work

Description

When using the webauthn debugger in either chromium or filrefox, the DOWNLOAD (CBOR) button does not actually download anything. The DOWNLOAD (JSON) button does download things, but the JSON is not ideal for debugging because it is not mechanically translatable to CBOR. (In particular, constants defined by the FIDO2 specification have been translated to strings, so it would require a reasonable amount of code to back-generate the CBOR from the JSON.)

Reproduction

Go to webauthn.me/debugger.

Click the purple REGISTER button to register a FIDO2 device (or use the virtual CTAP2 device built into the chromium debugger by pressing F12, three dots, More tools, WebAuthn and creating a virtual USB CTAP2 device).

Scroll down and click DOWNLOAD (CBOR). Nothing will happen.

Environment

Please provide the following:

• Version of this library used: Currently deployed version on webauthn.me.
• Version of the platform or framework used, if applicable: n/a
• Other relevant versions (language, server software, OS, browser): Tested with Chromium 119.0.6045.59 and Firefox 119.0.
• Other modules/plugins/libraries that might be involved:

Linux is completely missing from https://webauthn.me/browser-support

I was quite confused to find that https://webauthn.me/browser-support completely ignores the existence of Linux. I understand not all distros and software can be mentioned, at least adding a general Linux column would make a ton of sense. I'm honestly, as a Linux user, not even sure what WebAuthn support I will have once my device arrives in for example Firefox.

Download raw auth data

Describe the problem you'd like to have solved

For validating attestation signatures it is necessary (I think?) to have the raw authData available. The debugger website doesn't have a way to access it that I can see.

Describe the ideal solution

Add an additional Download button, similar to the ones for the signature, x509 cert, etc.

Alternatives and current work-arounds

A more flexible approach would be to also make the CBOR library and attestation response object available as globals for access in the javascript console.

Timeout when setting up new key

Description

Registration times out when trying to set up new security key. The timer that starts ticking on the website starts at 15 seconds, which is not enough to set up the security key the first time on Windows (30 seconds is probably a safer bet).

Reproduction

1. Enter username or e-mail
2. Press "Register"
3. Wait ~2s for Windows permission prompt for accessing security key
4. Follow steps in the prompt at a normal pace (this includes creating a PIN by typing it out twice, waiting ~2s and tapping the hardware dongle twice)
5. Prompt gets yanked away and the website claims the request timed out.

Environment

• Version of this library used: N/A (tried this on the website today)
• Version of the platform or framework used, if applicable: N/A
• Other relevant versions (language, server software, OS, browser): Windows 10 using MS Edge Dev with a Yubikey 5C Nano
• Other modules/plugins/libraries that might be involved: N/A

CredentialId is not zero-padded

Description

The attestationObject.authData.credentialId hex value in the debugger is not zero padded, so it can appear to be a nibble or byte short of the credentialIdLength field.

Reproduction

Register a key and attempt to convert it from hex to binary:

echo 7f9a74798aa5199b39ea57bdbf3ebbbf897356a319bd50192969c7877bb27987c7ddb4edc7fa3856ebb2d5e6c9af32bdfaac72ddefce597f24be88ac4c1a04a \
| xxd -p -r | xxd -g1
00000000: 7f 9a 74 79 8a a5 19 9b 39 ea 57 bd bf 3e bb bf  ..ty....9.W..>..
00000010: 89 73 56 a3 19 bd 50 19 29 69 c7 87 7b b2 79 87  .sV...P.)i..{.y.
00000020: c7 dd b4 ed c7 fa 38 56 eb b2 d5 e6 c9 af 32 bd  ......8V......2.
00000030: fa ac 72 dd ef ce 59 7f 24 be 88 ac 4c 1a 04     ..r...Y.$...L..

Since there is no leading 0, the resulting value is offset by four bits and the 64th byte is missing.

Support table not accurate

Description

The following browsers on Android 7 and 12:

• Firefox
• Brave
• Edge

support both Platform authenticators and Roaming authenticators, according to webauthn.me itself (I have successfully tested platform authenticator and YubiKey over NFC on webauthn.io and webauthn.me). The device has to have a screen lock set (any, does not have to be a fingerprint), but that applies to Google Chrome as well. The only problem is that once you register a platform authenticator with a website, you apparently cannot log in with roaming authenticator anymore, you always have to use platform from that point on. Applies to all browsers.

• Firefox:
• Brave:
• Edge:

Reproduction

Try WebAuthn on various devices and browsers.

Environment

noted above

Demo fails with NotAllowedError

I am trying to use the demo https://webauthn.me on my iPhone 11 (with the latest software) and I am getting an error after I enter my email address:

Oops, something went wrong! ×
NotAllowedError: The document is not focused..
Close this modal reload the page so you can try again.

The debugging website (https://webauthn.me/debugger) seems to work OK.

Add analytics

Add HTTP requests

One of the things I am missing in the flow are the HTTP requests that go to the relying party and the responses you get back. One way to solve this is have a collapsible pannel on every step that explains what is going on (the info you have in the INFORMATION tab).