Passkey quick start guide

Passlock abstracts much of the complexity associated with passkeys. You should be able to add passkey authentication to your web app in less than 30 minutes.

Prerequisites

Passlock is framework agnostic. For this guide we won’t assume any particular framework.

Most modern browsers now support passkeys. The underlying WebAuthn APIs require client-side JavaScript. We assume your frontend uses a bundler with tree shaking support (Vite, Webpack etc).

Your backend can be coded in pretty much any language and framework. We offer a framework agnostic JS/TS server library for Fetch-capable runtimes such as Node.js, Bun, Deno, and edge workers, which is what we’ll use in this guide. If you’re not using a JS/TS backend, don’t worry - we’ll also show you how to verify passkeys using REST calls.

CSP Headers

The @passlock/browser client library makes fetch calls to https://api.passlock.dev. If you use a strict Content Security Policy (CSP) you will need to whitelist api.passlock.dev:

1
Content-Security-Policy: connect-src 'self' https://api.passlock.dev;

Installation

The only required library is the Passlock browser library. Install it in your frontend project:

1
npm i @passlock/browser

If you’re running a JavaScript or TypeScript backend we recommend installing this library:

1
npm i @passlock/server

Setup

You’ll create a (free) Passlock cloud instance for this tutorial:

1
npx @passlock/cli init

The script will ask for your first name, last name and email. Follow the prompts and take note of your Tenancy ID and API Key:

Using the Passlock CLI to create a cloud instance