Fancy UI KitFancy UI Kitv0.5
DocsLearnPackagesTUIFlowUse CasesInspirationShowcaseLeaderboard
Sign in
All use cases
Platform

Add passkey sign-in

WebAuthn login and passkey management, on top of Fortify.

The problem

Passwords are the support burden that never ends: resets, reuse, and the phishing that no amount of user education prevents.

Passkeys solve it, but WebAuthn is a specification with sharp edges, and the tempting move — implementing the ceremony yourself — means writing cryptographic verification code, which is the last place you want to be original.

What you are building

Live surfaces, not screenshots — every one composed from the same components you would install.

Passkey sign-in

Capability detection before the prompt, so the UI never offers a passkey the device cannot produce.

Sign inSupported
Passkeys supportedBuilt-in authenticatorAutofill sign-in

The management surface is bridgeable; the CEREMONY is not. No MCP tool completes a passkey ceremony, because a gesture plus a biometric is something only the human has.

The code

Augment Fortify rather than replace itphp
// Passkeys are an ADDITIONAL factor route, not a parallel auth stack -- the
// package wraps web-auth/webauthn-lib and adds routes beside Fortify's, so
// password login, 2FA and recovery keep working exactly as before.
Passkeys::routes();          // /passkeys/register, /passkeys/login

// There is NO cryptography of our own here. That is deliberate: a hand-rolled
// WebAuthn verifier is the last thing an application should own.
Detect capability before offering ittsx
// Offering a passkey the device cannot produce is a dead end the user cannot
// diagnose. Ask first, then render the prompt.
const { supported, platformAuthenticator, conditionalUi } = usePasskeySupport();

{supported ? <PasskeySignIn /> : <PasswordSignIn />}

How to solve it

  1. Install the server side

    A thin wrapper over the established WebAuthn library — no cryptography of our own. On Laravel it augments Fortify rather than replacing your auth stack.

    Run thisbash
    composer require particle-academy/fancy-passkeys

  2. Add the sign-in and management UI

    Passkey sign-in plus a manager where users name, review and remove their keys. A React-free client subpath exists if your login page is not React.

    Run thisbash
    npm install @particle-academy/fancy-passkeys-ui

  3. Understand what an agent may and may not do

    The passkey bridge is management-only by design. An assistant can list keys, rename one, or propose a revoke — but no tool completes a ceremony, because a gesture and a biometric are exactly the parts only the human has. That boundary is enforced by a test, not by convention.