@better-auth-ui/heroui 1.6.27 → 1.6.29

package/dist/user-view-D9ial2fQ.js

@@ -0,0 +1,150 @@
+import { authMutationKeys as e, getEmailProviderLink as t, getProviderName as n } from "@better-auth-ui/core";
+import { providerIcons as r, useAuth as i, useLastLoginMethod as a, useSession as o, useSignInSocial as s } from "@better-auth-ui/react";
+import { ArrowUpRightFromSquare as c, Person as l } from "@gravity-ui/icons";
+import { Avatar as u, Button as d, Chip as f, Link as p, Separator as m, Skeleton as h, Spinner as g, cn as _ } from "@heroui/react";
+import { useMemo as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { buttonVariants as x } from "@heroui/styles";
+import { useIsMutating as S } from "@tanstack/react-query";
+//#region src/components/auth/open-email-button.tsx
+function C({ email: e, className: n }) {
+	let { localization: r } = i(), a = t(e);
+	return a ? /* @__PURE__ */ b(p, {
+		href: a.loginUrl,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: _(x({ variant: "primary" }), "w-full gap-2", n),
+		children: [r.auth.openEmailProvider.replace("{{provider}}", a.companyProvider), /* @__PURE__ */ y(c, { className: "size-3" })]
+	}) : null;
+}
+//#endregion
+//#region src/components/auth/field-separator.tsx
+function w({ children: e }) {
+	return /* @__PURE__ */ b("div", {
+		className: "flex items-center gap-4",
+		children: [
+			/* @__PURE__ */ y(m, { className: "flex-1" }),
+			/* @__PURE__ */ y("p", {
+				className: "text-xs text-muted shrink-0",
+				children: e
+			}),
+			/* @__PURE__ */ y(m, { className: "flex-1" })
+		]
+	});
+}
+//#endregion
+//#region src/components/auth/last-login-method/last-used-badge.tsx
+function T({ method: e, compact: t, floating: n }) {
+	let { method: r, localization: i } = a();
+	return !r || !(Array.isArray(e) ? e : [e]).includes(r) ? null : /* @__PURE__ */ y(f, {
+		className: _(n && "pointer-events-none absolute top-0 right-0 z-10 translate-x-1/4 -translate-y-1/2 shadow-sm"),
+		color: n ? "accent" : "default",
+		size: "sm",
+		variant: n ? "primary" : "secondary",
+		children: t || n ? i.lastUsedShort : i.lastUsed
+	});
+}
+//#endregion
+//#region src/components/auth/provider-button.tsx
+function E({ provider: t, display: a = "full", view: o = "signIn", variant: c = "tertiary", className: l, ...u }) {
+	let { authClient: f, baseURL: p, localization: m, redirectTo: h } = i(), v = `${p}${h}`, { mutate: x, isPending: C } = s(f), w = r[t];
+	return /* @__PURE__ */ b(d, {
+		variant: c,
+		isPending: S({ mutationKey: e.signIn.all }) + S({ mutationKey: e.signUp.all }) > 0,
+		onPress: () => x({
+			provider: t,
+			callbackURL: v
+		}),
+		className: _("relative overflow-visible", l),
+		...u,
+		children: [
+			C ? /* @__PURE__ */ y(g, {
+				color: "current",
+				size: "sm"
+			}) : /* @__PURE__ */ y(w, {}),
+			a === "full" ? m.auth.continueWith.replace("{{provider}}", n(t)) : a === "name" ? n(t) : null,
+			a === "icon" && /* @__PURE__ */ y("span", {
+				className: "sr-only",
+				children: n(t)
+			}),
+			o !== "signUp" && /* @__PURE__ */ y(T, {
+				method: t,
+				floating: !0
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/auth/provider-buttons.tsx
+function D({ socialLayout: e = "auto", view: t = "signIn" }) {
+	let { socialProviders: n } = i(), r = v(() => e === "auto" ? n?.length && n.length >= 4 ? "horizontal" : "vertical" : e, [e, n?.length]);
+	return /* @__PURE__ */ y("div", {
+		className: _("gap-3", r === "grid" && "grid grid-cols-2", r === "vertical" && "flex flex-col", r === "horizontal" && "flex flex-wrap"),
+		children: n?.map((e) => /* @__PURE__ */ y(E, {
+			provider: e,
+			view: t,
+			display: r === "vertical" ? "full" : r === "grid" ? "name" : "icon",
+			className: _("w-full", r === "horizontal" && "flex-1")
+		}, e))
+	});
+}
+//#endregion
+//#region src/components/auth/user/user-avatar.tsx
+function O({ className: e, fallback: t, isPending: n, user: r, size: a = "sm", style: s, ...c }) {
+	let { authClient: d } = i(), { data: f, isPending: p } = o(d, { enabled: !r && !n });
+	if ((n || p) && !r) return /* @__PURE__ */ y(h, {
+		className: _("rounded-full", a === "sm" ? "size-8" : a === "md" ? "size-10" : "size-12", e),
+		style: s
+	});
+	let m = r ?? f?.user, g = (m?.username || m?.name || m?.email)?.slice(0, 2).toUpperCase();
+	return /* @__PURE__ */ b(u, {
+		size: a,
+		className: _("rounded-full", e),
+		style: s,
+		...c,
+		children: [/* @__PURE__ */ y(u.Image, {
+			alt: m?.displayUsername || m?.name || m?.email,
+			src: m?.image ?? void 0
+		}), /* @__PURE__ */ y(u.Fallback, {
+			className: _(a === "lg" ? "text-xl" : a === "md" ? "text-base" : "text-sm"),
+			delayMs: m?.image ? 600 : void 0,
+			children: t || g || /* @__PURE__ */ y(l, { className: "size-4" })
+		})]
+	});
+}
+//#endregion
+//#region src/components/auth/user/user-view.tsx
+function k({ className: e, isPending: t, size: n = "md", hideSubtitle: r = !1, user: a, ...s }) {
+	let { authClient: c } = i(), { data: l, isPending: u } = o(c, { enabled: !a && !t }), d = a ?? l?.user;
+	return (t || u) && !a ? /* @__PURE__ */ b("div", {
+		className: _("flex items-center gap-2 min-w-0", e),
+		...s,
+		children: [/* @__PURE__ */ y(O, {
+			isPending: !0,
+			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
+			size: n === "lg" ? "md" : "sm"
+		}), /* @__PURE__ */ b("div", {
+			className: "flex flex-col gap-1 min-w-0",
+			children: [/* @__PURE__ */ y(h, { className: "h-3.5 w-24 rounded-lg" }), r ? null : /* @__PURE__ */ y(h, { className: "h-3 w-32 rounded-lg" })]
+		})]
+	}) : /* @__PURE__ */ b("div", {
+		className: _("flex items-center gap-2 min-w-0", e),
+		...s,
+		children: [/* @__PURE__ */ y(O, {
+			className: n === "sm" ? "size-5 [&>span]:text-xs" : void 0,
+			user: d,
+			size: n === "lg" ? "md" : "sm"
+		}), /* @__PURE__ */ b("div", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ y("p", {
+				className: "text-foreground text-sm font-medium leading-tight truncate",
+				children: d?.displayUsername || d?.name || d?.email
+			}), !r && (d?.displayUsername || d?.name) ? /* @__PURE__ */ y("p", {
+				className: "text-muted text-xs leading-tight truncate overflow-x-hidden",
+				children: d?.email
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { T as a, E as i, O as n, w as o, D as r, C as s, k as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.27",
+  "version": "1.6.29",
   "type": "module",
   "scripts": {
     "build": "vite build",

package/src/components/auth/auth.tsx

@@ -4,6 +4,7 @@ import type { CardProps } from "@heroui/react"
 import { type ComponentType, useEffect } from "react"
 import { ForgotPassword } from "./forgot-password"
 import type { SocialLayout } from "./provider-buttons"
+import { ResetLinkSent } from "./reset-link-sent"
 import { ResetPassword } from "./reset-password"
 import { SignIn } from "./sign-in"
 import { SignOut } from "./sign-out"
@@ -25,7 +26,12 @@ export type AuthProps = {
  * When it's disabled, the `<Auth>` router redirects these to `signIn` so a
  * plugin's `fallbackViews.auth.signIn` (e.g. magic link) takes over.
  */
-const PASSWORD_ONLY_VIEWS = ["signUp", "forgotPassword", "resetPassword"]
+const PASSWORD_ONLY_VIEWS = [
+  "signUp",
+  "forgotPassword",
+  "resetPassword",
+  "resetLinkSent"
+]
 
 const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
   signIn: SignIn,
@@ -33,6 +39,7 @@ const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
   signUp: SignUp,
   forgotPassword: ForgotPassword,
   resetPassword: ResetPassword,
+  resetLinkSent: ResetLinkSent,
   verifyEmail: VerifyEmail
 }
 

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

@@ -15,11 +15,12 @@ import {
   Label,
   Link,
   Spinner,
-  TextField,
-  toast
+  TextField
 } from "@heroui/react"
 import type { SyntheticEvent } from "react"
 
+import { RESET_LINK_SENT_STORAGE_KEY } from "./reset-link-sent"
+
 export type ForgotPasswordProps = {
   className?: string
   variant?: CardProps["variant"]
@@ -29,7 +30,9 @@ export type ForgotPasswordProps = {
  * 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.
- * Success toasts are shown via `useRequestPasswordReset`; errors are handled globally by `ErrorToaster`.
+ * After a successful request the submitted email is stored in `sessionStorage`
+ * and the user is redirected to the reset-link-sent view, which offers to open
+ * their email provider. Errors are handled globally by `ErrorToaster`.
  *
  * @param className - Optional additional CSS class names applied to the card
  * @returns The forgot-password form UI as a JSX element
@@ -53,9 +56,9 @@ export function ForgotPassword({ className, variant }: ForgotPasswordProps) {
       onError: () => {
         resetFetchOptions()
       },
-      onSuccess: () => {
-        toast.success(localization.auth.passwordResetEmailSent)
-        navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+      onSuccess: (_data, { email }) => {
+        sessionStorage.setItem(RESET_LINK_SENT_STORAGE_KEY, email)
+        navigate({ to: `${basePaths.auth}/${viewPaths.auth.resetLinkSent}` })
       }
     }
   )

package/src/components/auth/last-login-method/last-used-badge.tsx

@@ -0,0 +1,40 @@
+import { useLastLoginMethod } from "@better-auth-ui/react"
+import { Chip, cn } from "@heroui/react"
+
+export type LastUsedBadgeProps = {
+  /** Login method IDs that should display the indicator. */
+  method: string | string[]
+  /** Use the shorter label in constrained layouts. */
+  compact?: boolean
+  /** Float the compact indicator over the top-right edge of its container. */
+  floating?: boolean
+}
+
+/**
+ * Displays an indicator when one of the supplied method IDs matches Better
+ * Auth's stored last login method.
+ */
+export function LastUsedBadge({
+  method,
+  compact,
+  floating
+}: LastUsedBadgeProps) {
+  const { method: lastLoginMethod, localization } = useLastLoginMethod()
+  const methods = Array.isArray(method) ? method : [method]
+
+  if (!lastLoginMethod || !methods.includes(lastLoginMethod)) return null
+
+  return (
+    <Chip
+      className={cn(
+        floating &&
+          "pointer-events-none absolute top-0 right-0 z-10 translate-x-1/4 -translate-y-1/2 shadow-sm"
+      )}
+      color={floating ? "accent" : "default"}
+      size="sm"
+      variant={floating ? "primary" : "secondary"}
+    >
+      {compact || floating ? localization.lastUsedShort : localization.lastUsed}
+    </Chip>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { useAuth, useAuthPlugin } from "@better-auth-ui/react"
+import {
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  Link,
+  useIsHydrated
+} from "@heroui/react"
+import { useEffect, useState } from "react"
+
+import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin"
+import { OpenEmailButton } from "../open-email-button"
+
+/** `sessionStorage` key the magic-link form stores the submitted email under. */
+export const MAGIC_LINK_SENT_STORAGE_KEY = "better-auth-ui.magic-link-sent"
+
+export type MagicLinkSentProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card confirming that a magic-link email was sent, with a button
+ * to open the user's email provider.
+ *
+ * The target email is read from `sessionStorage` (set when the magic-link
+ * form redirects here); the OpenEmail button is only shown when an email is
+ * stored and resolves to a known provider.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param variant - Variant to apply to the card
+ * @returns The magic-link-sent card React element
+ */
+export function MagicLinkSent({ className, variant }: MagicLinkSentProps) {
+  const { basePaths, emailAndPassword, localization, viewPaths } = useAuth()
+  const { localization: magicLinkLocalization } = useAuthPlugin(magicLinkPlugin)
+
+  const isHydrated = useIsHydrated()
+  const [email, setEmail] = useState(
+    (isHydrated && sessionStorage.getItem(MAGIC_LINK_SENT_STORAGE_KEY)) || ""
+  )
+
+  useEffect(() => {
+    setEmail(sessionStorage.getItem(MAGIC_LINK_SENT_STORAGE_KEY) ?? "")
+  }, [])
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm gap-4 md:p-6", className)}
+      variant={variant}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.checkYourEmailTitle}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        <Description className="text-sm">
+          {email
+            ? magicLinkLocalization.magicLinkSentTo.replace("{{email}}", email)
+            : magicLinkLocalization.magicLinkSent}
+        </Description>
+
+        {email && <OpenEmailButton email={email} />}
+      </Card.Content>
+
+      {emailAndPassword?.enabled && (
+        <Card.Footer className="flex-col gap-3">
+          <Description className="text-sm">
+            {localization.auth.needToCreateAnAccount}{" "}
+            <Link
+              href={`${basePaths.auth}/${viewPaths.auth.signUp}`}
+              className="text-accent no-underline hover:underline decoration-accent-hover"
+            >
+              {localization.auth.signUp}
+            </Link>
+          </Description>
+        </Card.Footer>
+      )}
+    </Card>
+  )
+}

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

@@ -17,8 +17,7 @@ import {
   Label,
   Link,
   Spinner,
-  TextField,
-  toast
+  TextField
 } from "@heroui/react"
 import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
@@ -26,6 +25,7 @@ import { type SyntheticEvent, useState } from "react"
 import { magicLinkPlugin } from "../../../lib/auth/magic-link-plugin"
 import { FieldSeparator } from "../field-separator"
 import { ProviderButtons, type SocialLayout } from "../provider-buttons"
+import { MAGIC_LINK_SENT_STORAGE_KEY } from "./magic-link-sent"
 
 export type MagicLinkProps = {
   className?: string
@@ -53,20 +53,24 @@ export function MagicLink({
     baseURL,
     emailAndPassword,
     localization,
+    navigate,
     plugins,
     redirectTo,
     socialProviders,
     viewPaths
   } = useAuth()
-  const { localization: magicLinkLocalization } = useAuthPlugin(magicLinkPlugin)
+  const { localization: magicLinkLocalization, viewPaths: magicLinkViewPaths } =
+    useAuthPlugin(magicLinkPlugin)
 
   const [email, setEmail] = useState("")
 
   const { mutate: signInMagicLink, isPending: signInMagicLinkPending } =
     useSignInMagicLink(authClient as MagicLinkAuthClient, {
-      onSuccess: () => {
-        setEmail("")
-        toast.success(magicLinkLocalization.magicLinkSent)
+      onSuccess: (_data, variables) => {
+        sessionStorage.setItem(MAGIC_LINK_SENT_STORAGE_KEY, variables.email)
+        navigate({
+          to: `${basePaths.auth}/${magicLinkViewPaths.auth.magicLinkSent}`
+        })
       }
     })
 
@@ -100,7 +104,7 @@ export function MagicLink({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="magicLink" />
             )}
 
             {showSeparator && (
@@ -154,7 +158,7 @@ export function MagicLink({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons socialLayout={socialLayout} />
+              <ProviderButtons socialLayout={socialLayout} view="magicLink" />
             )}
           </>
         )}

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

@@ -1,12 +1,18 @@
-import { authMutationKeys, getProviderName } from "@better-auth-ui/core"
+import {
+  type AuthView,
+  authMutationKeys,
+  getProviderName
+} from "@better-auth-ui/core"
 import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react"
-import { Button, type ButtonProps, Spinner } from "@heroui/react"
+import { Button, type ButtonProps, cn, Spinner } from "@heroui/react"
 import { useIsMutating } from "@tanstack/react-query"
 import type { SocialProvider } from "better-auth/social-providers"
+import { LastUsedBadge } from "./last-login-method/last-used-badge"
 
 export type ProviderButtonProps = {
   provider: SocialProvider
   display?: "full" | "name" | "icon"
+  view?: AuthView
 } & Omit<ButtonProps, "children" | "onPress" | "isPending" | "isDisabled">
 
 /**
@@ -18,7 +24,9 @@ export type ProviderButtonProps = {
 export function ProviderButton({
   provider,
   display = "full",
+  view = "signIn",
   variant = "tertiary",
+  className,
   ...props
 }: ProviderButtonProps) {
   const { authClient, baseURL, localization, redirectTo } = useAuth()
@@ -43,8 +51,8 @@ export function ProviderButton({
       variant={variant}
       isPending={isPending}
       onPress={() => signInSocial({ provider, callbackURL })}
+      className={cn("relative overflow-visible", className)}
       {...props}
-      aria-label={getProviderName(provider)}
     >
       {signInSocialPending ? (
         <Spinner color="current" size="sm" />
@@ -60,6 +68,12 @@ export function ProviderButton({
         : display === "name"
           ? getProviderName(provider)
           : null}
+
+      {display === "icon" && (
+        <span className="sr-only">{getProviderName(provider)}</span>
+      )}
+
+      {view !== "signUp" && <LastUsedBadge method={provider} floating />}
     </Button>
   )
 }

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

@@ -1,9 +1,11 @@
+import type { AuthView } from "@better-auth-ui/core"
 import { useAuth } from "@better-auth-ui/react"
 import { cn } from "@heroui/react"
 import { useMemo } from "react"
 import { ProviderButton } from "./provider-button"
 export type ProviderButtonsProps = {
   socialLayout?: SocialLayout
+  view?: AuthView
 }
 
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid"
@@ -16,7 +18,8 @@ export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid"
  * @returns The JSX element that renders the configured social provider buttons.
  */
 export function ProviderButtons({
-  socialLayout = "auto"
+  socialLayout = "auto",
+  view = "signIn"
 }: ProviderButtonsProps) {
   const { socialProviders } = useAuth()
 
@@ -45,6 +48,7 @@ export function ProviderButtons({
         <ProviderButton
           key={provider}
           provider={provider}
+          view={view}
           display={
             resolvedSocialLayout === "vertical"
               ? "full"

package/src/components/auth/reset-link-sent.tsx

@@ -0,0 +1,80 @@
+import { useAuth } from "@better-auth-ui/react"
+import {
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  Link,
+  useIsHydrated
+} from "@heroui/react"
+import { useEffect, useState } from "react"
+
+import { OpenEmailButton } from "./open-email-button"
+
+/** `sessionStorage` key the forgot-password form stores the submitted email under. */
+export const RESET_LINK_SENT_STORAGE_KEY = "better-auth-ui.reset-link-sent"
+
+export type ResetLinkSentProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card confirming that a password-reset email was sent, with a
+ * button to open the user's email provider.
+ *
+ * The target email is read from `sessionStorage` (set when the forgot-password
+ * form redirects here); the OpenEmail button is only shown when an email is
+ * stored and resolves to a known provider.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param variant - Variant to apply to the card
+ * @returns The reset-link-sent card React element
+ */
+export function ResetLinkSent({ className, variant }: ResetLinkSentProps) {
+  const { basePaths, localization, viewPaths } = useAuth()
+
+  const isHydrated = useIsHydrated()
+  const [email, setEmail] = useState(
+    (isHydrated && sessionStorage.getItem(RESET_LINK_SENT_STORAGE_KEY)) || ""
+  )
+
+  useEffect(() => {
+    setEmail(sessionStorage.getItem(RESET_LINK_SENT_STORAGE_KEY) ?? "")
+  }, [])
+
+  return (
+    <Card
+      className={cn("w-full max-w-sm gap-4 md:p-6", className)}
+      variant={variant}
+    >
+      <Card.Header>
+        <Card.Title className="text-xl font-semibold mb-1">
+          {localization.auth.checkYourEmailTitle}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        <Description className="text-sm">
+          {email
+            ? localization.auth.resetLinkSentTo.replace("{{email}}", email)
+            : localization.auth.passwordResetEmailSent}
+        </Description>
+
+        {email && <OpenEmailButton email={email} />}
+      </Card.Content>
+
+      <Card.Footer className="flex-col gap-3">
+        <Description className="text-sm">
+          {localization.auth.rememberYourPassword}{" "}
+          <Link
+            href={`${basePaths.auth}/${viewPaths.auth.signIn}`}
+            className="text-accent no-underline hover:underline decoration-accent-hover"
+          >
+            {localization.auth.signIn}
+          </Link>
+        </Description>
+      </Card.Footer>
+    </Card>
+  )
+}

package/src/components/auth/settings/security/change-password.tsx

@@ -25,6 +25,8 @@ import {
 } from "@heroui/react"
 import { type SyntheticEvent, useState } from "react"
 
+import { OpenEmailButton } from "../../open-email-button"
+
 export type ChangePasswordProps = {
   className?: string
   variant?: CardProps["variant"]
@@ -77,6 +79,7 @@ function SetPassword({
   const { authClient, localization, plugins } = useAuth()
   const { data: session } = useSession(authClient)
   const { fetchOptions, resetFetchOptions } = useFetchOptions()
+  const [sentEmail, setSentEmail] = useState("")
 
   const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
     authClient,
@@ -84,7 +87,9 @@ function SetPassword({
       onError: () => {
         resetFetchOptions()
       },
-      onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
+      onSuccess: (_data, { email }) => {
+        setSentEmail(email)
+      }
     }
   )
 
@@ -115,19 +120,32 @@ function SetPassword({
             </p>
           </div>
 
-          <div className="flex flex-col gap-3 items-start sm:items-end">
-            {Captcha && <div>{Captcha}</div>}
-
-            <Button
-              size="sm"
-              isPending={isPending}
-              isDisabled={!session?.user.email}
-              onPress={handleSetPassword}
-            >
-              {isPending && <Spinner color="current" size="sm" />}
-              {localization.auth.sendResetLink}
-            </Button>
-          </div>
+          {sentEmail ? (
+            <div className="flex flex-col gap-3 items-start sm:items-end">
+              <p className="text-sm" role="status">
+                {localization.auth.resetLinkSentTo.replace(
+                  "{{email}}",
+                  sentEmail
+                )}
+              </p>
+
+              <OpenEmailButton email={sentEmail} className="w-auto" />
+            </div>
+          ) : (
+            <div className="flex flex-col gap-3 items-start sm:items-end">
+              {Captcha && <div>{Captcha}</div>}
+
+              <Button
+                size="sm"
+                isPending={isPending}
+                isDisabled={!session?.user.email}
+                onPress={handleSetPassword}
+              >
+                {isPending && <Spinner color="current" size="sm" />}
+                {localization.auth.sendResetLink}
+              </Button>
+            </div>
+          )}
         </Card.Content>
       </Card>
     </div>