@passlock/client
v0.9.11
Published
Easy WebAuthn/FIDO Passkey authentication for your web apps. This library works with pretty much any frontend/backend stack including React/Next.js, Vue, SvelteKit etc - check out the tutorial
Downloads
328
Maintainers
Readme
Features
Passkeys and the WebAuthn API are quite complex. We've taken an opinionated approach to simplify things for you. Following the 80/20 principle we've tried to focus on the features most valuable to developers and users. We welcome feature requests so do get in touch.
🔐 Primary & secondary authentication - Replace password based logins with passkeys, or use passkeys alongside passwords for secondary authentication.
☝🏻 Biometrics - We've made it really easy to implement facial or fingerprint recognition in your webapps.
🔐 Step up authentication - Require biometric or PIN verification for some operations, whilst allowing one-tap authentication for others.
🖥️ Full management console - Manage all security related aspects of your userbase through a web based console.
🕵️ Audit trail - View a full audit trail for each user: when they add a new passkey, when they login, verify their email address and much more.
Screenshot
Usage
Use this library to generate a secure token, representing passkey registration or authentication. Send the token to your backend for verification (see below)
Register a passkey
import { Passlock, PasslockError } from '@passlock/client'
// you can find these details in the settings area of the Passlock console
const tenancyId = '...'
const clientId = '...'
const passlock = new Passlock({ tenancyId, clientId })
// to register a new passkey, call registerPasskey(). We're using placeholders for
// the user data. You should grab this from an HTML form, React store, Redux etc.
const [email, givenName, familyName] = ["[email protected]", "John", "Doe"]
// Passlock doesn't throw but instead returns a union: result | error
const result = await passlock.registerPasskey({ email, givenName, familyName })
// ensure Passlock didn't return an error
if (!PasslockError.isError(result)) {
// send the token to your backend (json/fetch or hidden form field etc)
console.log('Token: %s', result.token)
}
Authenticate using a passkey
import { Passlock, PasslockError } from '@passlock/client'
const tenancyId = '...'
const clientId = '...'
const passlock = new Passlock({ tenancyId, clientId })
const result = await passlock.authenticatePasskey()
if (!PasslockError.isError(result)) {
// send the token to your backend for verification
console.log('Token: %s', result.token)
}
Backend verification
Verify the token and obtain the passkey registration or authentication details. You can make a simple GET request to https://api.passlock.dev/{tenancyId}/token/{token}
or use the @passlock/node library:
import { Passlock } from '@passlock/node'
// API keys can be found in your passlock console
const passlock = new Passlock({ tenancyId, apiKey })
// token comes from your frontend
const principal = await passlock.fetchPrincipal({ token })
// get the user id
console.log(principal.user.id)
More information
Please see the tutorial and documentation