@better-auth-ui/heroui 1.6.27 → 1.6.29

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

@@ -19,6 +19,7 @@ import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
+import { LastUsedBadge } from "./last-login-method/last-used-badge"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export interface SignInProps {
@@ -118,7 +119,7 @@ export function SignIn({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signIn" />
             )}
 
             {showSeparator && (
@@ -206,10 +207,16 @@ export function SignIn({
             {Captcha && <div className="flex justify-center">{Captcha}</div>}
 
             <div className="flex flex-col gap-3">
-              <Button type="submit" className="w-full" isPending={isPending}>
+              <Button
+                type="submit"
+                className="relative w-full overflow-visible"
+                isPending={isPending}
+              >
                 {signInEmailPending && <Spinner color="current" size="sm" />}
 
                 {localization.auth.signIn}
+
+                <LastUsedBadge method="email" floating />
               </Button>
 
               {plugins.flatMap((plugin) =>
@@ -231,7 +238,7 @@ export function SignIn({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signIn" />
             )}
           </>
         )}

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

@@ -168,7 +168,7 @@ export function SignUp({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signUp" />
             )}
 
             {showSeparator && (
@@ -396,7 +396,7 @@ export function SignUp({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signUp" />
             )}
           </>
         )}

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

@@ -26,6 +26,7 @@ import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
 import { usernamePlugin } from "../../../lib/auth/username-plugin"
 import { FieldSeparator } from "../field-separator"
+import { LastUsedBadge } from "../last-login-method/last-used-badge"
 import { ProviderButtons, type SocialLayout } from "../provider-buttons"
 
 export interface SignInUsernameProps {
@@ -163,7 +164,7 @@ export function SignInUsername({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signIn" />
             )}
 
             {showSeparator && (
@@ -251,12 +252,14 @@ export function SignInUsername({
             <div className="flex flex-col gap-3">
               <Button
                 type="submit"
-                className="w-full"
+                className="relative w-full overflow-visible"
                 isPending={isSignInPending || isPending}
               >
                 {isSignInPending && <Spinner color="current" size="sm" />}
 
                 {localization.auth.signIn}
+
+                <LastUsedBadge method={["email", "username"]} floating />
               </Button>
 
               {plugins.flatMap((plugin) =>
@@ -278,7 +281,7 @@ export function SignInUsername({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="signIn" />
             )}
           </>
         )}

package/src/index.tsx

@@ -7,6 +7,7 @@ export * from "./components/auth/forgot-password"
 export * from "./components/auth/open-email-button"
 export * from "./components/auth/provider-button"
 export * from "./components/auth/provider-buttons"
+export * from "./components/auth/reset-link-sent"
 export * from "./components/auth/reset-password"
 export * from "./components/auth/settings/account/account-settings"
 export * from "./components/auth/settings/account/change-email"

package/src/lib/auth/last-login-method-plugin.ts

@@ -0,0 +1,12 @@
+import { createAuthPlugin } from "@better-auth-ui/core"
+import {
+  lastLoginMethodPlugin as coreLastLoginMethodPlugin,
+  type LastLoginMethodPluginOptions
+} from "@better-auth-ui/core/plugins"
+
+export const lastLoginMethodPlugin = createAuthPlugin(
+  coreLastLoginMethodPlugin.id,
+  (options: LastLoginMethodPluginOptions = {}) => ({
+    ...coreLastLoginMethodPlugin(options)
+  })
+)

package/src/lib/auth/magic-link-plugin.ts

@@ -6,6 +6,7 @@ import {
 
 import { MagicLink } from "../../components/auth/magic-link/magic-link"
 import { MagicLinkButton } from "../../components/auth/magic-link/magic-link-button"
+import { MagicLinkSent } from "../../components/auth/magic-link/magic-link-sent"
 
 export const magicLinkPlugin = createAuthPlugin(
   coreMagicLinkPlugin.id,
@@ -13,7 +14,7 @@ export const magicLinkPlugin = createAuthPlugin(
     ...coreMagicLinkPlugin(options),
     authButtons: [MagicLinkButton],
     views: {
-      auth: { magicLink: MagicLink }
+      auth: { magicLink: MagicLink, magicLinkSent: MagicLinkSent }
     },
     // Conditional, not an override: when `emailAndPassword.enabled === false`
     // the `<Auth>` router renders this at `/auth/sign-in` instead of the

package/src/plugins.ts

@@ -4,8 +4,10 @@ export * from "./components/auth/api-key/api-keys"
 export * from "./components/auth/api-key/organization-api-keys"
 export * from "./components/auth/delete-user/danger-zone"
 export * from "./components/auth/delete-user/delete-account"
+export * from "./components/auth/last-login-method/last-used-badge"
 // Plugin-contributed components that may be used standalone
 export * from "./components/auth/magic-link/magic-link"
+export * from "./components/auth/magic-link/magic-link-sent"
 export * from "./components/auth/multi-session/manage-account"
 export * from "./components/auth/multi-session/manage-accounts"
 export * from "./components/auth/multi-session/switch-account-submenu"
@@ -41,6 +43,7 @@ export * from "./components/auth/username/username-field"
 export * from "./lib/auth/api-key-plugin"
 export * from "./lib/auth/auth-plugin"
 export * from "./lib/auth/delete-user-plugin"
+export * from "./lib/auth/last-login-method-plugin"
 export * from "./lib/auth/magic-link-plugin"
 export * from "./lib/auth/multi-session-plugin"
 export * from "./lib/auth/organization-plugin"

package/dist/user-view--47tVtJ3.js

@@ -1,113 +0,0 @@
-import { authMutationKeys as e, getProviderName as t } from "@better-auth-ui/core";
-import { providerIcons as n, useAuth as r, useSession as i, useSignInSocial as a } from "@better-auth-ui/react";
-import { Person as o } from "@gravity-ui/icons";
-import { Avatar as s, Button as c, Separator as l, Skeleton as u, Spinner as d, cn as f } from "@heroui/react";
-import { useMemo as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useIsMutating as g } from "@tanstack/react-query";
-//#region src/components/auth/field-separator.tsx
-function _({ children: e }) {
-	return /* @__PURE__ */ h("div", {
-		className: "flex items-center gap-4",
-		children: [
-			/* @__PURE__ */ m(l, { className: "flex-1" }),
-			/* @__PURE__ */ m("p", {
-				className: "text-xs text-muted shrink-0",
-				children: e
-			}),
-			/* @__PURE__ */ m(l, { className: "flex-1" })
-		]
-	});
-}
-//#endregion
-//#region src/components/auth/provider-button.tsx
-function v({ provider: i, display: o = "full", variant: s = "tertiary", ...l }) {
-	let { authClient: u, baseURL: f, localization: p, redirectTo: _ } = r(), v = `${f}${_}`, { mutate: y, isPending: b } = a(u), x = n[i];
-	return /* @__PURE__ */ h(c, {
-		variant: s,
-		isPending: g({ mutationKey: e.signIn.all }) + g({ mutationKey: e.signUp.all }) > 0,
-		onPress: () => y({
-			provider: i,
-			callbackURL: v
-		}),
-		...l,
-		"aria-label": t(i),
-		children: [b ? /* @__PURE__ */ m(d, {
-			color: "current",
-			size: "sm"
-		}) : /* @__PURE__ */ m(x, {}), o === "full" ? p.auth.continueWith.replace("{{provider}}", t(i)) : o === "name" ? t(i) : null]
-	});
-}
-//#endregion
-//#region src/components/auth/provider-buttons.tsx
-function y({ socialLayout: e = "auto" }) {
-	let { socialProviders: t } = r(), n = p(() => e === "auto" ? t?.length && t.length >= 4 ? "horizontal" : "vertical" : e, [e, t?.length]);
-	return /* @__PURE__ */ m("div", {
-		className: f("gap-3", n === "grid" && "grid grid-cols-2", n === "vertical" && "flex flex-col", n === "horizontal" && "flex flex-wrap"),
-		children: t?.map((e) => /* @__PURE__ */ m(v, {
-			provider: e,
-			display: n === "vertical" ? "full" : n === "grid" ? "name" : "icon",
-			className: f("w-full", n === "horizontal" && "flex-1")
-		}, e))
-	});
-}
-//#endregion
-//#region src/components/auth/user/user-avatar.tsx
-function b({ className: e, fallback: t, isPending: n, user: a, size: c = "sm", style: l, ...d }) {
-	let { authClient: p } = r(), { data: g, isPending: _ } = i(p, { enabled: !a && !n });
-	if ((n || _) && !a) return /* @__PURE__ */ m(u, {
-		className: f("rounded-full", c === "sm" ? "size-8" : c === "md" ? "size-10" : "size-12", e),
-		style: l
-	});
-	let v = a ?? g?.user, y = (v?.username || v?.name || v?.email)?.slice(0, 2).toUpperCase();
-	return /* @__PURE__ */ h(s, {
-		size: c,
-		className: f("rounded-full", e),
-		style: l,
-		...d,
-		children: [/* @__PURE__ */ m(s.Image, {
-			alt: v?.displayUsername || v?.name || v?.email,
-			src: v?.image ?? void 0
-		}), /* @__PURE__ */ m(s.Fallback, {
-			className: f(c === "lg" ? "text-xl" : c === "md" ? "text-base" : "text-sm"),
-			delayMs: v?.image ? 600 : void 0,
-			children: t || y || /* @__PURE__ */ m(o, { className: "size-4" })
-		})]
-	});
-}
-//#endregion
-//#region src/components/auth/user/user-view.tsx
-function x({ className: e, isPending: t, size: n = "md", hideSubtitle: a = !1, user: o, ...s }) {
-	let { authClient: c } = r(), { data: l, isPending: d } = i(c, { enabled: !o && !t }), p = o ?? l?.user;
-	return (t || d) && !o ? /* @__PURE__ */ h("div", {
-		className: f("flex items-center gap-2 min-w-0", e),
-		...s,
-		children: [/* @__PURE__ */ m(b, {
-			isPending: !0,
-			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
-			size: n === "lg" ? "md" : "sm"
-		}), /* @__PURE__ */ h("div", {
-			className: "flex flex-col gap-1 min-w-0",
-			children: [/* @__PURE__ */ m(u, { className: "h-3.5 w-24 rounded-lg" }), a ? null : /* @__PURE__ */ m(u, { className: "h-3 w-32 rounded-lg" })]
-		})]
-	}) : /* @__PURE__ */ h("div", {
-		className: f("flex items-center gap-2 min-w-0", e),
-		...s,
-		children: [/* @__PURE__ */ m(b, {
-			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
-			user: p,
-			size: n === "lg" ? "md" : "sm"
-		}), /* @__PURE__ */ h("div", {
-			className: "flex flex-col min-w-0",
-			children: [/* @__PURE__ */ m("p", {
-				className: "text-foreground text-sm font-medium leading-tight truncate",
-				children: p?.displayUsername || p?.name || p?.email
-			}), !a && (p?.displayUsername || p?.name) ? /* @__PURE__ */ m("p", {
-				className: "text-muted text-xs leading-tight truncate overflow-x-hidden",
-				children: p?.email
-			}) : null]
-		})]
-	});
-}
-//#endregion
-export { _ as a, v as i, b as n, y as r, x as t };