@better-auth-ui/heroui 1.6.26 → 1.6.28

package/dist/user-view-CxSDufx_.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.26",
+  "version": "1.6.28",
   "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/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}`
+        })
       }
     })
 

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>

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

@@ -82,16 +82,31 @@ export function SignInUsername({
 
         resetFetchOptions()
       },
-      onSuccess: () => navigate({ to: redirectTo })
+      onSuccess: () => {
+        sessionStorage.removeItem("better-auth-ui.verify-email")
+        navigate({ to: redirectTo })
+      }
     })
 
   const { mutate: signInUsername, isPending: isSignInUsernamePending } =
     useSignInUsername(authClient as UsernameAuthClient, {
-      onError: () => {
+      onError: (error) => {
         setPassword("")
+
+        if (error.error?.code === "EMAIL_NOT_VERIFIED") {
+          sessionStorage.removeItem("better-auth-ui.verify-email")
+
+          navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.verifyEmail}`
+          })
+        }
+
         resetFetchOptions()
       },
-      onSuccess: () => navigate({ to: redirectTo })
+      onSuccess: () => {
+        sessionStorage.removeItem("better-auth-ui.verify-email")
+        navigate({ to: redirectTo })
+      }
     })
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {

package/src/components/auth/verify-email.tsx

@@ -27,9 +27,9 @@ const RESEND_COOLDOWN_SECONDS = 60
  * that is rate-limited by a cooldown timer.
  *
  * The target email is read from `sessionStorage` (set when sign-up or sign-in
- * redirects here); if none is stored the user is redirected back to sign-in.
- * The resend button is disabled while a cooldown is active and shows the
- * remaining seconds.
+ * redirects here); the OpenEmail/Resend controls are only shown when an email
+ * is stored. The resend button is disabled while a cooldown is active and shows
+ * the remaining seconds.
  *
  * @param className - Additional CSS classes applied to the outer card container
  * @param variant - Variant to apply to the card
@@ -41,7 +41,6 @@ export function VerifyEmail({ className, variant }: VerifyEmailProps) {
     basePaths,
     baseURL,
     localization,
-    navigate,
     redirectTo,
     viewPaths
   } = useAuth()
@@ -53,25 +52,18 @@ export function VerifyEmail({ className, variant }: VerifyEmailProps) {
   const [cooldown, setCooldown] = useState(RESEND_COOLDOWN_SECONDS)
 
   useEffect(() => {
-    const storedEmail = sessionStorage.getItem("better-auth-ui.verify-email")
-
-    if (!storedEmail) {
-      navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
-      return
-    }
-
-    setEmail(storedEmail)
-  }, [basePaths.auth, navigate, viewPaths.auth.signIn])
+    setEmail(sessionStorage.getItem("better-auth-ui.verify-email") ?? "")
+  }, [])
 
   useEffect(() => {
-    if (cooldown <= 0) return
+    if (cooldown <= 0 || !email) return
 
     const interval = setInterval(() => {
       setCooldown((current) => (current > 0 ? current - 1 : 0))
     }, 1000)
 
     return () => clearInterval(interval)
-  }, [cooldown])
+  }, [cooldown, email])
 
   const { mutate: sendVerificationEmail, isPending } = useSendVerificationEmail(
     authClient,
@@ -101,31 +93,33 @@ export function VerifyEmail({ className, variant }: VerifyEmailProps) {
           {localization.auth.checkYourEmail}
         </Description>
 
-        <div className="flex flex-col gap-3">
-          <OpenEmailButton email={email} />
-
-          <Button
-            className="w-full"
-            variant="tertiary"
-            isDisabled={!email || isCoolingDown || isPending}
-            isPending={isPending}
-            onPress={() =>
-              sendVerificationEmail({
-                email,
-                callbackURL: `${baseURL}${redirectTo}`
-              })
-            }
-          >
-            {isPending && <Spinner color="current" size="sm" />}
-
-            {isCoolingDown
-              ? localization.auth.resendIn.replace(
-                  "{{seconds}}",
-                  String(cooldown)
-                )
-              : localization.auth.resend}
-          </Button>
-        </div>
+        {email && (
+          <div className="flex flex-col gap-3">
+            <OpenEmailButton email={email} />
+
+            <Button
+              className="w-full"
+              variant="tertiary"
+              isDisabled={!email || isCoolingDown || isPending}
+              isPending={isPending}
+              onPress={() =>
+                sendVerificationEmail({
+                  email,
+                  callbackURL: `${baseURL}${redirectTo}`
+                })
+              }
+            >
+              {isPending && <Spinner color="current" size="sm" />}
+
+              {isCoolingDown
+                ? localization.auth.resendIn.replace(
+                    "{{seconds}}",
+                    String(cooldown)
+                  )
+                : localization.auth.resend}
+            </Button>
+          </div>
+        )}
       </Card.Content>
 
       <Card.Footer className="flex-col gap-3">

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/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

@@ -6,6 +6,7 @@ export * from "./components/auth/delete-user/danger-zone"
 export * from "./components/auth/delete-user/delete-account"
 // 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"