@better-auth-ui/heroui 1.6.0 → 1.6.1

package/dist/components/auth/magic-link.js

@@ -4,6 +4,7 @@ import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Sp
 import { useState } from "react";
 import { FieldSeparator } from "./field-separator";
 import { MagicLinkButton } from "./magic-link-button";
+import { PasskeyButton } from "./passkey-button";
 import { ProviderButtons } from "./provider-buttons";
 /**
  * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
@@ -14,7 +15,7 @@ import { ProviderButtons } from "./provider-buttons";
  * @returns The magic-link sign-in UI as a JSX element
  */
 export function MagicLink({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
-    const { basePaths, baseURL, localization, redirectTo, socialProviders, viewPaths } = useAuth();
+    const { basePaths, baseURL, localization, passkey, redirectTo, socialProviders, viewPaths } = useAuth();
     const [email, setEmail] = useState("");
     const { mutate: signInMagicLink, isPending: magicLinkPending } = useSignInMagicLink({
         onError: (error) => toast.danger(error.error?.message || error.message),
@@ -39,5 +40,5 @@ export function MagicLink({ className, socialLayout, socialPosition = "bottom",
         signInMagicLink({ email, callbackURL: `${baseURL}${redirectTo}` });
     };
     const showSeparator = !!socialProviders?.length;
-    return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendMagicLink] }), _jsx(MagicLinkButton, { view: "magicLink", isPending: isPending })] })] }), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signUp })] }) })] }));
+    return (_jsxs(Card, { className: cn("w-full max-w-sm p-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, value: email, onChange: setEmail, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendMagicLink] }), _jsx(MagicLinkButton, { view: "magicLink", isPending: isPending }), passkey && _jsx(PasskeyButton, { isPending: isPending })] })] }), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signUp })] }) })] }));
 }

package/dist/components/auth/passkey-button.d.ts

@@ -0,0 +1,4 @@
+export type PasskeyButtonProps = {
+    isPending: boolean;
+};
+export declare function PasskeyButton({ isPending }: PasskeyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/passkey-button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSignInPasskey } from "@better-auth-ui/react";
+import { Fingerprint } from "@gravity-ui/icons";
+import { Button, Spinner, toast } from "@heroui/react";
+export function PasskeyButton({ isPending }) {
+    const { localization, redirectTo, navigate } = useAuth();
+    const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const isDisabled = isPending || passkeyPending;
+    return (_jsxs(Button, { className: "w-full", variant: "tertiary", isDisabled: isDisabled, isPending: passkeyPending, onPress: () => signInPasskey(), children: [passkeyPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Fingerprint, {}), localization.auth.continueWith.replace("{{provider}}", localization.auth.passkey)] }));
+}

package/dist/components/auth/sign-in.js

@@ -4,6 +4,7 @@ import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label
 import { useState } from "react";
 import { FieldSeparator } from "./field-separator";
 import { MagicLinkButton } from "./magic-link-button";
+import { PasskeyButton } from "./passkey-button";
 import { ProviderButtons } from "./provider-buttons";
 /**
  * Render the sign-in UI using auth context for configuration and localization.
@@ -11,7 +12,7 @@ import { ProviderButtons } from "./provider-buttons";
  * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
  */
 export function SignIn({ className, socialLayout, socialPosition = "bottom", variant, ...props }) {
-    const { basePaths, baseURL, emailAndPassword, localization, magicLink, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
+    const { basePaths, baseURL, emailAndPassword, localization, magicLink, passkey, redirectTo, socialProviders, viewPaths, navigate } = useAuth();
     const [password, setPassword] = useState("");
     const { mutate: sendVerificationEmail } = useSendVerificationEmail({
         onError: (error) => toast.danger(error.error?.message || error.message),
@@ -60,5 +61,5 @@ export function SignIn({ className, socialLayout, socialPosition = "bottom", var
     };
     const isPending = signInPending || socialPending || socialRedirecting;
     const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length;
-    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), magicLink && (_jsx(MagicLinkButton, { view: "signIn", isPending: isPending }))] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
+    return (_jsxs(Card, { className: cn("w-full max-w-sm gap-4 md:p-6", className), variant: variant, ...props, children: [_jsx(Card.Header, { children: _jsx(Card.Title, { className: "text-xl font-semibold mb-1", children: localization.auth.signIn }) }), _jsxs(Card.Content, { className: "gap-4", children: [socialPosition === "top" && (_jsxs(_Fragment, { children: [!!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending })), showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or }))] })), emailAndPassword?.enabled && (_jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { name: "email", type: "email", autoComplete: "email", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.email }), _jsx(Input, { placeholder: localization.auth.emailPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), _jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", type: "password", autoComplete: "current-password", isDisabled: isPending, value: password, onChange: setPassword, children: [_jsx(Label, { children: localization.auth.password }), _jsx(Input, { placeholder: localization.auth.passwordPlaceholder, variant: variant === "transparent" ? "primary" : "secondary", required: true }), _jsx(FieldError, {})] }), emailAndPassword?.rememberMe && (_jsxs(Checkbox, { name: "rememberMe", isDisabled: isPending, variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, {}) }), _jsx(Checkbox.Content, { children: _jsx(Label, { children: localization.auth.rememberMe }) })] })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.signIn] }), magicLink && (_jsx(MagicLinkButton, { view: "signIn", isPending: isPending })), passkey && _jsx(PasskeyButton, { isPending: isPending })] })] })), socialPosition === "bottom" && (_jsxs(_Fragment, { children: [showSeparator && (_jsx(FieldSeparator, { children: localization.auth.or })), !!socialProviders?.length && (_jsx(ProviderButtons, { socialLayout: socialLayout, signInSocial: signInSocial, isPending: isPending }))] }))] }), _jsxs(Card.Footer, { className: "flex-col gap-3", children: [emailAndPassword?.forgotPassword && (_jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.forgotPassword}`, className: "no-underline hover:underline", children: localization.auth.forgotPasswordLink })), emailAndPassword?.enabled && (_jsxs(Description, { className: "text-sm", children: [localization.auth.needToCreateAnAccount, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signUp}`, className: "text-accent no-underline hover:underline decoration-accent-hover", children: localization.auth.signUp })] }))] })] }));
 }

package/dist/components/settings/security/passkey.d.ts

@@ -0,0 +1,8 @@
+export type PasskeyProps = {
+    passkey: {
+        id: string;
+        name?: string | null;
+        createdAt: Date;
+    };
+};
+export declare function Passkey({ passkey }: PasskeyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/security/passkey.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useDeletePasskey } from "@better-auth-ui/react";
+import { Fingerprint, Xmark } from "@gravity-ui/icons";
+import { Button, Spinner, toast } from "@heroui/react";
+export function Passkey({ passkey }) {
+    const { localization } = useAuth();
+    const { mutate: deletePasskey, isPending } = useDeletePasskey({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary", children: _jsx(Fingerprint, { className: "size-4.5" }) }), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium leading-tight", children: passkey.name || localization.auth.passkey }), _jsx("span", { className: "text-xs text-muted", children: new Date(passkey.createdAt).toLocaleString(undefined, {
+                            dateStyle: "medium",
+                            timeStyle: "short"
+                        }) })] }), _jsxs(Button, { className: "ml-auto shrink-0", variant: "outline", size: "sm", isPending: isPending, onPress: () => deletePasskey({ id: passkey.id }), children: [isPending ? _jsx(Spinner, { color: "current", size: "sm" }) : _jsx(Xmark, {}), localization.settings.delete] })] }));
+}

package/dist/components/settings/security/passkeys.d.ts

@@ -0,0 +1,6 @@
+import { type CardProps } from "@heroui/react";
+export type PasskeysProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+export declare function Passkeys({ className, variant, ...props }: PasskeysProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/settings/security/passkeys.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAddPasskey, useAuth, useListUserPasskeys } from "@better-auth-ui/react";
+import { Button, Card, cn, Skeleton, Spinner, toast } from "@heroui/react";
+import { Passkey } from "./passkey";
+export function Passkeys({ className, variant, ...props }) {
+    const { localization } = useAuth();
+    const { data: passkeys, isPending } = useListUserPasskeys({
+        throwOnError: (error) => {
+            if (error.error)
+                toast.danger(error.error.message);
+            return false;
+        }
+    });
+    const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
+        onError: (error) => toast.danger(error.error?.message || error.message)
+    });
+    return (_jsxs("div", { children: [_jsx("h2", { className: cn("text-sm font-semibold mb-3"), children: localization.settings.passkeys }), _jsx(Card, { className: cn(className), variant: variant, ...props, children: _jsxs(Card.Content, { className: "gap-0", children: [_jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: localization.settings.passkeysDescription }), _jsx("p", { className: "text-muted text-xs mt-0.5", children: localization.settings.passkeysInstructions })] }), _jsxs(Button, { className: "shrink-0", size: "sm", isPending: isAdding, isDisabled: isPending, onPress: () => addPasskey(), children: [isAdding && _jsx(Spinner, { color: "current", size: "sm" }), localization.settings.addPasskey] })] }), isPending ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), _jsx(PasskeySkeleton, {})] })) : (passkeys?.map((passkey) => (_jsxs("div", { children: [_jsx("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), _jsx(Passkey, { passkey: passkey })] }, passkey.id))))] }) })] }));
+}
+function PasskeySkeleton() {
+    return (_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 rounded-xl" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-20 rounded-lg" })] })] }) }));
+}

package/dist/components/settings/security/security-settings.js

@@ -5,6 +5,7 @@ import { ActiveSessions } from "./active-sessions";
 import { ChangePassword } from "./change-password";
 import { DangerZone } from "./danger-zone";
 import { LinkedAccounts } from "./linked-accounts";
+import { Passkeys } from "./passkeys";
 /**
  * Renders the security settings layout including password management, linked accounts, and active sessions.
  *
@@ -16,6 +17,6 @@ import { LinkedAccounts } from "./linked-accounts";
  * @returns The security settings container as a JSX element.
  */
 export function SecuritySettings({ className, variant, ...props }) {
-    const { deleteUser, emailAndPassword, socialProviders } = useAuth();
-    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [emailAndPassword?.enabled && _jsx(ChangePassword, { variant: variant }), !!socialProviders?.length && _jsx(LinkedAccounts, { variant: variant }), _jsx(ActiveSessions, { variant: variant }), deleteUser?.enabled && _jsx(DangerZone, { variant: variant })] }));
+    const { deleteUser, emailAndPassword, passkey, socialProviders } = useAuth();
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4 md:gap-6", className), ...props, children: [emailAndPassword?.enabled && _jsx(ChangePassword, { variant: variant }), !!socialProviders?.length && _jsx(LinkedAccounts, { variant: variant }), passkey && _jsx(Passkeys, { variant: variant }), _jsx(ActiveSessions, { variant: variant }), deleteUser?.enabled && _jsx(DangerZone, { variant: variant })] }));
 }

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/auth/auth-provider";
 export * from "./components/auth/forgot-password";
 export * from "./components/auth/magic-link";
 export * from "./components/auth/magic-link-button";
+export * from "./components/auth/passkey-button";
 export * from "./components/auth/provider-buttons";
 export * from "./components/auth/reset-password";
 export * from "./components/auth/sign-in";
@@ -26,6 +27,7 @@ export * from "./components/settings/security/change-password";
 export * from "./components/settings/security/danger-zone";
 export * from "./components/settings/security/delete-user";
 export * from "./components/settings/security/linked-accounts";
+export * from "./components/settings/security/passkeys";
 export * from "./components/settings/security/security-settings";
 export * from "./components/settings/settings";
 export * from "./components/user/user-avatar";

package/dist/index.js

@@ -4,6 +4,7 @@ export * from "./components/auth/auth-provider";
 export * from "./components/auth/forgot-password";
 export * from "./components/auth/magic-link";
 export * from "./components/auth/magic-link-button";
+export * from "./components/auth/passkey-button";
 export * from "./components/auth/provider-buttons";
 export * from "./components/auth/reset-password";
 export * from "./components/auth/sign-in";
@@ -27,6 +28,7 @@ export * from "./components/settings/security/change-password";
 export * from "./components/settings/security/danger-zone";
 export * from "./components/settings/security/delete-user";
 export * from "./components/settings/security/linked-accounts";
+export * from "./components/settings/security/passkeys";
 export * from "./components/settings/security/security-settings";
 export * from "./components/settings/settings";
 export * from "./components/user/user-avatar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "scripts": {
     "build": "tsc && bun styles",
@@ -57,6 +57,11 @@
     "react-dom": ">=19.2.5",
     "bowser": ">=2.11.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/better-auth-ui/better-auth-ui",
+    "directory": "packages/heroui"
+  },
   "publishConfig": {
     "access": "public"
   }

package/src/components/auth/magic-link.tsx

@@ -22,6 +22,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
 import { MagicLinkButton } from "./magic-link-button"
+import { PasskeyButton } from "./passkey-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export type MagicLinkProps = {
@@ -50,6 +51,7 @@ export function MagicLink({
     basePaths,
     baseURL,
     localization,
+    passkey,
     redirectTo,
     socialProviders,
     viewPaths
@@ -145,6 +147,8 @@ export function MagicLink({
             </Button>
 
             <MagicLinkButton view="magicLink" isPending={isPending} />
+
+            {passkey && <PasskeyButton isPending={isPending} />}
           </div>
         </Form>
 

package/src/components/auth/passkey-button.tsx

@@ -0,0 +1,36 @@
+import { useAuth, useSignInPasskey } from "@better-auth-ui/react"
+import { Fingerprint } from "@gravity-ui/icons"
+import { Button, Spinner, toast } from "@heroui/react"
+
+export type PasskeyButtonProps = {
+  isPending: boolean
+}
+
+export function PasskeyButton({ isPending }: PasskeyButtonProps) {
+  const { localization, redirectTo, navigate } = useAuth()
+
+  const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(
+    {
+      onError: (error) => toast.danger(error.error?.message || error.message),
+      onSuccess: () => navigate({ to: redirectTo })
+    }
+  )
+
+  const isDisabled = isPending || passkeyPending
+
+  return (
+    <Button
+      className="w-full"
+      variant="tertiary"
+      isDisabled={isDisabled}
+      isPending={passkeyPending}
+      onPress={() => signInPasskey()}
+    >
+      {passkeyPending ? <Spinner color="current" size="sm" /> : <Fingerprint />}
+      {localization.auth.continueWith.replace(
+        "{{provider}}",
+        localization.auth.passkey
+      )}
+    </Button>
+  )
+}

package/src/components/auth/sign-in.tsx

@@ -24,6 +24,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
 import { MagicLinkButton } from "./magic-link-button"
+import { PasskeyButton } from "./passkey-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export interface SignInProps {
@@ -51,6 +52,7 @@ export function SignIn({
     emailAndPassword,
     localization,
     magicLink,
+    passkey,
     redirectTo,
     socialProviders,
     viewPaths,
@@ -212,6 +214,8 @@ export function SignIn({
               {magicLink && (
                 <MagicLinkButton view="signIn" isPending={isPending} />
               )}
+
+              {passkey && <PasskeyButton isPending={isPending} />}
             </div>
           </Form>
         )}

package/src/components/settings/security/passkey.tsx

@@ -0,0 +1,51 @@
+import { useAuth, useDeletePasskey } from "@better-auth-ui/react"
+import { Fingerprint, Xmark } from "@gravity-ui/icons"
+import { Button, Spinner, toast } from "@heroui/react"
+
+export type PasskeyProps = {
+  passkey: {
+    id: string
+    name?: string | null
+    createdAt: Date
+  }
+}
+
+export function Passkey({ passkey }: PasskeyProps) {
+  const { localization } = useAuth()
+
+  const { mutate: deletePasskey, isPending } = useDeletePasskey({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Fingerprint className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight">
+          {passkey.name || localization.auth.passkey}
+        </span>
+
+        <span className="text-xs text-muted">
+          {new Date(passkey.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        isPending={isPending}
+        onPress={() => deletePasskey({ id: passkey.id })}
+      >
+        {isPending ? <Spinner color="current" size="sm" /> : <Xmark />}
+        {localization.settings.delete}
+      </Button>
+    </div>
+  )
+}

package/src/components/settings/security/passkeys.tsx

@@ -0,0 +1,104 @@
+import {
+  useAddPasskey,
+  useAuth,
+  useListUserPasskeys
+} from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Skeleton,
+  Spinner,
+  toast
+} from "@heroui/react"
+
+import { Passkey } from "./passkey"
+
+export type PasskeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function Passkeys({
+  className,
+  variant,
+  ...props
+}: PasskeysProps & CardProps) {
+  const { localization } = useAuth()
+
+  const { data: passkeys, isPending } = useListUserPasskeys({
+    throwOnError: (error) => {
+      if (error.error) toast.danger(error.error.message)
+      return false
+    }
+  })
+
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
+    onError: (error) => toast.danger(error.error?.message || error.message)
+  })
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.passkeys}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content className="gap-0">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <p className="text-sm font-medium leading-tight">
+                {localization.settings.passkeysDescription}
+              </p>
+
+              <p className="text-muted text-xs mt-0.5">
+                {localization.settings.passkeysInstructions}
+              </p>
+            </div>
+
+            <Button
+              className="shrink-0"
+              size="sm"
+              isPending={isAdding}
+              isDisabled={isPending}
+              onPress={() => addPasskey()}
+            >
+              {isAdding && <Spinner color="current" size="sm" />}
+              {localization.settings.addPasskey}
+            </Button>
+          </div>
+
+          {isPending ? (
+            <>
+              <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+              <PasskeySkeleton />
+            </>
+          ) : (
+            passkeys?.map((passkey) => (
+              <div key={passkey.id}>
+                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                <Passkey passkey={passkey} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}
+
+function PasskeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-24 rounded-lg" />
+          <Skeleton className="h-3 w-20 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/settings/security/security-settings.tsx

@@ -6,6 +6,7 @@ import { ActiveSessions } from "./active-sessions"
 import { ChangePassword } from "./change-password"
 import { DangerZone } from "./danger-zone"
 import { LinkedAccounts } from "./linked-accounts"
+import { Passkeys } from "./passkeys"
 
 export type SecuritySettingsProps = {
   className?: string
@@ -27,7 +28,7 @@ export function SecuritySettings({
   variant,
   ...props
 }: SecuritySettingsProps & ComponentProps<"div">) {
-  const { deleteUser, emailAndPassword, socialProviders } = useAuth()
+  const { deleteUser, emailAndPassword, passkey, socialProviders } = useAuth()
 
   return (
     <div
@@ -36,6 +37,7 @@ export function SecuritySettings({
     >
       {emailAndPassword?.enabled && <ChangePassword variant={variant} />}
       {!!socialProviders?.length && <LinkedAccounts variant={variant} />}
+      {passkey && <Passkeys variant={variant} />}
       <ActiveSessions variant={variant} />
       {deleteUser?.enabled && <DangerZone variant={variant} />}
     </div>

package/src/index.tsx

@@ -5,6 +5,7 @@ export * from "./components/auth/auth-provider"
 export * from "./components/auth/forgot-password"
 export * from "./components/auth/magic-link"
 export * from "./components/auth/magic-link-button"
+export * from "./components/auth/passkey-button"
 export * from "./components/auth/provider-buttons"
 export * from "./components/auth/reset-password"
 export * from "./components/auth/sign-in"
@@ -28,6 +29,7 @@ export * from "./components/settings/security/change-password"
 export * from "./components/settings/security/danger-zone"
 export * from "./components/settings/security/delete-user"
 export * from "./components/settings/security/linked-accounts"
+export * from "./components/settings/security/passkeys"
 export * from "./components/settings/security/security-settings"
 export * from "./components/settings/settings"
 export * from "./components/user/user-avatar"

package/dist/components/account/account.d.ts

@@ -1,18 +0,0 @@
-import type { AnyAuthConfig } from "@better-auth-ui/react";
-import type { AccountView } from "@better-auth-ui/react/core";
-import { type TabsProps } from "@heroui/react";
-export type AccountProps = AnyAuthConfig & {
-    className?: string;
-    path?: string;
-    view?: AccountView;
-    hideNav?: boolean;
-};
-/**
- * Selects and renders the appropriate account view component.
- *
- * @param path - Route path used to resolve an account view when `view` is not provided
- * @param view - Explicit auth view to render (e.g., "userProfile")
- * @param hideNav - Hide the navigation tabs
- */
-export declare function Account({ className, view, path, hideNav, ...config }: AccountProps): import("react/jsx-runtime").JSX.Element;
-export declare function ResponsiveTabs({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/account/account.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ShieldCheckIcon, UserCircleIcon } from "@heroicons/react/24/outline";
-import { cn, Tabs } from "@heroui/react";
-import { useAuth } from "../../hooks/use-auth";
-import { AccountSettings } from "./settings/account-settings";
-/**
- * Selects and renders the appropriate account view component.
- *
- * @param path - Route path used to resolve an account view when `view` is not provided
- * @param view - Explicit auth view to render (e.g., "userProfile")
- * @param hideNav - Hide the navigation tabs
- */
-export function Account({ className, view, path, hideNav, ...config }) {
-    const { basePaths, viewPaths } = useAuth(config);
-    if (!view && !path) {
-        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
-    }
-    const accountPathViews = Object.fromEntries(Object.entries(viewPaths.account).map(([k, v]) => [v, k]));
-    const currentView = view || (path ? accountPathViews[path] : undefined);
-    return (_jsxs(ResponsiveTabs, { selectedKey: currentView, className: "w-full", children: [_jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": "Account", className: cn("overflow-auto md:w-64 lg:w-72 xl:w-80", hideNav && "hidden"), children: [_jsxs(Tabs.Tab, { id: "settings", href: `${basePaths.account}/${viewPaths.account.settings}`, className: "gap-1.5", children: [_jsx(UserCircleIcon, { className: "size-4" }), "Account", _jsx(Tabs.Indicator, {})] }), _jsxs(Tabs.Tab, { id: "security", href: `${basePaths.account}/${viewPaths.account.security}`, className: "gap-1.5", children: [_jsx(ShieldCheckIcon, { className: "size-4" }), "Security", _jsx(Tabs.Indicator, {})] })] }) }), _jsx(Tabs.Panel, { id: "settings", className: "md:pt-0 px-0 md:px-2", children: _jsx(AccountSettings, {}) }), _jsx(Tabs.Panel, { id: "security", children: "Security" })] }));
-}
-export function ResponsiveTabs({ className, ...props }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { className: cn("md:hidden", className), orientation: "horizontal", ...props }), _jsx(Tabs, { className: cn("hidden md:flex", className), orientation: "vertical", ...props })] }));
-}

package/dist/components/account/settings/account-settings.d.ts

@@ -1,5 +0,0 @@
-import type { AnyAuthConfig } from "@better-auth-ui/react";
-export type AccountSettingsProps = AnyAuthConfig & {
-    className?: string;
-};
-export declare function AccountSettings({ className, ...config }: AccountSettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/account/settings/account-settings.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../../lib/utils";
-import { UserProfile } from "./user-profile";
-export function AccountSettings({ className, ...config }) {
-    return (_jsx("div", { className: cn("w-full flex flex-col gap-4 md:gap-6", className), children: _jsx(UserProfile, { ...config }) }));
-}

package/dist/components/account/settings/settings.d.ts

@@ -1,5 +0,0 @@
-import type { AnyAuthConfig } from "@better-auth-ui/react";
-export type SettingsProps = AnyAuthConfig & {
-    className?: string;
-};
-export declare function Settings({ className, ...config }: SettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/account/settings/settings.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { UserProfile } from "./user-profile";
-export function Settings({ className, ...config }) {
-    return (_jsx("div", { className: className, children: _jsx(UserProfile, { ...config }) }));
-}

package/dist/components/account/settings/user-profile.d.ts

@@ -1,5 +0,0 @@
-import { type AnyAuthConfig } from "@better-auth-ui/react";
-export type UserProfileProps = AnyAuthConfig & {
-    className?: string;
-};
-export declare function UserProfile({ className, ...config }: UserProfileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/account/settings/user-profile.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useUpdateUser } from "@better-auth-ui/react";
-import { CheckIcon, PencilIcon } from "@heroicons/react/24/outline";
-import { Button, Card, Description, FieldError, Fieldset, Form, Input, Label, Skeleton, Spinner, TextField } from "@heroui/react";
-import { UserAvatar } from "../../user/user-avatar";
-export function UserProfile({ className, ...config }) {
-    const { authClient, localization } = useAuth(config);
-    const { data: sessionData, isPending: isSessionPending } = authClient.useSession();
-    const [state, formAction, isPending] = useUpdateUser(config);
-    if (isSessionPending) {
-        return _jsx(UserProfileSkeleton, {});
-    }
-    return (_jsx(Card, { className: "p-4 md:p-6", children: _jsx(Form, { action: formAction, children: _jsxs(Fieldset, { className: "w-full gap-4 md:gap-6", children: [_jsx(Fieldset.Legend, { className: "text-xl", children: localization.account.profile }), _jsx(Description, {}), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { isIconOnly: true, variant: "ghost", className: "p-0 h-auto w-auto rounded-full", children: [_jsx(UserAvatar, { size: "lg" }), _jsx("span", { className: "absolute right-0 bottom-0 size-3.5 rounded-full bg-background ring-2 ring-surface-quaternary flex items-center justify-center", children: _jsx(PencilIcon, { className: "size-2 text-muted" }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: sessionData?.user?.displayUsername ||
-                                            sessionData?.user?.name ||
-                                            sessionData?.user?.email }), (sessionData?.user?.displayUsername ||
-                                        sessionData?.user?.name) && (_jsx("p", { className: "text-muted text-xs leading-none", children: sessionData?.user?.email }))] })] }), _jsx(Fieldset.Group, { children: _jsxs(TextField, { name: "name", defaultValue: sessionData?.user?.name || state.name, isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.name }), _jsx(Input, { placeholder: localization.auth.name }), _jsx(FieldError, {})] }) }), _jsx(Fieldset.Actions, { children: _jsxs(Button, { type: "submit", isPending: isPending, children: [isPending ? (_jsx(Spinner, { color: "current", size: "sm" })) : (_jsx(CheckIcon, { className: "size-4" })), localization.account.saveChanges] }) })] }) }) }));
-}
-function UserProfileSkeleton() {
-    return (_jsxs(Card, { className: "p-4 md:p-6 gap-4 md:gap-6", children: [_jsx(Skeleton, { className: "h-7 w-16 rounded-xl" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-4 mt-0.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 mt-0.5 w-32 rounded-lg" })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Skeleton, { className: "h-4 w-12 my-0.5 rounded-lg" }), _jsx(Skeleton, { className: "h-9 w-full rounded-xl" })] }), _jsx(Skeleton, { className: "h-10 md:h-9 w-36 rounded-full mt-1" })] }));
-}

package/dist/components/settings/account/accounts.d.ts

@@ -1,14 +0,0 @@
-import { type CardProps } from "@heroui/react";
-export type AccountsProps = {
-    className?: string;
-    variant?: CardProps["variant"];
-};
-/**
- * Render a card that lists and manages all device sessions for the current user.
- *
- * Shows each session with user information and actions to switch to or revoke a session.
- * When device session data is loading, a pending placeholder row is displayed.
- *
- * @returns A JSX element containing the accounts management card
- */
-export declare function Accounts({ className, ...props }: AccountsProps & CardProps): import("react/jsx-runtime").JSX.Element;