"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn, useMounted } from "@kineticui/core"; import { ArrowLeftIcon, FingerprintIcon, MailIcon } from "@kineticui/icons"; export type PasskeyLoginProps = { /** * Run the WebAuthn ceremony: fetch options from your server, call navigator.credentials.get(), * and verify on the server. Resolve on success, throw on failure. Libraries like * @simplewebauthn/browser make this a few lines. */ onPasskey: () => Promise; /** Send a magic link to the email. */ onMagicLink: (email: string) => Promise; brand?: string; className?: string; }; type View = "choose" | "passkey" | "email" | "sent" | "error"; /** Passwordless sign-in: passkey (Face ID / Touch ID / Windows Hello) with a magic-link fallback and clear states. */ export function PasskeyLogin({ onPasskey, onMagicLink, brand = "Kinetic", className }: PasskeyLoginProps) { const mounted = useMounted(); const [view, setView] = React.useState("choose"); const [email, setEmail] = React.useState(""); const [error, setError] = React.useState(null); const [busy, setBusy] = React.useState(false); const supported = mounted && typeof window !== "undefined" && "PublicKeyCredential" in window; const passkey = async () => { setView("passkey"); setError(null); try { await onPasskey(); } catch (e) { setError(e instanceof Error ? e.message : "Passkey sign-in was cancelled."); setView("error"); } }; const magic = async (e: React.FormEvent) => { e.preventDefault(); if (!/^\S+@\S+\.\S+$/.test(email)) return setError("Enter a valid email."); setBusy(true); setError(null); try { await onMagicLink(email); setView("sent"); } catch { setError("We couldn't send the link. Try again."); } finally { setBusy(false); } }; return (

{view === "choose" ? ( <>

Sign in to {brand}

No passwords to remember.

{mounted && !supported ?

This browser doesn't support passkeys. Use email instead.

: null}

) : view === "passkey" ? ( <>

Waiting for your device…

Confirm with Face ID, Touch ID or your security key.

) : view === "email" ? ( ) : view === "sent" ? ( <>

Check your inbox

We sent a sign-in link to {email}. It expires in 15 minutes.

) : ( <>

That didn't work

{error}

)}

); }

Sign in to {brand}

Waiting for your device…

Get a magic link

Check your inbox

That didn't work

Passkey Login

Sign in to Kinetic

Installation

Exports