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 <Passkeys /> security card for listing, adding, and deleting registered passkeys
• useSignInPasskey, useAddPasskey, useDeletePasskey, and useListPasskeys hooks

Setup

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

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

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

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

import { AuthProvider } from "@better-auth-ui/heroui"
import { passkeyPlugin } from "@better-auth-ui/heroui/plugins"

<AuthProvider
  authClient={authClient}
  navigate={navigate}
  plugins={[passkeyPlugin()]} 
>
  {children}
</AuthProvider>

Components

<SignIn />

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

Usage

import { PasskeyButton } from "@better-auth-ui/heroui/plugins"

<PasskeyButton />

Props

<Passkeys />

The <Passkeys /> security card is automatically rendered on the security settings page when the plugin is registered.

Usage

import { Passkeys } from "@better-auth-ui/heroui/plugins"

<Passkeys />

Props

Options

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

Localization