Copy page

Components

PasskeyButton

src/lib/components/auth/PasskeyButton.svelte

Purpose

A full-width outline button that triggers discoverable (username-less) passkey login. It runs the three-step WebAuthn flow — signin/begin, the browser navigator.credentials.get() ceremony, and signin/finish — and shares the same onsuccess/onerror contract as LoginForm so the two paths are interchangeable from the parent's perspective.

Origin

Custom — Primebrick-written. Uses the shadcn-svelte™ Button + Spinner, @lucide/svelte's Fingerprint icon, and the WebAuthn codec helpers in $lib/webauthn/codec. Not vendored from any registry.

Usage

Default

Code
<script>
  import PasskeyButton from '$lib/components/auth/PasskeyButton.svelte';

  function onsuccess(data) {
    // data: { success: boolean; user: any }
    goto('/');
  }
</script>

<PasskeyButton {onsuccess} />

With error callback

Code
<PasskeyButton
  onsuccess={() => goto('/')}
  onerror={() => console.warn('passkey sign-in failed or cancelled')}
/>

Embedded in LoginForm

LoginForm already renders <PasskeyButton {onsuccess} {onerror} /> when WebAuthn is enabled — you do not need to mount it separately there.

Behavior

• Discoverable login: no username is sent to signin/begin; the OS prompts the user to pick which passkey to use.
• Three-step flow: POST /api/v1/auth/webauthn/signin/begin → navigator.credentials.get() (FaceID / TouchID / security key) → POST /api/v1/auth/webauthn/signin/finish with the encoded assertion.
• Cancellation is not an error: an AbortError from the browser prompt calls onerror without surfacing a notification.
• User store: on success, userProfileStore.set(data.user) is called before onsuccess.
• Loading state: the button is disabled and shows a Spinner while the ceremony is in flight.

Props

Full prop table: see API reference — passkeybutton.

Key props:

• onsuccess?: (data: { success: boolean; user: any }) => void — called after a successful passkey sign-in.
• onerror?: () => void — called when sign-in fails or the user cancels the browser prompt.

Next steps

• Component catalog
• UI stack
• API reference