@better-auth-ui/heroui 1.6.22 → 1.6.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.22",
+  "version": "1.6.24",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -33,8 +33,8 @@
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.2.0",
-    "@heroui/styles": "^3.2.0",
+    "@heroui/react": "^3.2.1",
+    "@heroui/styles": "^3.2.1",
     "@internationalized/date": "^3.12.2",
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.100.14",
@@ -54,8 +54,8 @@
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.2.0",
-    "@heroui/styles": ">=3.2.0",
+    "@heroui/react": ">=3.2.1",
+    "@heroui/styles": ">=3.2.1",
     "@internationalized/date": ">=3.12.2",
     "@tanstack/react-pacer": ">=0.22.1",
     "@tanstack/react-query": ">=5.100.14",

package/src/components/auth/additional-field.tsx

@@ -34,7 +34,7 @@ import {
   toCalendarDate,
   toCalendarDateTime
 } from "@internationalized/date"
-import { useRef, useState } from "react"
+import { type ComponentType, useRef, useState } from "react"
 
 import type { AdditionalFieldProps } from "../../lib/auth/auth-plugin"
 
@@ -128,12 +128,17 @@ export function AdditionalField({
   const { localization } = useAuth()
   const inputType = resolveInputType(field)
   const inputVariant = variant === "transparent" ? "primary" : "secondary"
-  // Used by `inputType: "input"` with `copyable: true` so the copy button
-  // reads the input's *live* value rather than a stale `defaultValue`.
-  const inputRef = useRef<HTMLInputElement>(null)
 
   if (field.render) {
-    return <>{field.render({ name, field, isPending, variant })}</>
+    const FieldRenderer = field.render as ComponentType<AdditionalFieldProps>
+    return (
+      <FieldRenderer
+        name={name}
+        field={field}
+        isPending={isPending}
+        variant={variant}
+      />
+    )
   }
 
   if (inputType === "hidden") {
@@ -471,13 +476,28 @@ export function AdditionalField({
     )
   }
 
-  // inputType === "input"
+  return (
+    <HeroInputField
+      name={name}
+      field={field}
+      isPending={isPending}
+      variant={variant}
+    />
+  )
+}
+
+function HeroInputField({
+  name,
+  field,
+  isPending,
+  variant
+}: AdditionalFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const inputVariant = variant === "transparent" ? "primary" : "secondary"
+
   const hasPrefix = field.prefix != null
   const hasSuffix = field.suffix != null || field.copyable
 
-  // When `inputType: "input"` is paired with `type: "number"`, restrict the
-  // native input to numbers. `formatOptions.maximumFractionDigits` enables
-  // fractional input via `step`.
   const isNumeric = field.type === "number"
   const maxFractionDigits = field.formatOptions?.maximumFractionDigits
   const nativeInputType = isNumeric ? "number" : undefined

package/src/components/auth/auth.tsx

@@ -8,6 +8,7 @@ import { ResetPassword } from "./reset-password"
 import { SignIn } from "./sign-in"
 import { SignOut } from "./sign-out"
 import { SignUp } from "./sign-up"
+import { VerifyEmail } from "./verify-email"
 
 export type AuthProps = {
   className?: string
@@ -31,7 +32,8 @@ const AUTH_VIEWS: Partial<Record<AuthView, ComponentType<AuthProps>>> = {
   signOut: SignOut,
   signUp: SignUp,
   forgotPassword: ForgotPassword,
-  resetPassword: ResetPassword
+  resetPassword: ResetPassword,
+  verifyEmail: VerifyEmail
 }
 
 /**

package/src/components/auth/open-email-button.tsx

@@ -0,0 +1,50 @@
+import { getEmailProviderLink } from "@better-auth-ui/core"
+import { useAuth } from "@better-auth-ui/react"
+import { ArrowUpRightFromSquare } from "@gravity-ui/icons"
+import { cn, Link } from "@heroui/react"
+import { buttonVariants } from "@heroui/styles"
+
+export type OpenEmailButtonProps = {
+  /** Email address used to detect the provider, e.g. from the verify-email flow. */
+  email: string
+  className?: string
+}
+
+/**
+ * Render a link styled as a button that opens the user's email provider login
+ * page in a new tab.
+ *
+ * The provider is resolved from the email domain via the curated
+ * `@mikkelscheike/email-provider-links` dataset (Gmail, Outlook, GMX, etc.).
+ * Renders nothing when the domain is empty or not a known provider.
+ *
+ * @param email - Email address to resolve the provider from.
+ * @param className - Additional CSS classes applied to the link.
+ * @returns The open-email link element, or `null` when no provider matches.
+ */
+export function OpenEmailButton({ email, className }: OpenEmailButtonProps) {
+  const { localization } = useAuth()
+
+  const provider = getEmailProviderLink(email)
+  if (!provider) return null
+
+  return (
+    <Link
+      href={provider.loginUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        buttonVariants({ variant: "primary" }),
+        "w-full gap-2",
+        className
+      )}
+    >
+      {localization.auth.openEmailProvider.replace(
+        "{{provider}}",
+        provider.companyProvider
+      )}
+
+      <ArrowUpRightFromSquare className="size-3" />
+    </Link>
+  )
+}

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

@@ -1,10 +1,5 @@
 import { authMutationKeys } from "@better-auth-ui/core"
-import {
-  useAuth,
-  useFetchOptions,
-  useSendVerificationEmail,
-  useSignInEmail
-} from "@better-auth-ui/react"
+import { useAuth, useFetchOptions, useSignInEmail } from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -18,8 +13,7 @@ import {
   Label,
   Link,
   Spinner,
-  TextField,
-  toast
+  TextField
 } from "@heroui/react"
 import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
@@ -48,7 +42,6 @@ export function SignIn({
   const {
     authClient,
     basePaths,
-    baseURL,
     emailAndPassword,
     localization,
     plugins,
@@ -62,13 +55,6 @@ export function SignIn({
 
   const [password, setPassword] = useState("")
 
-  const { mutate: sendVerificationEmail } = useSendVerificationEmail(
-    authClient,
-    {
-      onSuccess: () => toast.success(localization.auth.verificationEmailSent)
-    }
-  )
-
   const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
     authClient,
     {
@@ -76,15 +62,9 @@ export function SignIn({
         setPassword("")
 
         if (error.error?.code === "EMAIL_NOT_VERIFIED") {
-          toast.danger(error.error?.message || error.message, {
-            actionProps: {
-              children: localization.auth.resend,
-              onClick: () =>
-                sendVerificationEmail({
-                  email,
-                  callbackURL: `${baseURL}${redirectTo}`
-                })
-            }
+          sessionStorage.setItem("better-auth-ui.verify-email", email)
+          navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.verifyEmail}`
           })
         }
 

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

@@ -75,10 +75,12 @@ export function SignUp({
         setConfirmPassword("")
         resetFetchOptions()
       },
-      onSuccess: () => {
+      onSuccess: (_data, { email }) => {
         if (emailAndPassword?.requireEmailVerification) {
-          toast.success(localization.auth.verifyYourEmail)
-          navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })
+          sessionStorage.setItem("better-auth-ui.verify-email", email)
+          navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.verifyEmail}`
+          })
         } else {
           navigate({ to: redirectTo })
         }

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

@@ -4,7 +4,6 @@ import {
   useAuth,
   useAuthPlugin,
   useFetchOptions,
-  useSendVerificationEmail,
   useSignInEmail,
   useSignInUsername
 } from "@better-auth-ui/react"
@@ -21,8 +20,7 @@ import {
   Label,
   Link,
   Spinner,
-  TextField,
-  toast
+  TextField
 } from "@heroui/react"
 import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
@@ -51,7 +49,6 @@ export function SignInUsername({
   const {
     authClient,
     basePaths,
-    baseURL,
     emailAndPassword,
     localization,
     plugins,
@@ -67,13 +64,6 @@ export function SignInUsername({
 
   const [password, setPassword] = useState("")
 
-  const { mutate: sendVerificationEmail } = useSendVerificationEmail(
-    authClient,
-    {
-      onSuccess: () => toast.success(localization.auth.verificationEmailSent)
-    }
-  )
-
   function isEmail(value: string): boolean {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
   }
@@ -84,15 +74,9 @@ export function SignInUsername({
         setPassword("")
 
         if (error.error?.code === "EMAIL_NOT_VERIFIED") {
-          toast.danger(error.error?.message || error.message, {
-            actionProps: {
-              children: localization.auth.resend,
-              onClick: () =>
-                sendVerificationEmail({
-                  email,
-                  callbackURL: `${baseURL}${redirectTo}`
-                })
-            }
+          sessionStorage.setItem("better-auth-ui.verify-email", email)
+          navigate({
+            to: `${basePaths.auth}/${viewPaths.auth.verifyEmail}`
           })
         }
 

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

@@ -0,0 +1,144 @@
+import { useAuth, useSendVerificationEmail } from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  Description,
+  Link,
+  Spinner,
+  toast,
+  useIsHydrated
+} from "@heroui/react"
+import { useEffect, useState } from "react"
+
+import { OpenEmailButton } from "./open-email-button"
+
+export type VerifyEmailProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/** Seconds the resend button stays disabled to prevent spamming the endpoint. */
+const RESEND_COOLDOWN_SECONDS = 60
+
+/**
+ * Render a card prompting the user to verify their email, with a resend button
+ * 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.
+ *
+ * @param className - Additional CSS classes applied to the outer card container
+ * @param variant - Variant to apply to the card
+ * @returns The verify-email card React element
+ */
+export function VerifyEmail({ className, variant }: VerifyEmailProps) {
+  const {
+    authClient,
+    basePaths,
+    baseURL,
+    localization,
+    navigate,
+    redirectTo,
+    viewPaths
+  } = useAuth()
+
+  const isHydrated = useIsHydrated()
+  const [email, setEmail] = useState(
+    (isHydrated && sessionStorage.getItem("better-auth-ui.verify-email")) || ""
+  )
+  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])
+
+  useEffect(() => {
+    if (cooldown <= 0) return
+
+    const interval = setInterval(() => {
+      setCooldown((current) => (current > 0 ? current - 1 : 0))
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [cooldown])
+
+  const { mutate: sendVerificationEmail, isPending } = useSendVerificationEmail(
+    authClient,
+    {
+      onSuccess: () => {
+        toast.success(localization.auth.verificationEmailSent)
+        setCooldown(RESEND_COOLDOWN_SECONDS)
+      }
+    }
+  )
+
+  const isCoolingDown = cooldown > 0
+
+  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.verifyEmail}
+        </Card.Title>
+      </Card.Header>
+
+      <Card.Content className="gap-4">
+        <Description className="text-sm">
+          {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>
+      </Card.Content>
+
+      <Card.Footer className="flex-col gap-3">
+        <Description className="text-sm">
+          {localization.auth.alreadyVerifiedYourEmail}{" "}
+          <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/index.tsx

@@ -4,6 +4,7 @@ export * from "./components/auth/additional-field"
 export * from "./components/auth/auth"
 export * from "./components/auth/auth-provider"
 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-password"
@@ -21,3 +22,4 @@ export * from "./components/auth/sign-up"
 export * from "./components/auth/user/user-avatar"
 export * from "./components/auth/user/user-button"
 export * from "./components/auth/user/user-view"
+export * from "./components/auth/verify-email"