@better-auth-ui/heroui 1.6.4 → 1.6.6

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

@@ -11,14 +11,38 @@ import {
   type ButtonProps,
   cn,
   Dropdown,
+  type DropdownItemProps,
   type DropdownPopoverProps,
-  Label,
-  Separator
+  Label
 } from "@heroui/react"
+import { isValidElement, type ReactElement, type ReactNode } from "react"
 
 import { UserAvatar } from "./user-avatar"
 import { UserView } from "./user-view"
 
+/** Auth states a `UserButton` link can be visible in. */
+export type UserButtonLinkVisibility =
+  | "authenticated"
+  | "unauthenticated"
+  | "always"
+
+/** A simple link entry rendered as a `Dropdown.Item` in the `UserButton` menu. */
+export type UserButtonLink = {
+  /** Visible label. */
+  label: ReactNode
+  /** Destination URL. */
+  href: string
+  /** Optional leading icon. Sized/coloured to match built-in items. */
+  icon?: ReactNode
+  /** Forwarded to the underlying `Dropdown.Item`. */
+  variant?: DropdownItemProps["variant"]
+  /**
+   * When this link is visible based on auth state.
+   * @default "always"
+   */
+  visibility?: UserButtonLinkVisibility
+}
+
 export type UserButtonProps = {
   className?: string
   size?: "default" | "icon"
@@ -28,6 +52,30 @@ export type UserButtonProps = {
    */
   placement?: DropdownPopoverProps["placement"]
   variant?: ButtonProps["variant"]
+  /** Additional menu entries rendered above the built-in items. */
+  links?: (UserButtonLink | ReactElement)[]
+  /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
+  hideSettings?: boolean
+}
+
+function renderUserLink(
+  link: UserButtonLink | ReactElement,
+  fallbackKey: string
+): ReactNode {
+  if (isValidElement(link)) return link
+
+  const { label, href, icon, variant } = link
+  return (
+    <Dropdown.Item
+      key={fallbackKey}
+      href={href}
+      variant={variant}
+      textValue={typeof label === "string" ? label : undefined}
+    >
+      {icon}
+      <Label>{label}</Label>
+    </Dropdown.Item>
+  )
 }
 
 /**
@@ -37,13 +85,17 @@ export type UserButtonProps = {
  * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
  * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
  * @param variant - Button visual variant passed to the underlying Button component
+ * @param links - Additional menu entries rendered above the built-in items
+ * @param hideSettings - Hide the built-in "Settings" link
  * @returns The user button and its dropdown menu as a JSX element
  */
 export function UserButton({
   className,
   placement = "bottom",
   size = "default",
-  variant = "ghost"
+  variant = "ghost",
+  links,
+  hideSettings = false
 }: UserButtonProps) {
   const { authClient, basePaths, viewPaths, localization, plugins } = useAuth()
 
@@ -55,6 +107,16 @@ export function UserButton({
         <Item key={`${plugin.id}-${index.toString()}`} />
       )) ?? []
   )
+
+  const userLinks = links?.flatMap((link, index) => {
+    if (!isValidElement(link)) {
+      const visibility = link.visibility ?? "always"
+      if (visibility === "authenticated" && !session) return []
+      if (visibility === "unauthenticated" && session) return []
+    }
+    return [renderUserLink(link, `user-button-link-${index.toString()}`)]
+  })
+
   return (
     <Dropdown>
       {size === "icon" ? (
@@ -96,30 +158,35 @@ export function UserButton({
         <Dropdown.Menu>
           {session ? (
             <>
-              <Dropdown.Item
-                textValue={localization.settings.settings}
-                href={`${basePaths.settings}/${viewPaths.settings.account}`}
-              >
-                <Gear className="text-muted" />
+              {userLinks}
 
-                <Label>{localization.settings.settings}</Label>
-              </Dropdown.Item>
+              {!hideSettings && (
+                <Dropdown.Item
+                  textValue={localization.settings.settings}
+                  href={`${basePaths.settings}/${viewPaths.settings.account}`}
+                >
+                  <Gear className="text-muted" />
 
-              {userMenuItems}
+                  <Label>{localization.settings.settings}</Label>
+                </Dropdown.Item>
+              )}
 
-              <Separator />
+              {userMenuItems}
 
               <Dropdown.Item
                 textValue={localization.auth.signOut}
                 href={`${basePaths.auth}/${viewPaths.auth.signOut}`}
+                variant="danger"
               >
-                <ArrowRightFromSquare className="text-muted" />
+                <ArrowRightFromSquare className="text-danger" />
 
                 <Label>{localization.auth.signOut}</Label>
               </Dropdown.Item>
             </>
           ) : (
             <>
+              {userLinks}
+
               <Dropdown.Item
                 textValue={localization.auth.signIn}
                 href={`${basePaths.auth}/${viewPaths.auth.signIn}`}

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

@@ -3,6 +3,7 @@ import {
   type UsernameAuthClient,
   useAuth,
   useAuthPlugin,
+  useFetchOptions,
   useSendVerificationEmail,
   useSignInEmail,
   useSignInUsername
@@ -61,6 +62,8 @@ export function SignInUsername({
     navigate
   } = useAuth()
 
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
+
   const { localization: usernameLocalization } = useAuthPlugin(usernamePlugin)
 
   const [password, setPassword] = useState("")
@@ -76,33 +79,37 @@ export function SignInUsername({
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
   }
 
-  const { mutate: signInEmail } = useSignInEmail(authClient, {
-    onError: (error, { email }) => {
-      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}`
-              })
-          }
-        })
-      } else {
-        toast.danger(error.error?.message || error.message)
-      }
-    },
-    onSuccess: () => navigate({ to: redirectTo })
-  })
+  const { mutate: signInEmail, isPending: isSignInEmailPending } =
+    useSignInEmail(authClient, {
+      onError: (error, { email }) => {
+        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}`
+                })
+            }
+          })
+        } else {
+          toast.danger(error.error?.message || error.message)
+        }
+
+        resetFetchOptions()
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
 
-  const { mutate: signInUsername, isPending: isSignInPending } =
+  const { mutate: signInUsername, isPending: isSignInUsernamePending } =
     useSignInUsername(authClient as UsernameAuthClient, {
       onError: (error) => {
         setPassword("")
         toast.danger(error.error?.message || error.message)
+        resetFetchOptions()
       },
       onSuccess: () => navigate({ to: redirectTo })
     })
@@ -118,13 +125,15 @@ export function SignInUsername({
       signInEmail({
         email,
         password,
-        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+        fetchOptions
       })
     } else {
       signInUsername({
         username: email,
         password,
-        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+        fetchOptions
       })
     }
   }
@@ -136,6 +145,11 @@ export function SignInUsername({
     mutationKey: authMutationKeys.signUp.all
   })
   const isPending = signInMutating + signUpMutating > 0
+  const isSignInPending = isSignInEmailPending || isSignInUsernamePending
+
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
 
@@ -220,6 +234,8 @@ export function SignInUsername({
               </Checkbox>
             )}
 
+            {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
             <div className="flex flex-col gap-3">
               <Button
                 type="submit"

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

@@ -84,7 +84,6 @@ export function UsernameField({
       minLength={minUsernameLength}
       maxLength={maxUsernameLength}
       isDisabled={isPending}
-      isRequired={field.required}
       isReadOnly={field.readOnly}
       value={value}
       onChange={handleChange}
@@ -92,7 +91,10 @@ export function UsernameField({
       <Label>{field.label}</Label>
 
       <InputGroup variant={variant === "transparent" ? "primary" : "secondary"}>
-        <InputGroup.Input placeholder={field.placeholder} />
+        <InputGroup.Input
+          placeholder={field.placeholder}
+          required={field.required}
+        />
 
         {isCheckingAvailability && (
           <InputGroup.Suffix