@better-auth-ui/heroui 1.6.1 → 1.6.3

package/dist/components/user/user-button.js

@@ -1,24 +1,91 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useSession } from "@better-auth-ui/react";
-import { ArrowRightFromSquare, ArrowRightToSquare, ChevronsExpandVertical, Display, Gear, Moon, PersonPlus, Persons, Sun } from "@gravity-ui/icons";
-import { Button, cn, Dropdown, Label, Separator, Tabs } from "@heroui/react";
-import { SwitchAccountMenu } from "./switch-account-menu";
-import { UserAvatar } from "./user-avatar";
-import { UserView } from "./user-view";
-/**
- * Render a user account dropdown button that shows account actions, session switching, and theme controls.
- *
- * Renders either an icon-only trigger or a full button showing the current user state; its dropdown contains account settings, multi-session switching (when enabled), theme selection (when enabled), and sign-in/sign-out flows depending on authentication state.
- *
- * @param className - Additional CSS classes applied to the trigger element
- * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
- * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
- * @param variant - Button visual variant passed to the underlying Button component
- * @param themeToggle - When true and theming is available, show theme selection controls in the menu
- * @returns The user button and its dropdown menu as a JSX element
- */
-export function UserButton({ className, placement = "bottom", size = "default", variant = "ghost", themeToggle = true }) {
-    const { basePaths, viewPaths, localization, multiSession, appearance: { theme, setTheme, themes } } = useAuth();
-    const { data: session, isPending: sessionPending } = useSession();
-    return (_jsxs(Dropdown, { children: [size === "icon" ? (_jsx(Dropdown.Trigger, { className: cn("rounded-full", className), children: _jsx(UserAvatar, {}) })) : (_jsxs(Button, { variant: variant, className: cn("h-auto font-normal justify-start px-3 py-2 text-left", className), children: [session || sessionPending ? (_jsx(UserView, { isPending: sessionPending })) : (_jsxs(_Fragment, { children: [_jsx(UserAvatar, {}), _jsx("p", { className: "text-sm font-medium", children: localization.auth.account })] })), _jsx(ChevronsExpandVertical, { className: "ml-auto size-3.5" })] })), _jsxs(Dropdown.Popover, { placement: placement, className: "min-w-40 md:min-w-56 max-w-[48svw]", children: [session && (_jsx("div", { className: "px-3 pt-3 pb-1", children: _jsx(UserView, {}) })), _jsx(Dropdown.Menu, { children: session ? (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.settings.settings, href: `${basePaths.settings}/${viewPaths.settings.account}`, children: [_jsx(Gear, { className: "text-muted" }), _jsx(Label, { children: localization.settings.settings })] }), multiSession && (_jsxs(Dropdown.SubmenuTrigger, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.switchAccount, children: [_jsx(Persons, { className: "text-muted" }), _jsx(Label, { children: localization.auth.switchAccount }), _jsx(Dropdown.SubmenuIndicator, {})] }), _jsx(Dropdown.Popover, { className: "min-w-40 md:min-w-56 max-w-[48svw]", children: _jsx(SwitchAccountMenu, {}) })] })), themeToggle && theme && setTheme && !!themes?.length && (_jsxs(Dropdown.Item, { className: "py-1 pe-2", children: [_jsx(Label, { children: localization.settings.theme }), _jsx(Tabs, { className: "ml-auto", selectedKey: theme, onSelectionChange: (key) => setTheme(key), children: _jsx(Tabs.ListContainer, { children: _jsxs(Tabs.List, { "aria-label": localization.settings.theme, className: "*:h-5 *:w-5 *:p-0", children: [themes.includes("system") && (_jsxs(Tabs.Tab, { id: "system", "aria-label": localization.settings.system, children: [_jsx(Display, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("light") && (_jsxs(Tabs.Tab, { id: "light", "aria-label": localization.settings.light, children: [_jsx(Sun, { className: "size-3" }), _jsx(Tabs.Indicator, {})] })), themes.includes("dark") && (_jsxs(Tabs.Tab, { id: "dark", "aria-label": localization.settings.dark, children: [_jsx(Moon, { className: "size-3" }), _jsx(Tabs.Indicator, {})] }))] }) }) })] })), _jsx(Separator, {}), _jsxs(Dropdown.Item, { textValue: localization.auth.signOut, href: `${basePaths.auth}/${viewPaths.auth.signOut}`, children: [_jsx(ArrowRightFromSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signOut })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Dropdown.Item, { textValue: localization.auth.signIn, href: `${basePaths.auth}/${viewPaths.auth.signIn}`, children: [_jsx(ArrowRightToSquare, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signIn })] }), _jsxs(Dropdown.Item, { textValue: localization.auth.signUp, href: `${basePaths.auth}/${viewPaths.auth.signUp}`, children: [_jsx(PersonPlus, { className: "text-muted" }), _jsx(Label, { children: localization.auth.signUp })] })] })) })] })] }));
+import { UserAvatar as e } from "./user-avatar.js";
+import { UserView as t } from "./user-view.js";
+import { SwitchAccountMenu as n } from "./switch-account-menu.js";
+import { useAuth as r, useSession as i } from "@better-auth-ui/react";
+import { Button as a, Dropdown as o, Label as s, Separator as c, Tabs as l, cn as u } from "@heroui/react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ArrowRightFromSquare as m, ArrowRightToSquare as h, ChevronsExpandVertical as g, Display as _, Gear as v, Moon as y, PersonPlus as b, Persons as x, Sun as S } from "@gravity-ui/icons";
+//#region src/components/user/user-button.tsx
+function C({ className: C, placement: w = "bottom", size: T = "default", variant: E = "ghost", themeToggle: D = !0 }) {
+	let { basePaths: O, viewPaths: k, localization: A, multiSession: j, appearance: { theme: M, setTheme: N, themes: P } } = r(), { data: F, isPending: I } = i();
+	return /* @__PURE__ */ p(o, { children: [T === "icon" ? /* @__PURE__ */ f(o.Trigger, {
+		className: u("rounded-full", C),
+		children: /* @__PURE__ */ f(e, {})
+	}) : /* @__PURE__ */ p(a, {
+		variant: E,
+		className: u("h-auto font-normal justify-start px-3 py-2 text-left", C),
+		children: [F || I ? /* @__PURE__ */ f(t, { isPending: I }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, {}), /* @__PURE__ */ f("p", {
+			className: "text-sm font-medium",
+			children: A.auth.account
+		})] }), /* @__PURE__ */ f(g, { className: "ml-auto size-3.5" })]
+	}), /* @__PURE__ */ p(o.Popover, {
+		placement: w,
+		className: "min-w-40 md:min-w-56 max-w-[48svw]",
+		children: [F && /* @__PURE__ */ f("div", {
+			className: "px-3 pt-3 pb-1",
+			children: /* @__PURE__ */ f(t, {})
+		}), /* @__PURE__ */ f(o.Menu, { children: F ? /* @__PURE__ */ p(d, { children: [
+			/* @__PURE__ */ p(o.Item, {
+				textValue: A.settings.settings,
+				href: `${O.settings}/${k.settings.account}`,
+				children: [/* @__PURE__ */ f(v, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.settings.settings })]
+			}),
+			j && /* @__PURE__ */ p(o.SubmenuTrigger, { children: [/* @__PURE__ */ p(o.Item, {
+				textValue: A.auth.switchAccount,
+				children: [
+					/* @__PURE__ */ f(x, { className: "text-muted" }),
+					/* @__PURE__ */ f(s, { children: A.auth.switchAccount }),
+					/* @__PURE__ */ f(o.SubmenuIndicator, {})
+				]
+			}), /* @__PURE__ */ f(o.Popover, {
+				className: "min-w-40 md:min-w-56 max-w-[48svw]",
+				children: /* @__PURE__ */ f(n, {})
+			})] }),
+			D && M && N && !!P?.length && /* @__PURE__ */ p(o.Item, {
+				className: "py-1 pe-2",
+				children: [/* @__PURE__ */ f(s, { children: A.settings.theme }), /* @__PURE__ */ f(l, {
+					className: "ml-auto",
+					selectedKey: M,
+					onSelectionChange: (e) => N(e),
+					children: /* @__PURE__ */ f(l.ListContainer, { children: /* @__PURE__ */ p(l.List, {
+						"aria-label": A.settings.theme,
+						className: "*:h-5 *:w-5 *:p-0",
+						children: [
+							P.includes("system") && /* @__PURE__ */ p(l.Tab, {
+								id: "system",
+								"aria-label": A.settings.system,
+								children: [/* @__PURE__ */ f(_, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							}),
+							P.includes("light") && /* @__PURE__ */ p(l.Tab, {
+								id: "light",
+								"aria-label": A.settings.light,
+								children: [/* @__PURE__ */ f(S, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							}),
+							P.includes("dark") && /* @__PURE__ */ p(l.Tab, {
+								id: "dark",
+								"aria-label": A.settings.dark,
+								children: [/* @__PURE__ */ f(y, { className: "size-3" }), /* @__PURE__ */ f(l.Indicator, {})]
+							})
+						]
+					}) })
+				})]
+			}),
+			/* @__PURE__ */ f(c, {}),
+			/* @__PURE__ */ p(o.Item, {
+				textValue: A.auth.signOut,
+				href: `${O.auth}/${k.auth.signOut}`,
+				children: [/* @__PURE__ */ f(m, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signOut })]
+			})
+		] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(o.Item, {
+			textValue: A.auth.signIn,
+			href: `${O.auth}/${k.auth.signIn}`,
+			children: [/* @__PURE__ */ f(h, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signIn })]
+		}), /* @__PURE__ */ p(o.Item, {
+			textValue: A.auth.signUp,
+			href: `${O.auth}/${k.auth.signUp}`,
+			children: [/* @__PURE__ */ f(b, { className: "text-muted" }), /* @__PURE__ */ f(s, { children: A.auth.signUp })]
+		})] }) })]
+	})] });
 }
+//#endregion
+export { C as UserButton };

package/dist/components/user/user-view.d.ts

@@ -1,6 +1,6 @@
-import { type AvatarProps } from "@heroui/react";
-import type { User } from "better-auth";
-import type { ComponentProps } from "react";
+import { AvatarProps } from '@heroui/react';
+import { User } from 'better-auth';
+import { ComponentProps } from 'react';
 export type UserViewProps = {
     className?: string;
     isPending?: boolean;

package/dist/components/user/user-view.js

@@ -1,24 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSession } from "@better-auth-ui/react";
-import { cn, Skeleton } from "@heroui/react";
-import { UserAvatar } from "./user-avatar";
-/**
- * Render a compact user item with an avatar, a primary label (display username, name, or email), and an optional secondary email line.
- *
- * @param isPending - If true and no `user` prop is provided, renders a loading skeleton instead of user details
- * @param size - Avatar size variant; defaults to `"sm"`
- * @param user - Optional user to display; when omitted the current session user is used if available
- * @returns A React element containing the user's avatar and text labels
- */
-export function UserView({ className, isPending, size = "sm", user, ...props }) {
-    const { data: session, isPending: sessionPending } = useSession({
-        enabled: !user && !isPending
-    });
-    const resolvedUser = user ?? session?.user;
-    if ((isPending || sessionPending) && !user) {
-        return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { isPending: true, size: size }), _jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [_jsx(Skeleton, { className: "h-3.5 w-24 rounded-lg" }), _jsx(Skeleton, { className: "h-3 w-32 rounded-lg" })] })] }));
-    }
-    return (_jsxs("div", { className: cn("flex items-center gap-2 min-w-0", className), ...props, children: [_jsx(UserAvatar, { user: resolvedUser, size: size }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate leading-tight", children: resolvedUser?.displayUsername ||
-                            resolvedUser?.name ||
-                            resolvedUser?.email }), (resolvedUser?.displayUsername || resolvedUser?.name) && (_jsx("p", { className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden", children: resolvedUser?.email }))] })] }));
+import { UserAvatar as e } from "./user-avatar.js";
+import { useSession as t } from "@better-auth-ui/react";
+import { Skeleton as n, cn as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/user/user-view.tsx
+function o({ className: o, isPending: s, size: c = "sm", user: l, ...u }) {
+	let { data: d, isPending: f } = t({ enabled: !l && !s }), p = l ?? d?.user;
+	return (s || f) && !l ? /* @__PURE__ */ a("div", {
+		className: r("flex items-center gap-2 min-w-0", o),
+		...u,
+		children: [/* @__PURE__ */ i(e, {
+			isPending: !0,
+			size: c
+		}), /* @__PURE__ */ a("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ i(n, { className: "h-3.5 w-24 rounded-lg" }), /* @__PURE__ */ i(n, { className: "h-3 w-32 rounded-lg" })]
+		})]
+	}) : /* @__PURE__ */ a("div", {
+		className: r("flex items-center gap-2 min-w-0", o),
+		...u,
+		children: [/* @__PURE__ */ i(e, {
+			user: p,
+			size: c
+		}), /* @__PURE__ */ a("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-sm font-medium truncate leading-tight",
+				children: p?.displayUsername || p?.name || p?.email
+			}), (p?.displayUsername || p?.name) && /* @__PURE__ */ i("p", {
+				className: "text-muted text-xs mb-0.5 truncate overflow-x-hidden",
+				children: p?.email
+			})]
+		})]
+	});
 }
+//#endregion
+export { o as UserView };

package/dist/core.d.ts

@@ -1 +1 @@
-export * from "@better-auth-ui/react/core";
+export * from '@better-auth-ui/react/core';

package/dist/index.d.ts

@@ -1,35 +1,36 @@
-export * from "./components/auth/auth";
-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";
-export * from "./components/auth/sign-out";
-export * from "./components/auth/sign-up";
-export * from "./components/email/email-changed-email";
-export * from "./components/email/email-verification-email";
-export * from "./components/email/magic-link-email";
-export * from "./components/email/new-device-email";
-export * from "./components/email/otp-email";
-export * from "./components/email/password-changed-email";
-export * from "./components/email/reset-password-email";
-export * from "./components/settings/account/account-settings";
-export * from "./components/settings/account/appearance";
-export * from "./components/settings/account/change-email";
-export * from "./components/settings/account/manage-account";
-export * from "./components/settings/account/manage-accounts";
-export * from "./components/settings/account/user-profile";
-export * from "./components/settings/security/active-sessions";
-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";
-export * from "./components/user/user-button";
-export * from "./components/user/user-view";
+export * from './components/auth/auth';
+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-button';
+export * from './components/auth/provider-buttons';
+export * from './components/auth/reset-password';
+export * from './components/auth/sign-in';
+export * from './components/auth/sign-out';
+export * from './components/auth/sign-up';
+export * from './components/email/email-changed-email';
+export * from './components/email/email-verification-email';
+export * from './components/email/magic-link-email';
+export * from './components/email/new-device-email';
+export * from './components/email/otp-email';
+export * from './components/email/password-changed-email';
+export * from './components/email/reset-password-email';
+export * from './components/settings/account/account-settings';
+export * from './components/settings/account/appearance';
+export * from './components/settings/account/change-email';
+export * from './components/settings/account/manage-account';
+export * from './components/settings/account/manage-accounts';
+export * from './components/settings/account/user-profile';
+export * from './components/settings/security/active-sessions';
+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';
+export * from './components/user/user-button';
+export * from './components/user/user-view';

package/dist/index.js

@@ -1,36 +1,38 @@
 "use client";
-export * from "./components/auth/auth";
-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";
-export * from "./components/auth/sign-out";
-export * from "./components/auth/sign-up";
-export * from "./components/email/email-changed-email";
-export * from "./components/email/email-verification-email";
-export * from "./components/email/magic-link-email";
-export * from "./components/email/new-device-email";
-export * from "./components/email/otp-email";
-export * from "./components/email/password-changed-email";
-export * from "./components/email/reset-password-email";
-export * from "./components/settings/account/account-settings";
-export * from "./components/settings/account/appearance";
-export * from "./components/settings/account/change-email";
-export * from "./components/settings/account/manage-account";
-export * from "./components/settings/account/manage-accounts";
-export * from "./components/settings/account/user-profile";
-export * from "./components/settings/security/active-sessions";
-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";
-export * from "./components/user/user-button";
-export * from "./components/user/user-view";
+import { ForgotPassword as e } from "./components/auth/forgot-password.js";
+import { MagicLinkButton as t } from "./components/auth/magic-link-button.js";
+import { PasskeyButton as n } from "./components/auth/passkey-button.js";
+import { ProviderButton as r } from "./components/auth/provider-button.js";
+import { ProviderButtons as i } from "./components/auth/provider-buttons.js";
+import { MagicLink as a } from "./components/auth/magic-link.js";
+import { ResetPassword as o } from "./components/auth/reset-password.js";
+import { SignIn as s } from "./components/auth/sign-in.js";
+import { SignOut as c } from "./components/auth/sign-out.js";
+import { SignUp as l } from "./components/auth/sign-up.js";
+import { Auth as u } from "./components/auth/auth.js";
+import { AuthProvider as d } from "./components/auth/auth-provider.js";
+import { EmailChangedEmail as f } from "./components/email/email-changed-email.js";
+import { EmailVerificationEmail as p } from "./components/email/email-verification-email.js";
+import { MagicLinkEmail as m } from "./components/email/magic-link-email.js";
+import { NewDeviceEmail as h } from "./components/email/new-device-email.js";
+import { OtpEmail as g } from "./components/email/otp-email.js";
+import { PasswordChangedEmail as _ } from "./components/email/password-changed-email.js";
+import { ResetPasswordEmail as v } from "./components/email/reset-password-email.js";
+import { Appearance as y } from "./components/settings/account/appearance.js";
+import { ChangeEmail as b } from "./components/settings/account/change-email.js";
+import { UserAvatar as x } from "./components/user/user-avatar.js";
+import { UserView as S } from "./components/user/user-view.js";
+import { ManageAccount as C } from "./components/settings/account/manage-account.js";
+import { ManageAccounts as w } from "./components/settings/account/manage-accounts.js";
+import { UserProfile as T } from "./components/settings/account/user-profile.js";
+import { AccountSettings as E } from "./components/settings/account/account-settings.js";
+import { ActiveSessions as D } from "./components/settings/security/active-sessions.js";
+import { ChangePassword as O } from "./components/settings/security/change-password.js";
+import { DeleteUser as k } from "./components/settings/security/delete-user.js";
+import { DangerZone as A } from "./components/settings/security/danger-zone.js";
+import { LinkedAccounts as j } from "./components/settings/security/linked-accounts.js";
+import { Passkeys as M } from "./components/settings/security/passkeys.js";
+import { SecuritySettings as N } from "./components/settings/security/security-settings.js";
+import { Settings as P } from "./components/settings/settings.js";
+import { UserButton as F } from "./components/user/user-button.js";
+export { E as AccountSettings, D as ActiveSessions, y as Appearance, u as Auth, d as AuthProvider, b as ChangeEmail, O as ChangePassword, A as DangerZone, k as DeleteUser, f as EmailChangedEmail, p as EmailVerificationEmail, e as ForgotPassword, j as LinkedAccounts, a as MagicLink, t as MagicLinkButton, m as MagicLinkEmail, C as ManageAccount, w as ManageAccounts, h as NewDeviceEmail, g as OtpEmail, n as PasskeyButton, M as Passkeys, _ as PasswordChangedEmail, r as ProviderButton, i as ProviderButtons, o as ResetPassword, v as ResetPasswordEmail, N as SecuritySettings, P as Settings, s as SignIn, c as SignOut, l as SignUp, x as UserAvatar, F as UserButton, T as UserProfile, S as UserView };

package/dist/react-exports.d.ts

@@ -1 +1 @@
-export * from "@better-auth-ui/react";
+export * from '@better-auth-ui/react';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "type": "module",
   "scripts": {
-    "build": "tsc && bun styles",
+    "build": "vite build && bun styles",
     "dev": "bun styles && tsc --watch",
     "styles": "cpy src/styles.css dist/ --flat",
     "test": "vitest"
@@ -14,16 +14,16 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./core": {
-      "import": "./dist/core.js",
-      "types": "./dist/core.d.ts"
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
     },
     "./react": {
-      "import": "./dist/react-exports.js",
-      "types": "./dist/react-exports.d.ts"
+      "types": "./dist/react-exports.d.ts",
+      "import": "./dist/react-exports.js"
     },
     "./styles": "./dist/styles.css"
   },
@@ -31,17 +31,19 @@
     "@gravity-ui/icons": "^2.18.0",
     "@heroui/react": "^3.0.2",
     "@heroui/styles": "^3.0.2",
+    "@tanstack/react-pacer": "^0.22.0",
+    "@tanstack/react-query": "^5.99.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.4",
-    "better-auth": "^1.6.4",
+    "better-auth": "^1.6.5",
+    "bowser": "^2.11.0",
     "cpy-cli": "^7.0.0",
     "playwright": "^1.59.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "bowser": "^2.11.0",
     "vitest": "^4.1.4"
   },
   "dependencies": {
@@ -52,7 +54,9 @@
     "@gravity-ui/icons": ">=2.18.0",
     "@heroui/react": ">=3.0.2",
     "@heroui/styles": ">=3.0.2",
-    "better-auth": ">=1.6.4",
+    "@tanstack/react-pacer": ">=0.22.0",
+    "@tanstack/react-query": ">=5.99.0",
+    "better-auth": ">=1.6.5",
     "react": ">=19.2.5",
     "react-dom": ">=19.2.5",
     "bowser": ">=2.11.0"

package/src/components/auth/auth-provider.tsx

@@ -4,6 +4,8 @@ import {
 } from "@better-auth-ui/react"
 import { RouterProvider } from "@heroui/react"
 
+import { ErrorToaster } from "./error-toaster"
+
 export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">
 
 /**
@@ -21,6 +23,8 @@ export function AuthProvider({
     <AuthProviderPrimitive navigate={navigate} {...config}>
       <RouterProvider navigate={(path) => navigate({ to: path })}>
         {children}
+
+        <ErrorToaster />
       </RouterProvider>
     </AuthProviderPrimitive>
   )

package/src/components/auth/auth.tsx

@@ -1,5 +1,5 @@
+import type { AuthView } from "@better-auth-ui/core"
 import { useAuth } from "@better-auth-ui/react"
-import type { AuthView } from "@better-auth-ui/react/core"
 import type { CardProps } from "@heroui/react"
 import { ForgotPassword } from "./forgot-password"
 import { MagicLink } from "./magic-link"
@@ -35,7 +35,7 @@ export function Auth({
   socialPosition,
   view,
   ...props
-}: AuthProps & CardProps) {
+}: AuthProps & Omit<CardProps, "children">) {
   const { viewPaths } = useAuth()
 
   if (!view && !path) {

package/src/components/auth/error-toaster.tsx

@@ -0,0 +1,25 @@
+import { toast } from "@heroui/react"
+import { useQueryClient } from "@tanstack/react-query"
+import type { BetterFetchError } from "better-auth/react"
+import { useEffect } from "react"
+
+export function ErrorToaster() {
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    queryClient.getQueryCache().config.onError = (error) => {
+      const err = error as BetterFetchError
+      if (err?.error) toast.danger(err.error.message)
+    }
+
+    queryClient.setMutationDefaults([], {
+      onError: (error) => {
+        toast.danger(
+          (error as BetterFetchError)?.error?.message || error.message
+        )
+      }
+    })
+  }, [queryClient])
+
+  return null
+}

package/src/components/auth/forgot-password.tsx

@@ -34,11 +34,10 @@ export function ForgotPassword({
   className,
   variant,
   ...props
-}: ForgotPasswordProps & CardProps) {
+}: ForgotPasswordProps & Omit<CardProps, "children">) {
   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}` })

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

@@ -1,8 +1,4 @@
-import {
-  useAuth,
-  useSignInMagicLink,
-  useSignInSocial
-} from "@better-auth-ui/react"
+import { useAuth, useSignInMagicLink } from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -46,7 +42,7 @@ export function MagicLink({
   socialPosition = "bottom",
   variant,
   ...props
-}: MagicLinkProps & CardProps) {
+}: MagicLinkProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     baseURL,
@@ -61,27 +57,13 @@ export function MagicLink({
 
   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 isPending = magicLinkPending
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -108,7 +90,6 @@ export function MagicLink({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}
@@ -161,7 +142,6 @@ export function MagicLink({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}

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

@@ -1,6 +1,6 @@
 import { useAuth, useSignInPasskey } from "@better-auth-ui/react"
 import { Fingerprint } from "@gravity-ui/icons"
-import { Button, Spinner, toast } from "@heroui/react"
+import { Button, Spinner } from "@heroui/react"
 
 export type PasskeyButtonProps = {
   isPending: boolean
@@ -11,7 +11,6 @@ export function PasskeyButton({ isPending }: PasskeyButtonProps) {
 
   const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(
     {
-      onError: (error) => toast.danger(error.error?.message || error.message),
       onSuccess: () => navigate({ to: redirectTo })
     }
   )