Passkey

The passkey plugin adds passwordless authentication using WebAuthn. Users can sign in with their device authenticator (Touch ID, Face ID, Windows Hello) and manage registered passkeys from their security settings.

It contributes:

• A "Continue with Passkey" button rendered on the sign-in and magic-link views (hidden on sign-up)
• A <PasskeysSettings /> security card for listing, adding, and deleting registered passkeys
• Solid query and mutation options such as signInPasskeyOptions, listPasskeysOptions, addPasskeyOptions, and deletePasskeyOptions

Setup

import { betterAuth } from "better-auth"
import { passkey } from "@better-auth/passkey"

export const auth = betterAuth({
  // ...
  plugins: [
    passkey() 
  ]
})

import { createAuthClient } from "@better-auth-ui/solid"
import { passkeyClient } from "@better-auth/passkey/client"

export const authClient = createAuthClient({
  plugins: [passkeyClient()] 
})

npx shadcn@latest add https://better-auth-ui.com/r/solid/passkey.json

import { AuthProvider } from "@/components/auth/auth-provider"
import { passkeyPlugin } from "@/lib/auth/passkey-plugin"
import { authClient } from "@/lib/auth-client"

export function Providers(props: { children?: JSX.Element }) {
  return (
    <AuthProvider
      authClient={authClient}
      navigate={navigate}
      plugins={[passkeyPlugin()]} 
    >
      {props.children}
    </AuthProvider>
  )
}

Runtime prerequisites

• Server: passkey() from @better-auth/passkey.
• Client: passkeyClient() from @better-auth/passkey/client.
• Production: set the WebAuthn origin and trusted origins correctly.
• Runtime API: passkey options and queries from Solid runtime APIs.

Copied files

• src/lib/auth/passkey-plugin.ts
• src/components/auth/passkey/passkey-localization.ts
• src/components/auth/passkey/passkey-button.tsx
• src/components/auth/passkey/passkeys.tsx
• src/components/auth/passkey/passkey.tsx
• src/components/auth/passkey/passkey-skeleton.tsx
• src/components/auth/passkey/passkeys-empty.tsx
• src/components/auth/passkey/add-passkey-dialog.tsx
• src/components/auth/passkey/delete-passkey-dialog.tsx
• src/components/ui/spinner.tsx

Components

These previews use seeded Storybook fixtures and mocked Passkey methods. They do not call navigator.credentials or start real WebAuthn ceremonies.

<SignIn />

A "Continue with Passkey" button is automatically rendered on the <SignIn /> and magic-link views when the plugin is registered. It is hidden on sign-up.

Usage

import { PasskeyButton } from "@/components/auth/passkey/passkey-button"

export function PasskeySignInDemo() {
  return <PasskeyButton />
}

Props

<PasskeysSettings />

The <PasskeysSettings /> security card is rendered on the security settings page when your layout renders each plugin's securityCards and passkeyPlugin() is registered. It lists registered passkeys and provides add / delete dialogs.

Usage

import { PasskeysSettings } from "@/components/auth/passkey/passkeys"

export function PasskeysDemo() {
  return <PasskeysSettings />
}

Props

Options

passkeyPlugin({
  // Override any of the plugin's localization strings.
  localization: {
    passkeys: "Security Keys"
  }
})

Localization

The copied Zaidan Passkey components resolve labels from passkeyPlugin({ localization }) and fall back to the default Passkey localization.

Solid runtime APIs

Use the low-level Solid runtime helpers when building custom Passkey UI:

• signInPasskeyOptions
• addPasskeyOptions
• deletePasskeyOptions
• listPasskeysOptions