{error}
}\n{error}
}\n{{ verifyError }}
\n\n \n \n \n{{ registerError }}
\n\n```\n\n### Svelte\n\nAccess the returned values through the hook object (don't destructure), so Svelte's reactivity stays live:\n\n```svelte\n\n\n\n\n\n\n{#if verify.error}{verify.error}
{/if}\n\n\n{register.error}
{/if}\n```\n\n## Server-Side Rendering\n\nWebAuthn is a browser-only API. The framework hooks are SSR-safe: on the server and during hydration, `isSupported` renders as `false`, then updates to the real value after the component mounts. This avoids hydration warnings without any user-visible flash — in Vue and Svelte the post-mount update runs as a microtask before the browser paints; in React it's handled by `useSyncExternalStore` (client-only apps see the real value on the first render).\n\nIf you need the synchronous value outside a component lifecycle, call `Passkeys.isSupported()` directly — it returns `false` under Node without throwing.\n\n## Passkey Autofill\n\nWhen `autofill: true` is passed, the hook asks the browser to surface saved passkeys inside the native credential-picker dropdown. The browser attaches that dropdown to an `` whose `autocomplete` attribute includes the `webauthn` token (typically alongside `username` or `email`). If no such input is mounted by the time the autofill request starts, the dropdown has nowhere to anchor and silently shows nothing — no error, no console warning, just no picker.\n\nIf the browser doesn't support autofill (checked via `isAutofillSupported()`) or the user dismisses the picker, the hook falls back to doing nothing and your explicit \"Sign in with passkey\" button still works.\n\n## Core API\n\n### Public Methods\n\n| Method | Description |\n| ---------------------------------- | ------------------------------------------------- |\n| `configure(options)` | Configure the passkeys client |\n| `isSupported()` | Check if the browser supports passkeys |\n| `isAutofillSupported()` | Check if the browser supports passkey autofill |\n| `register({ name, routes? })` | Register a new passkey for the authenticated user |\n| `verify({ remember?, routes? })` | Verify a passkey |\n| `autofill({ remember?, routes? })` | Enable passkey autofill on the current page |\n| `cancel()` | Cancel any pending passkey operation |\n\n### Client Configuration\n\nUse `configure()` to adjust the fetch options used for passkey requests:\n\n```js\nPasskeys.configure({\n fetch: {\n credentials: \"include\",\n headers: {\n \"X-Tenant\": tenantId,\n },\n },\n});\n```\n\n## Expected Endpoints\n\nThis package handles communication with your Laravel application and expects the following endpoints:\n\n### Authentication (Guest)\n\n| Method | Route | Purpose |\n| ------ | ------------------------- | ---------------------------------- |\n| `GET` | `/passkeys/login/options` | Fetch authentication options |\n| `POST` | `/passkeys/login` | Verify credential and authenticate |\n\n### Registration (Authenticated)\n\n| Method | Route | Purpose |\n| ------ | ------------------------ | -------------------------- |\n| `GET` | `/user/passkeys/options` | Fetch registration options |\n| `POST` | `/user/passkeys` | Store new passkey |\n\n### Per-Call Route Overrides\n\n```js\nawait Passkeys.register({\n name: \"MacBook Pro\",\n routes: {\n options: \"/user/security/passkeys/options\",\n submit: \"/user/security/passkeys\",\n },\n});\n\nawait Passkeys.verify({\n routes: {\n options: \"/passkeys/confirm/options\",\n submit: \"/passkeys/confirm\",\n },\n});\n```\n\n`register()`, `verify()`, and `autofill()` all support route overrides:\n\n```ts\ntype RouteOverrides = {\n routes?: {\n options?: string;\n submit?: string;\n };\n};\n```\n\n### Remember Me\n\nPass `remember: true` when verifying to keep the user logged in. The flag is\nalways sent with the login request and defaults to `false`:\n\n```js\nawait Passkeys.verify({ remember: true });\n```\n\n`remember` can also be a function. It is called when the login request is\nsent, after the passkey ceremony completes, so it can read the current state\nof a \"Remember me\" checkbox. This matters for autofill because the ceremony\nstarts on page load before the user picks a credential.\n\n```js\nawait Passkeys.autofill({\n remember: () => document.querySelector(\"#remember\").checked,\n});\n```\n\nThe framework adapters accept `remember` too, and apply it to both verify and\nautofill:\n\n```jsx\n// React: a value or a getter\nconst [rememberMe, setRememberMe] = useState(false);\n\nusePasskeyVerify({ autofill: true, remember: rememberMe });\n```\n\n```js\n// Vue: a value, a ref, or a getter\nconst rememberMe = ref(false);\n\nusePasskeyVerify({ autofill: true, remember: rememberMe });\n```\n\n```js\n// Svelte: pass a getter so $state stays live\nlet rememberMe = $state(false);\n\nusePasskeyVerify({ autofill: true, remember: () => rememberMe });\n```\n\n### React / Vue / Svelte Route Overrides\n\nThe `usePasskeyVerify` adapters accept:\n\n```js\nusePasskeyVerify({\n autofill: true,\n routes: {\n options: \"/passkeys/confirm/options\",\n submit: \"/passkeys/confirm\",\n },\n onSuccess: (response) => {\n if (response.redirect) {\n window.location.href = response.redirect;\n }\n },\n});\n```\n\nThe `usePasskeyRegister` adapters accept:\n\n```js\nusePasskeyRegister({\n routes: {\n options: \"/user/security/passkeys/options\",\n submit: \"/user/security/passkeys\",\n },\n onSuccess: () => {\n window.location.reload();\n },\n});\n```\n\n## Typed Errors\n\nAll ceremony failures are converted to `PasskeyError` subclasses so you can branch on error type:\n\n| Class | Thrown when |\n| -------------------- | ------------------------------------------------------------ |\n| `NotSupportedError` | The browser does not support WebAuthn |\n| `UserCancelledError` | The user dismissed the native prompt |\n| `PasskeyExistsError` | A passkey for this account/device is already registered |\n| `InvalidDomainError` | Passkeys are used from an invalid domain |\n| `PasskeyError` | Base class; used for server errors and any unmapped failures |\n\n`Passkeys.register()` and `Passkeys.verify()` throw these directly. The framework adapters expose them two ways: the `onError` callback receives the typed instance, and each hook returns an `errorInstance` field (alongside the string `error`) so you can branch from markup:\n\n```jsx\nimport { PasskeyExistsError } from \"@laravel/passkeys\";\nimport { usePasskeyRegister } from \"@laravel/passkeys/react\";\n\nconst { register, error, errorInstance } = usePasskeyRegister();\n\n// ...\n{\n errorInstance instanceof PasskeyExistsError ? (\nYou already registered a passkey on this device.
\n ) : error ? (\n{error}
\n ) : null;\n}\n```\n\n## Type Compatibility\n\nThis package uses TypeScript types from [`@simplewebauthn/browser`](https://www.npmjs.com/package/@simplewebauthn/browser). These types are fully compatible with the JSON output from the [`web-auth/webauthn-lib`](https://packagist.org/packages/web-auth/webauthn-lib) PHP package.\n\n## Package Exports\n\n| Entry Point | Exports |\n| -------------------------- | ---------------------------------------- |\n| `@laravel/passkeys` | `Passkeys` |\n| `@laravel/passkeys/react` | `usePasskeyVerify`, `usePasskeyRegister` |\n| `@laravel/passkeys/vue` | `usePasskeyVerify`, `usePasskeyRegister` |\n| `@laravel/passkeys/svelte` | `usePasskeyVerify`, `usePasskeyRegister` |\n","readmeFilename":"README.md"}