This module makes passwordless (or second-factor) W3C's Web Authentication simple. The primary interface is the WebAuthnApp class, with the register()
and login()
methods for registering new devices and / or logging in via WebAuthn. The interface takes care of communicating with your WebAuthn server, validating server responses, calling the browser's WebAuthn API with the right options, and everything else.
There is much more functionality available for debugging or more granular control, but it probably isn't needed for most applications.
The module is also exported as a npm
module, allowing the Msg class to be used in node.js
servers for creating, validating, and converting all the communications with a browser.
For a live demo of this project, see webauthn.org.
Documentation for all classes and advanced options is available online.
Install
npm
npm install webauthn-simple-app
CDN
ES6 Module
Universial Module (UMD)
GitHub
git clone https://github.com/apowers313/webauthn-simple-app
Download .zip and .tgz downloads are available from the releases page.
Simple Example
Register:
// register a new device / accountvar waApp =waAppusername = "me";waApp;
Log in:
// log in to a previously registered accountvar waApp =waAppusername = "me";waApp;
Real Example
Here is a more complete example, using jQuery to do things like get inputs from forms and respond to various events that are fired.
JavaScript
// override some of the default configuration options// see the docs for a full list of configuration optionsvar webAuthnConfig =timeout: 30000;// when user clicks submit in the register form, start the registration process;// when user clicks submit in the login form, start the log in process;// do something when registration is successful;// do something when registration fails;// do something when log in is successful;// do something when log in fails;// gently remind the user to authenticate when it's time;
HTML
<!-- A very simple registration form --><!-- A very simple log in form -->
Complete Example
For a complete example using jQuery and Bootstrap, refer to the code at the webauthn-yubiclone project, specifically index.html and ux-events.js.
Theory of Operation
Here's what's going on inside when you call register
or login
:
WebAuthnApp.register():
- getRegisterOptions()
- client --> CreateOptionsRequest --> server
- client <-- CreateOptions <-- server
- create()
- CredentialAttestation = navigator.credentials.create(CreateOptions)
- sendRegisterResult()
- client --> CredentialAttestation --> server
- client <-- ServerResponse <-- server
WebAuthnApp.login():
- getLoginOptions()
- client --> GetOptionsRequest --> server
- client <-- GetOptions <-- server
- get()
- CredentialAssertion = navigator.credentials.get(GetOptions)
- sendLoginResult()
- client --> CredentialAssertion --> server
- client <-- ServerResponse <-- server
Sponsor
Note that while I used to be Technical Director for FIDO Alliance (and I am currently the Technical Advisor for FIDO Alliance), THIS PROJECT IS NOT ENDORSED OR SPONSORED BY FIDO ALLIANCE.
Work for this project is supported by my consulting company: WebAuthn Consulting.