What is @simplewebauthn/browser?
@simplewebauthn/browser is a JavaScript library that provides a simple interface for implementing WebAuthn (Web Authentication) in web applications. It allows developers to easily integrate passwordless authentication and second-factor authentication using hardware security keys, biometric sensors, and other authenticators that support the WebAuthn standard.
What are @simplewebauthn/browser's main functionalities?
Registration
This feature allows users to register a new authenticator (e.g., a security key or biometric device) with the web application. The code sample demonstrates how to start the registration process, send the registration options to the client, and verify the registration response on the server.
const { startRegistration } = require('@simplewebauthn/browser');
async function register() {
const options = await fetch('/generate-registration-options').then(res => res.json());
const attResp = await startRegistration(options);
const verification = await fetch('/verify-registration', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(attResp),
}).then(res => res.json());
if (verification.verified) {
console.log('Registration successful!');
} else {
console.log('Registration failed.');
}
}
Authentication
This feature allows users to authenticate using a previously registered authenticator. The code sample demonstrates how to start the authentication process, send the authentication options to the client, and verify the authentication response on the server.
const { startAuthentication } = require('@simplewebauthn/browser');
async function authenticate() {
const options = await fetch('/generate-authentication-options').then(res => res.json());
const assertionResp = await startAuthentication(options);
const verification = await fetch('/verify-authentication', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(assertionResp),
}).then(res => res.json());
if (verification.verified) {
console.log('Authentication successful!');
} else {
console.log('Authentication failed.');
}
}
Other packages similar to @simplewebauthn/browser
fido2-lib
fido2-lib is a comprehensive library for implementing FIDO2 and WebAuthn server-side functionality. It provides tools for generating and verifying registration and authentication data. Compared to @simplewebauthn/browser, fido2-lib focuses more on the server-side implementation and offers more granular control over the WebAuthn process.
webauthn
webauthn is a library that provides utilities for implementing WebAuthn in web applications. It includes both client-side and server-side components. While it offers similar functionalities to @simplewebauthn/browser, it may require more configuration and setup to get started.
passport-fido2
passport-fido2 is a Passport.js strategy for FIDO2 authentication. It integrates with the Passport.js authentication middleware for Node.js, making it easy to add FIDO2 authentication to existing Passport.js-based applications. Unlike @simplewebauthn/browser, which is focused on client-side interactions, passport-fido2 is designed for server-side integration with Passport.js.
@simplewebauthn/browser
Installation
This package is available on npm:
npm install @simplewebauthn/browser
UMD
This package can also be installed via unpkg by including the following script in your page's
<head>
element. The library's methods will be available on the global SimpleWebAuthnBrowser
object.
NOTE: The only difference between the two packages below is that the ES5 bundle includes
TypeScript's tslib
runtime code. This adds some bundle size overhead, but does enable use of
supportsWebAuthn()
in older browsers to show appropriate UI when WebAuthn is unavailable.
ES5
If you need to support WebAuthn feature detection in deprecated browsers like IE11 and Edge Legacy,
include the ES5
version:
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.es5.umd.min.js"></script>
ES2018
If you only need to support modern browsers, include the ES2018
version:
<script src="https://unpkg.com/@simplewebauthn/browser"></script>
Usage
You can find in-depth documentation on this package here:
https://simplewebauthn.dev/docs/packages/browser
v9.0.0 - The one in which 11 characters were saved
Packages
- @simplewebauthn/browser@9.0.0
- @simplewebauthn/server@9.0.0
- @simplewebauthn/types@9.0.0
Changes
- [types] The
@simplewebauthn/typescript-types
package has been renamed to
@simplewebauthn/types
(#508)
Breaking Changes
- Any reference to
@simplwebauthn/typescript-types
will need to be replaced with the new package
name @simplewebauthn/types
:
Before:
import { ... } from '@simplwebauthn/typescript-types';
After:
$> npm uninstall @simplewebauthn/typescript-types
$> npm install -D @simplewebauthn/types
import { ... } from '@simplwebauthn/types';