@better-auth-ui/heroui 1.6.0

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,20 @@
+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/auth/auth-provider.d.ts

@@ -0,0 +1,9 @@
+import { type AuthProviderProps as AuthProviderPropsPrimitive } from "@better-auth-ui/react";
+export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">;
+/**
+ * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
+ *
+ * @param children - React nodes to render inside the authentication provider
+ * @returns A React element that renders an authentication provider configured with the provided props and toast handler
+ */
+export declare function AuthProvider({ children, navigate, ...config }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/auth-provider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AuthProvider as AuthProviderPrimitive } from "@better-auth-ui/react";
+import { RouterProvider } from "@heroui/react";
+/**
+ * Provides an authentication context by rendering an auth provider with the sonner toast handler injected, forwarding remaining configuration and rendering `children` inside it.
+ *
+ * @param children - React nodes to render inside the authentication provider
+ * @returns A React element that renders an authentication provider configured with the provided props and toast handler
+ */
+export function AuthProvider({ children, navigate, ...config }) {
+    return (_jsx(AuthProviderPrimitive, { navigate: navigate, ...config, children: _jsx(RouterProvider, { navigate: (path) => navigate({ to: path }), children: children }) }));
+}

package/dist/components/auth/auth.d.ts

@@ -0,0 +1,23 @@
+import type { AuthView } from "@better-auth-ui/react/core";
+import type { CardProps } from "@heroui/react";
+import type { SocialLayout } from "./provider-buttons";
+export type AuthProps = {
+    className?: string;
+    path?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+    /** @remarks `AuthView` */
+    view?: AuthView;
+};
+/**
+ * Render the appropriate authentication view based on the provided `view` or `path`.
+ *
+ * @param path - Route path used to resolve an auth view when `view` is not provided
+ * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
+ * @param socialPosition - Position for social buttons ("top" or "bottom")
+ * @param variant - Variant to apply to the card
+ * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
+ * @returns The React element for the resolved authentication view
+ */
+export declare function Auth({ path, socialLayout, socialPosition, view, ...props }: AuthProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/auth.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { ForgotPassword } from "./forgot-password";
+import { MagicLink } from "./magic-link";
+import { ResetPassword } from "./reset-password";
+import { SignIn } from "./sign-in";
+import { SignOut } from "./sign-out";
+import { SignUp } from "./sign-up";
+/**
+ * Render the appropriate authentication view based on the provided `view` or `path`.
+ *
+ * @param path - Route path used to resolve an auth view when `view` is not provided
+ * @param socialLayout - Social layout to apply to sign-in/sign-up/magic-link views
+ * @param socialPosition - Position for social buttons ("top" or "bottom")
+ * @param variant - Variant to apply to the card
+ * @param view - Explicit auth view to render (e.g., "signIn", "signUp")
+ * @returns The React element for the resolved authentication view
+ */
+export function Auth({ path, socialLayout, socialPosition, view, ...props }) {
+    const { viewPaths } = useAuth();
+    if (!view && !path) {
+        throw new Error("[Better Auth UI] Either `view` or `path` must be provided");
+    }
+    const authPathViews = Object.fromEntries(Object.entries(viewPaths.auth).map(([k, v]) => [v, k]));
+    const currentView = view || (path ? authPathViews[path] : undefined);
+    switch (currentView) {
+        case "signIn":
+            return (_jsx(SignIn, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "signUp":
+            return (_jsx(SignUp, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "magicLink":
+            return (_jsx(MagicLink, { socialLayout: socialLayout, socialPosition: socialPosition, ...props }));
+        case "forgotPassword":
+            return _jsx(ForgotPassword, { ...props });
+        case "resetPassword":
+            return _jsx(ResetPassword, { ...props });
+        case "signOut":
+            return _jsx(SignOut, { ...props });
+        default:
+            throw new Error(`[Better Auth UI] Valid views are: ${Object.keys(viewPaths.auth).join(", ")}`);
+    }
+}

package/dist/components/auth/field-separator.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function FieldSeparator({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/field-separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "@heroui/react";
+export function FieldSeparator({ children }) {
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Separator, { className: "flex-1" }), _jsx("p", { className: "text-xs text-muted shrink-0", children: children }), _jsx(Separator, { className: "flex-1" })] }));
+}

package/dist/components/auth/forgot-password.d.ts

@@ -0,0 +1,15 @@
+import { type CardProps } from "@heroui/react";
+export type ForgotPasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card-based "Forgot Password" form that sends a password-reset email.
+ *
+ * The form displays an email input, submit button, and a link back to sign-in.
+ * Toasts are displayed on success or error via the `useForgotPassword` hook.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export declare function ForgotPassword({ className, variant, ...props }: ForgotPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/forgot-password.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useRequestPasswordReset } from "@better-auth-ui/react";
+import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+/**
+ * Render a card-based "Forgot Password" form that sends a password-reset email.
+ *
+ * The form displays an email input, submit button, and a link back to sign-in.
+ * Toasts are displayed on success or error via the `useForgotPassword` hook.
+ *
+ * @param className - Optional additional CSS class names applied to the card
+ * @returns The forgot-password form UI as a JSX element
+ */
+export function ForgotPassword({ className, variant, ...props }) {
+    const { basePaths, localization, viewPaths, navigate } = useAuth();
+    const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetEmailSent);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    function handleSubmit(e) {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        requestPasswordReset({ email: formData.get("email") });
+    }
+    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.forgotPassword }) }), _jsx(Card.Content, { children: _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, required: true, variant: variant === "transparent" ? "primary" : "secondary" }), _jsx(FieldError, {})] }), _jsxs(Button, { type: "submit", className: "w-full", isPending: isPending, children: [isPending && _jsx(Spinner, { color: "current", size: "sm" }), localization.auth.sendResetLink] })] }) }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
+}

package/dist/components/auth/magic-link-button.d.ts

@@ -0,0 +1,13 @@
+import type { AuthView } from "@better-auth-ui/core";
+export type MagicLinkButtonProps = {
+    isPending: boolean;
+    view?: AuthView;
+};
+/**
+ * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
+ *
+ * @param isPending - If true, applies disabled styling and prevents interaction
+ * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
+ * @returns The rendered Link element with the appropriate href, icon, and label
+ */
+export declare function MagicLinkButton({ isPending, view }: MagicLinkButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth } from "@better-auth-ui/react";
+import { Envelope, Lock } from "@gravity-ui/icons";
+import { cn, Link } from "@heroui/react";
+import { buttonVariants } from "@heroui/styles";
+/**
+ * Renders a full-width tertiary link-style button that navigates to either the magic-link or sign-in route.
+ *
+ * @param isPending - If true, applies disabled styling and prevents interaction
+ * @param view - Current auth view; when `"magicLink"`, the button targets the sign-in/password variant
+ * @returns The rendered Link element with the appropriate href, icon, and label
+ */
+export function MagicLinkButton({ isPending, view }) {
+    const { basePaths, viewPaths, localization } = useAuth();
+    const isMagicLinkView = view === "magicLink";
+    return (_jsxs(Link, { href: `${basePaths.auth}/${isMagicLinkView ? viewPaths.auth.signIn : viewPaths.auth.magicLink}`, className: cn(buttonVariants({ variant: "tertiary" }), "w-full gap-2", isPending && "status-disabled pointer-events-none"), children: [isMagicLinkView ? _jsx(Lock, {}) : _jsx(Envelope, {}), localization.auth.continueWith.replace("{{provider}}", isMagicLinkView
+                ? localization.auth.password
+                : localization.auth.magicLink)] }));
+}

package/dist/components/auth/magic-link.d.ts

@@ -0,0 +1,17 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export type MagicLinkProps = {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+};
+/**
+ * Render a card-based sign-in form that sends an email magic link and optionally shows social provider buttons.
+ *
+ * @param className - Additional CSS class names applied to the card container
+ * @param socialLayout - Layout style for social provider buttons
+ * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @returns The magic-link sign-in UI as a JSX element
+ */
+export declare function MagicLink({ className, socialLayout, socialPosition, variant, ...props }: MagicLinkProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSignInMagicLink, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Card, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-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.
+ *
+ * @param className - Additional CSS class names applied to the card container
+ * @param socialLayout - Layout style for social provider buttons
+ * @param socialPosition - Position of social provider buttons; `"top"` or `"bottom"`. Defaults to `"bottom"`.
+ * @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 [email, setEmail] = useState("");
+    const { mutate: signInMagicLink, isPending: magicLinkPending } = useSignInMagicLink({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            setEmail("");
+            toast.success(localization.auth.magicLinkSent);
+        }
+    });
+    const [socialRedirecting, setSocialRedirecting] = useState(false);
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            setSocialRedirecting(true);
+            setTimeout(() => {
+                setSocialRedirecting(false);
+            }, 5000);
+        }
+    });
+    const isPending = magicLinkPending || socialPending || socialRedirecting;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        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 })] }) })] }));
+}

package/dist/components/auth/provider-buttons.d.ts

@@ -0,0 +1,19 @@
+import type { SocialProvider } from "better-auth/social-providers";
+export type ProviderButtonsProps = {
+    isPending: boolean;
+    socialLayout?: SocialLayout;
+    signInSocial: (params: {
+        provider: SocialProvider;
+        callbackURL: string;
+    }) => void;
+};
+export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid";
+/**
+ * Render social provider sign-in buttons and handle initiation and pending state.
+ *
+ * @param isPending - Disables all provider buttons when true.
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export declare function ProviderButtons({ isPending, socialLayout, signInSocial }: ProviderButtonsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/provider-buttons.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getProviderName } from "@better-auth-ui/core";
+import { providerIcons, useAuth } from "@better-auth-ui/react";
+import { Button, cn } from "@heroui/react";
+import { useMemo } from "react";
+/**
+ * Render social provider sign-in buttons and handle initiation and pending state.
+ *
+ * @param isPending - Disables all provider buttons when true.
+ * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
+ * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
+ * @returns The JSX element that renders the configured social provider buttons.
+ */
+export function ProviderButtons({ isPending, socialLayout = "auto", signInSocial }) {
+    const { baseURL, localization, redirectTo, socialProviders } = useAuth();
+    const callbackURL = `${baseURL}${redirectTo}`;
+    const resolvedSocialLayout = useMemo(() => {
+        if (socialLayout === "auto") {
+            if (socialProviders?.length && socialProviders.length >= 4) {
+                return "horizontal";
+            }
+            return "vertical";
+        }
+        return socialLayout;
+    }, [socialLayout, socialProviders?.length]);
+    return (_jsx("div", { className: cn("gap-3", resolvedSocialLayout === "grid" && "grid grid-cols-2", resolvedSocialLayout === "vertical" && "flex flex-col", resolvedSocialLayout === "horizontal" && "flex flex-wrap"), children: socialProviders?.map((provider) => {
+            const ProviderIcon = providerIcons[provider];
+            return (_jsxs(Button, { className: cn("w-full", resolvedSocialLayout === "horizontal" && "flex-1"), variant: "tertiary", isPending: isPending, onPress: () => signInSocial({ provider, callbackURL }), children: [_jsx(ProviderIcon, {}), resolvedSocialLayout === "vertical"
+                        ? localization.auth.continueWith.replace("{{provider}}", getProviderName(provider))
+                        : resolvedSocialLayout === "grid"
+                            ? getProviderName(provider)
+                            : null] }, provider));
+        }) }));
+}

package/dist/components/auth/reset-password.d.ts

@@ -0,0 +1,11 @@
+import { type CardProps } from "@heroui/react";
+export type ResetPasswordProps = {
+    className?: string;
+    variant?: CardProps["variant"];
+};
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export declare function ResetPassword({ className, variant, ...props }: ResetPasswordProps & CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/reset-password.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useResetPassword } from "@better-auth-ui/react";
+import { Eye, EyeSlash } from "@gravity-ui/icons";
+import { Button, Card, cn, Description, FieldError, Form, InputGroup, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useEffect, useState } from "react";
+/**
+ * Renders a reset password form that verifies a "token" URL parameter on mount and redirects to sign-in if absent.
+ *
+ * Renders password (and optional confirm-password) inputs with visibility toggles, applies min/max length constraints from the auth configuration, shows field errors, and submits the new password to the auth client.
+ */
+export function ResetPassword({ className, variant, ...props }) {
+    const { basePaths, emailAndPassword, localization, viewPaths, navigate } = useAuth();
+    const { mutate: resetPassword, isPending } = useResetPassword({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            toast.success(localization.auth.passwordResetSuccess);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    });
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false);
+    useEffect(() => {
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+        }
+    }, [
+        basePaths.auth,
+        localization.auth.invalidResetPasswordToken,
+        viewPaths.auth.signIn,
+        navigate
+    ]);
+    function handleSubmit(e) {
+        e.preventDefault();
+        const searchParams = new URLSearchParams(window.location.search);
+        const token = searchParams.get("token");
+        if (!token) {
+            toast.danger(localization.auth.invalidResetPasswordToken);
+            navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` });
+            return;
+        }
+        const formData = new FormData(e.currentTarget);
+        const password = formData.get("password");
+        const confirmPassword = formData.get("confirmPassword");
+        if (emailAndPassword?.confirmPassword && password !== confirmPassword) {
+            toast.danger(localization.auth.passwordsDoNotMatch);
+            return;
+        }
+        resetPassword({ token, newPassword: password });
+    }
+    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.resetPassword }) }), _jsx(Card.Content, { children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "password", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.password }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { name: "password", placeholder: localization.auth.newPasswordPlaceholder, type: isPasswordVisible ? "text" : "password", required: true }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsPasswordVisible(!isPasswordVisible), isDisabled: isPending, children: isPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] }), emailAndPassword?.confirmPassword && (_jsxs(TextField, { minLength: emailAndPassword?.minPasswordLength, maxLength: emailAndPassword?.maxPasswordLength, name: "confirmPassword", autoComplete: "new-password", isDisabled: isPending, children: [_jsx(Label, { children: localization.auth.confirmPassword }), _jsxs(InputGroup, { variant: variant === "transparent" ? "primary" : "secondary", children: [_jsx(InputGroup.Input, { placeholder: localization.auth.confirmPasswordPlaceholder, type: isConfirmPasswordVisible ? "text" : "password", required: true, name: "confirmPassword" }), _jsx(InputGroup.Suffix, { className: "px-0", children: _jsx(Button, { isIconOnly: true, "aria-label": isConfirmPasswordVisible
+                                                    ? localization.auth.hidePassword
+                                                    : localization.auth.showPassword, size: "sm", variant: "ghost", onPress: () => setIsConfirmPasswordVisible(!isConfirmPasswordVisible), isDisabled: isPending, children: isConfirmPasswordVisible ? _jsx(EyeSlash, {}) : _jsx(Eye, {}) }) })] }), _jsx(FieldError, {})] })), _jsx("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.resetPassword] }) })] }) }), _jsx(Card.Footer, { className: "flex-col", children: _jsxs(Description, { className: "text-sm", children: [localization.auth.rememberYourPassword, " ", _jsx(Link, { href: `${basePaths.auth}/${viewPaths.auth.signIn}`, className: "text-accent decoration-accent no-underline hover:underline", children: localization.auth.signIn })] }) })] }));
+}

package/dist/components/auth/sign-in.d.ts

@@ -0,0 +1,14 @@
+import { type CardProps } from "@heroui/react";
+import { type SocialLayout } from "./provider-buttons";
+export interface SignInProps {
+    className?: string;
+    socialLayout?: SocialLayout;
+    socialPosition?: "top" | "bottom";
+    variant?: CardProps["variant"];
+}
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @returns The sign-in JSX element containing email/password fields, optional magic-link button, and social provider buttons.
+ */
+export declare function SignIn({ className, socialLayout, socialPosition, variant, ...props }: SignInProps & CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useSendVerificationEmail, useSignInEmail, useSignInSocial } from "@better-auth-ui/react";
+import { Button, Card, Checkbox, cn, Description, FieldError, Form, Input, Label, Link, Spinner, TextField, toast } from "@heroui/react";
+import { useState } from "react";
+import { FieldSeparator } from "./field-separator";
+import { MagicLinkButton } from "./magic-link-button";
+import { ProviderButtons } from "./provider-buttons";
+/**
+ * Render the sign-in UI using auth context for configuration and localization.
+ *
+ * @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 [password, setPassword] = useState("");
+    const { mutate: sendVerificationEmail } = useSendVerificationEmail({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    });
+    const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
+        onError: (error, { email }) => {
+            setPassword("");
+            if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+                toast.danger(error.error?.message || error.message, {
+                    actionProps: {
+                        children: localization.auth.resend,
+                        onClick: () => sendVerificationEmail({
+                            email,
+                            callbackURL: `${baseURL}${redirectTo}`
+                        })
+                    }
+                });
+            }
+            else {
+                toast.danger(error.error?.message || error.message);
+            }
+        },
+        onSuccess: () => navigate({ to: redirectTo })
+    });
+    const [socialRedirecting, setSocialRedirecting] = useState(false);
+    const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
+        onError: (error) => toast.danger(error.error?.message || error.message),
+        onSuccess: () => {
+            setSocialRedirecting(true);
+            setTimeout(() => {
+                setSocialRedirecting(false);
+            }, 5000);
+        }
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const email = formData.get("email");
+        const rememberMe = formData.get("rememberMe") === "on";
+        signInEmail({
+            email,
+            password,
+            ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+        });
+    };
+    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 })] }))] })] }));
+}

package/dist/components/auth/sign-out.d.ts

@@ -0,0 +1,9 @@
+export type SignOutProps = {
+    className?: string;
+};
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export declare function SignOut({ className }: SignOutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth, useSignOut } from "@better-auth-ui/react";
+import { cn, Spinner, toast } from "@heroui/react";
+import { useEffect, useRef } from "react";
+/**
+ * Initiates sign-out on mount and renders a loading card while sign-out proceeds.
+ *
+ * @returns A Card containing a centered Spinner shown during the sign-out process
+ */
+export function SignOut({ className }) {
+    const { basePaths, navigate, viewPaths } = useAuth();
+    const { mutate: signOut } = useSignOut({
+        onError: (error) => {
+            toast.danger(error.error?.message || error.message);
+            navigate({
+                to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+                replace: true
+            });
+        },
+        onSuccess: () => navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.signIn}`,
+            replace: true
+        })
+    });
+    const hasSignedOut = useRef(false);
+    useEffect(() => {
+        if (hasSignedOut.current)
+            return;
+        hasSignedOut.current = true;
+        signOut();
+    }, [signOut]);
+    return (_jsx(Spinner, { className: cn("mx-auto my-auto", className), color: "current" }));
+}