@better-auth-ui/heroui 1.6.2 → 1.6.4

package/dist/components/auth/settings/security/linked-accounts.js

@@ -0,0 +1,45 @@
+import { LinkedAccount as e } from "./linked-account.js";
+import { useAuth as t, useListAccounts as n } from "@better-auth-ui/react";
+import { Card as r, Skeleton as i, cn as a } from "@heroui/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/linked-accounts.tsx
+function c({ className: i, variant: c, ...u }) {
+	let { authClient: d, localization: f, socialProviders: p } = t(), { data: m, isPending: h } = n(d), g = [...(m?.filter((e) => e.providerId !== "credential"))?.map((e) => ({
+		key: e.id,
+		account: e,
+		provider: e.providerId
+	})) ?? [], ...p?.map((e) => ({
+		key: e,
+		account: void 0,
+		provider: e
+	})) ?? []];
+	return /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h2", {
+		className: a("text-sm font-semibold mb-3"),
+		children: f.settings.linkedAccounts
+	}), /* @__PURE__ */ o(r, {
+		className: a(i),
+		variant: c,
+		...u,
+		children: /* @__PURE__ */ o(r.Content, {
+			className: "gap-0",
+			children: h ? p?.map((e, t) => /* @__PURE__ */ s("div", { children: [t > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(l, {})] }, e)) : g.map((t, n) => /* @__PURE__ */ s("div", { children: [n > 0 && /* @__PURE__ */ o("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ o(e, {
+				account: t.account,
+				provider: t.provider
+			})] }, t.key))
+		})
+	})] });
+}
+function l() {
+	return /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-between",
+		children: /* @__PURE__ */ s("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ o(i, { className: "size-10 rounded-xl" }), /* @__PURE__ */ s("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ o(i, { className: "h-4 w-20 rounded-lg" }), /* @__PURE__ */ o(i, { className: "h-3 w-32 rounded-lg" })]
+			})]
+		})
+	});
+}
+//#endregion
+export { c as LinkedAccounts };

package/dist/components/{settings → auth/settings}/security/security-settings.d.ts

@@ -8,7 +8,7 @@ export type SecuritySettingsProps = {
  * Renders the security settings layout including password management, linked accounts, and active sessions.
  *
  * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
- * DangerZone is rendered when `deleteUser.enabled` is true in auth config.
+ * Each registered auth plugin may contribute `securityCards` (for example delete-user, passkeys).
  *
  * @param className - Optional additional CSS class names for the outer container.
  * @param variant - Card variant forwarded to each security settings card.

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

@@ -0,0 +1,22 @@
+import { ActiveSessions as e } from "./active-sessions.js";
+import { ChangePassword as t } from "./change-password.js";
+import { LinkedAccounts as n } from "./linked-accounts.js";
+import { useAuth as r } from "@better-auth-ui/react";
+import { cn as i } from "@heroui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/auth/settings/security/security-settings.tsx
+function s({ className: s, variant: c, ...l }) {
+	let { emailAndPassword: u, plugins: d, socialProviders: f } = r();
+	return /* @__PURE__ */ o("div", {
+		className: i("flex w-full flex-col gap-4 md:gap-6", s),
+		...l,
+		children: [
+			u?.enabled && /* @__PURE__ */ a(t, { variant: c }),
+			!!f?.length && /* @__PURE__ */ a(n, { variant: c }),
+			/* @__PURE__ */ a(e, { variant: c }),
+			d.flatMap((e) => e.securityCards?.map((t, n) => /* @__PURE__ */ a(t, { variant: c }, `${e.id}-${n.toString()}`)))
+		]
+	});
+}
+//#endregion
+export { s as SecuritySettings };

package/dist/components/auth/settings/settings.js

@@ -0,0 +1,45 @@
+import { AccountSettings as e } from "./account/account-settings.js";
+import { SecuritySettings as t } from "./security/security-settings.js";
+import { useAuth as n, useAuthenticate as r } from "@better-auth-ui/react";
+import { Tabs as i, cn as a } from "@heroui/react";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/auth/settings/settings.tsx
+function l({ className: l, hideNav: u, path: d, variant: f, view: p, ...m }) {
+	let { authClient: h, basePaths: g, localization: _, viewPaths: v } = n();
+	if (r(h), !p && !d) throw Error("[Better Auth UI] Either `view` or `path` must be provided");
+	let y = o(() => Object.fromEntries(Object.entries(v.settings).map(([e, t]) => [t, e])), [v.settings]), b = p || (d ? y[d] : void 0);
+	return /* @__PURE__ */ c(i, {
+		className: a(l),
+		orientation: "horizontal",
+		selectedKey: b,
+		...m,
+		children: [
+			/* @__PURE__ */ s(i.ListContainer, { children: /* @__PURE__ */ c(i.List, {
+				"aria-label": _.settings.settings,
+				className: "overflow-auto w-fit",
+				children: [/* @__PURE__ */ c(i.Tab, {
+					id: "account",
+					href: `${g.settings}/${v.settings.account}`,
+					children: [_.settings.account, /* @__PURE__ */ s(i.Indicator, {})]
+				}), /* @__PURE__ */ c(i.Tab, {
+					id: "security",
+					href: `${g.settings}/${v.settings.security}`,
+					children: [_.settings.security, /* @__PURE__ */ s(i.Indicator, {})]
+				})]
+			}) }),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "account",
+				className: "px-0",
+				children: /* @__PURE__ */ s(e, { variant: f })
+			}),
+			/* @__PURE__ */ s(i.Panel, {
+				id: "security",
+				className: "px-0",
+				children: /* @__PURE__ */ s(t, { variant: f })
+			})
+		]
+	});
+}
+//#endregion
+export { l as Settings };

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

@@ -11,4 +11,4 @@ export interface SignInProps {
  *
  * @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;
+export declare function SignIn({ className, socialLayout, socialPosition, variant, ...props }: SignInProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;

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

@@ -1,156 +1,120 @@
 import { FieldSeparator as e } from "./field-separator.js";
-import { MagicLinkButton as t } from "./magic-link-button.js";
-import { PasskeyButton as n } from "./passkey-button.js";
-import { ProviderButtons as r } from "./provider-buttons.js";
-import { useAuth as i, useSendVerificationEmail as a, useSignInEmail as o, useSignInSocial as s, useSignInUsername as c } from "@better-auth-ui/react";
-import { Button as ee, Card as l, Checkbox as u, Description as te, FieldError as d, Form as f, Input as p, Label as m, Link as h, Spinner as g, TextField as _, cn as v, toast as y } from "@heroui/react";
+import { ProviderButtons as t } from "./provider-buttons.js";
+import { authMutationKeys as n } from "@better-auth-ui/core";
+import { useAuth as r, useSendVerificationEmail as i, useSignInEmail as a } from "@better-auth-ui/react";
+import { Button as o, Card as s, Checkbox as c, Description as l, FieldError as u, Form as d, Input as f, Label as p, Link as m, Spinner as h, TextField as g, cn as _, toast as v } from "@heroui/react";
+import { useState as y } from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { useState as C } from "react";
+import { useIsMutating as C } from "@tanstack/react-query";
 //#region src/components/auth/sign-in.tsx
-function w(e) {
-	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
-}
-function T({ className: T, socialLayout: E, socialPosition: D = "bottom", variant: O, ...k }) {
-	let { basePaths: A, baseURL: j, emailAndPassword: M, localization: N, magicLink: P, passkey: F, redirectTo: I, socialProviders: L, username: R, viewPaths: z, navigate: B } = i(), [V, H] = C(""), { mutate: U } = a({
-		onError: (e) => y.danger(e.error?.message || e.message),
-		onSuccess: () => y.success(N.auth.verificationEmailSent)
-	}), { mutate: W, isPending: G } = o({
+function w({ className: w, socialLayout: T, socialPosition: E = "bottom", variant: D, ...O }) {
+	let { authClient: k, basePaths: A, baseURL: j, emailAndPassword: M, localization: N, plugins: P, redirectTo: F, socialProviders: I, viewPaths: L, navigate: R } = r(), [z, B] = y(""), { mutate: V } = i(k, { onSuccess: () => v.success(N.auth.verificationEmailSent) }), { mutate: H, isPending: U } = a(k, {
 		onError: (e, { email: t }) => {
-			H(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? y.danger(e.error?.message || e.message, { actionProps: {
+			B(""), e.error?.code === "EMAIL_NOT_VERIFIED" ? v.danger(e.error?.message || e.message, { actionProps: {
 				children: N.auth.resend,
-				onClick: () => U({
+				onClick: () => V({
 					email: t,
-					callbackURL: `${j}${I}`
+					callbackURL: `${j}${F}`
 				})
-			} }) : y.danger(e.error?.message || e.message);
-		},
-		onSuccess: () => B({ to: I })
-	}), { mutate: K, isPending: q } = c({
-		onError: (e) => {
-			H(""), y.danger(e.error?.message || e.message);
+			} }) : v.danger(e.error?.message || e.message);
 		},
-		onSuccess: () => B({ to: I })
-	}), [J, Y] = C(!1), { mutate: X, isPending: Z } = s({
-		onError: (e) => y.danger(e.error?.message || e.message),
-		onSuccess: () => {
-			Y(!0), setTimeout(() => {
-				Y(!1);
-			}, 5e3);
-		}
-	}), ne = (e) => {
+		onSuccess: () => R({ to: F })
+	}), W = (e) => {
 		e.preventDefault();
 		let t = new FormData(e.currentTarget), n = t.get("email"), r = t.get("rememberMe") === "on";
-		R?.enabled && !w(n) ? K({
-			username: n,
-			password: V
-		}) : W({
+		H({
 			email: n,
-			password: V,
+			password: z,
 			...M?.rememberMe ? { rememberMe: r } : {}
 		});
-	}, Q = G || q || Z || J, $ = M?.enabled && !!L?.length;
-	return /* @__PURE__ */ S(l, {
-		className: v("w-full max-w-sm gap-4 md:p-6", T),
-		variant: O,
-		...k,
+	}, G = C({ mutationKey: n.signIn.all }) + C({ mutationKey: n.signUp.all }) > 0, K = M?.enabled && !!I?.length;
+	return /* @__PURE__ */ S(s, {
+		className: _("w-full max-w-sm gap-4 md:p-6", w),
+		variant: D,
+		...O,
 		children: [
-			/* @__PURE__ */ x(l.Header, { children: /* @__PURE__ */ x(l.Title, {
+			/* @__PURE__ */ x(s.Header, { children: /* @__PURE__ */ x(s.Title, {
 				className: "text-xl font-semibold mb-1",
 				children: N.auth.signIn
 			}) }),
-			/* @__PURE__ */ S(l.Content, {
+			/* @__PURE__ */ S(s.Content, {
 				className: "gap-4",
 				children: [
-					D === "top" && /* @__PURE__ */ S(b, { children: [!!L?.length && /* @__PURE__ */ x(r, {
-						socialLayout: E,
-						signInSocial: X,
-						isPending: Q
-					}), $ && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
-					M?.enabled && /* @__PURE__ */ S(f, {
-						onSubmit: ne,
+					E === "top" && /* @__PURE__ */ S(b, { children: [!!I?.length && /* @__PURE__ */ x(t, { socialLayout: T }), K && /* @__PURE__ */ x(e, { children: N.auth.or })] }),
+					M?.enabled && /* @__PURE__ */ S(d, {
+						onSubmit: W,
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ S(_, {
+							/* @__PURE__ */ S(g, {
 								name: "email",
-								type: R?.enabled ? "text" : "email",
-								autoComplete: R?.enabled ? "username" : "email",
-								isDisabled: Q,
+								type: "email",
+								autoComplete: "email",
+								isDisabled: G,
 								children: [
-									/* @__PURE__ */ x(m, { children: R?.enabled ? N.auth.username : N.auth.email }),
-									/* @__PURE__ */ x(p, {
-										placeholder: R?.enabled ? N.auth.usernameOrEmailPlaceholder : N.auth.emailPlaceholder,
-										variant: O === "transparent" ? "primary" : "secondary",
+									/* @__PURE__ */ x(p, { children: N.auth.email }),
+									/* @__PURE__ */ x(f, {
+										placeholder: N.auth.emailPlaceholder,
+										variant: D === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ x(d, {})
+									/* @__PURE__ */ x(u, {})
 								]
 							}),
-							/* @__PURE__ */ S(_, {
+							/* @__PURE__ */ S(g, {
 								minLength: M?.minPasswordLength,
 								maxLength: M?.maxPasswordLength,
 								name: "password",
 								type: "password",
 								autoComplete: "current-password",
-								isDisabled: Q,
-								value: V,
-								onChange: H,
+								isDisabled: G,
+								value: z,
+								onChange: B,
 								children: [
-									/* @__PURE__ */ x(m, { children: N.auth.password }),
-									/* @__PURE__ */ x(p, {
+									/* @__PURE__ */ x(p, { children: N.auth.password }),
+									/* @__PURE__ */ x(f, {
 										placeholder: N.auth.passwordPlaceholder,
-										variant: O === "transparent" ? "primary" : "secondary",
+										variant: D === "transparent" ? "primary" : "secondary",
 										required: !0
 									}),
-									/* @__PURE__ */ x(d, {})
+									/* @__PURE__ */ x(u, {})
 								]
 							}),
-							M?.rememberMe && /* @__PURE__ */ S(u, {
+							M?.rememberMe && /* @__PURE__ */ S(c, {
 								name: "rememberMe",
-								isDisabled: Q,
-								variant: O === "transparent" ? "primary" : "secondary",
-								children: [/* @__PURE__ */ x(u.Control, { children: /* @__PURE__ */ x(u.Indicator, {}) }), /* @__PURE__ */ x(u.Content, { children: /* @__PURE__ */ x(m, { children: N.auth.rememberMe }) })]
+								isDisabled: G,
+								variant: D === "transparent" ? "primary" : "secondary",
+								children: [/* @__PURE__ */ x(c.Control, { children: /* @__PURE__ */ x(c.Indicator, {}) }), /* @__PURE__ */ x(c.Content, { children: /* @__PURE__ */ x(p, { children: N.auth.rememberMe }) })]
 							}),
 							/* @__PURE__ */ S("div", {
 								className: "flex flex-col gap-3",
-								children: [
-									/* @__PURE__ */ S(ee, {
-										type: "submit",
-										className: "w-full",
-										isPending: Q,
-										children: [Q && /* @__PURE__ */ x(g, {
-											color: "current",
-											size: "sm"
-										}), N.auth.signIn]
-									}),
-									P && /* @__PURE__ */ x(t, {
-										view: "signIn",
-										isPending: Q
-									}),
-									F && /* @__PURE__ */ x(n, { isPending: Q })
-								]
+								children: [/* @__PURE__ */ S(o, {
+									type: "submit",
+									className: "w-full",
+									isPending: G,
+									children: [U && /* @__PURE__ */ x(h, {
+										color: "current",
+										size: "sm"
+									}), N.auth.signIn]
+								}), P.flatMap((e) => e.authButtons?.map((t, n) => /* @__PURE__ */ x(t, { view: "signIn" }, `${e.id}-${n.toString()}`)))]
 							})
 						]
 					}),
-					D === "bottom" && /* @__PURE__ */ S(b, { children: [$ && /* @__PURE__ */ x(e, { children: N.auth.or }), !!L?.length && /* @__PURE__ */ x(r, {
-						socialLayout: E,
-						signInSocial: X,
-						isPending: Q
-					})] })
+					E === "bottom" && /* @__PURE__ */ S(b, { children: [K && /* @__PURE__ */ x(e, { children: N.auth.or }), !!I?.length && /* @__PURE__ */ x(t, { socialLayout: T })] })
 				]
 			}),
-			/* @__PURE__ */ S(l.Footer, {
+			/* @__PURE__ */ S(s.Footer, {
 				className: "flex-col gap-3",
-				children: [M?.forgotPassword && /* @__PURE__ */ x(h, {
-					href: `${A.auth}/${z.auth.forgotPassword}`,
+				children: [M?.forgotPassword && /* @__PURE__ */ x(m, {
+					href: `${A.auth}/${L.auth.forgotPassword}`,
 					className: "no-underline hover:underline",
 					children: N.auth.forgotPasswordLink
-				}), M?.enabled && /* @__PURE__ */ S(te, {
+				}), M?.enabled && /* @__PURE__ */ S(l, {
 					className: "text-sm",
 					children: [
 						N.auth.needToCreateAnAccount,
 						" ",
-						/* @__PURE__ */ x(h, {
-							href: `${A.auth}/${z.auth.signUp}`,
+						/* @__PURE__ */ x(m, {
+							href: `${A.auth}/${L.auth.signUp}`,
 							className: "text-accent no-underline hover:underline decoration-accent-hover",
 							children: N.auth.signUp
 						})
@@ -161,4 +125,4 @@ function T({ className: T, socialLayout: E, socialPosition: D = "bottom", varian
 	});
 }
 //#endregion
-export { T as SignIn };
+export { w as SignIn };

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

@@ -1,24 +1,24 @@
 import { useAuth as e, useSignOut as t } from "@better-auth-ui/react";
 import { Spinner as n, cn as r, toast as i } from "@heroui/react";
-import { jsx as a } from "react/jsx-runtime";
-import { useEffect as o, useRef as s } from "react";
+import { useEffect as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/components/auth/sign-out.tsx
 function c({ className: c }) {
-	let { basePaths: l, navigate: u, viewPaths: d } = e(), { mutate: f } = t({
+	let { authClient: l, basePaths: u, navigate: d, viewPaths: f } = e(), { mutate: p } = t(l, {
 		onError: (e) => {
-			i.danger(e.error?.message || e.message), u({
-				to: `${l.auth}/${d.auth.signIn}`,
+			i.danger(e.error?.message || e.message), d({
+				to: `${u.auth}/${f.auth.signIn}`,
 				replace: !0
 			});
 		},
-		onSuccess: () => u({
-			to: `${l.auth}/${d.auth.signIn}`,
+		onSuccess: () => d({
+			to: `${u.auth}/${f.auth.signIn}`,
 			replace: !0
 		})
-	}), p = s(!1);
-	return o(() => {
-		p.current || (p.current = !0, f());
-	}, [f]), /* @__PURE__ */ a(n, {
+	}), m = o(!1);
+	return a(() => {
+		m.current || (m.current = !0, p());
+	}, [p]), /* @__PURE__ */ s(n, {
 		className: r("mx-auto my-auto", c),
 		color: "current"
 	});

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

@@ -16,4 +16,4 @@ export type SignUpProps = {
  * @param socialPosition - Position of social provider buttons relative to the form; `"top"` or `"bottom"` (default `"bottom"`)
  * @returns The sign-up form React element
  */
-export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignUp({ className, socialLayout, socialPosition, variant, ...props }: SignUpProps & Omit<CardProps, "children">): import("react/jsx-runtime").JSX.Element;