Testing for browser passkey support

Most devices and browsers now support passkeys, albeit with a few quirks. Nevertheless, don’t assume support is universal.

isPasskeySupport

Before prompting the user to register or authenticate with a passkey you should call isPasskeySupport().

frontend/register.ts

import { isPasskeySupport } from "@passlock/client";

if (!isPasskeySupport()) {
  throw new Error("Bad news...")
}

PasskeyUnsupported error

Alternatively test for the PasskeyUnsupportedError:

Default

import { registerPasskey, isPasskeyUnsupportedError } from "@passlock/client";

try {
  const result = await registerPasskey({ ... })
} catch (e) {
  if (isPasskeyUnsupportedError(e)) {
    // no passkey support on this device
  }
}

Safe

import {
  registerPasskey,
  isPasskeyUnsupportedError
} from "@passlock/client/safe";

const result = await registerPasskey({ ... })

if (result.success) {
  // happy days
} else if (isPasskeyUnsupportedError(result.error)) {
  // no passkey support on this device
} else {
  console.error(result.error.message);
}

Other capability checks

Passlock also exposes capability checks for newer WebAuthn signal APIs. These are useful for features such as device-local passkey deletion, updates, and pruning:

frontend/signals.ts

import {
  isPasskeyDeleteSupport,
  isPasskeyPruningSupport,
  isPasskeyUpdateSupport,
} from "@passlock/client";

if (!isPasskeyDeleteSupport()) {
  console.log("Local passkey deletion is unavailable on this device");
}

if (!isPasskeyUpdateSupport()) {
  console.log("Local passkey updates are unavailable on this device");
}

if (!isPasskeyPruningSupport()) {
  console.log("Local passkey pruning is unavailable on this device");
}