Typescript library for next generation authentication. Passkeys, Apple login, Google one-tap and more..
Project website »
GitHub
·
Demo
·
Documentation
·
Tutorial
Important
Looking for the SvelteKit templates? Use the @passlock/create-sveltekit script to create a new project
Passkeys and the WebAuthn API are quite complex. I've taken an opinionated approach to simplify things for you. Following the 80/20 principle, I've tried to focus on the features most valuable to developers and users.
-
🔐 Primary or secondary authentication - 2FA or a complete replacement for passwords
-
🚀 Social login - Supporting Apple & Google. GitHub coming soon..
-
☝🏻 Biometrics - Frictionless facial or fingerprint recognition for your webapps
-
🖥️ Management console - Suspend users, disable or revoke passkeys and more..
-
🕵️ Audit trail - View a full audit trail for each user
-
🖥️ Dev console - Something not working? check the web console for details
-
👌 Headless components - You have 100% control over the UI
passlock-demo.mp4
Demo app using this library for passkey and social login
Viewing a user's authentication activity on their profile page
Tip
SvelteKit users - Whilst this library is framework agnostic, SvelteKit users may want to check out the @passlock/sveltekit wrapper This offers several enhancements, including UI components, form action helpers and Superforms support.
Use this library to generate a secure token, representing passkey registration or authentication. Send the token to your backend for verification (see below)
import { Passlock, PasslockError } from '@passlock/client'
// you can find these details in the settings area of your 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 we're error free
if (!PasslockError.isError(result)) {
// send the token to your backend (json/fetch or hidden form field etc)
console.log('Token: %s', result.token)
}
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)
}
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)
Please see the tutorial and documentation