@better-auth-ui/heroui 1.6.1 → 1.6.3

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

@@ -0,0 +1,67 @@
+import { getProviderName } from "@better-auth-ui/core"
+import { providerIcons, useAuth, useSignInSocial } from "@better-auth-ui/react"
+import { Button, type ButtonProps, Spinner } from "@heroui/react"
+import type { SocialProvider } from "better-auth/social-providers"
+import { useState } from "react"
+
+export type ProviderButtonProps = {
+  provider: SocialProvider
+  label?: "continueWith" | "providerName" | "none"
+  isDisabled?: boolean
+} & Omit<ButtonProps, "children" | "onPress" | "isPending">
+
+/**
+ * Render a single social provider sign-in button with its own mutation and pending state.
+ *
+ * @param provider - The social provider this button signs in with.
+ * @param label - Label style: `"continueWith"` (e.g. "Continue with Google"), `"providerName"` (e.g. "Google"), or `"none"` (icon only).
+ * @param isDisabled - External disabled state (e.g. a sibling provider is mid-redirect).
+ */
+export function ProviderButton({
+  provider,
+  label = "continueWith",
+  isDisabled,
+  variant = "tertiary",
+  ...props
+}: ProviderButtonProps) {
+  const { baseURL, localization, redirectTo } = useAuth()
+
+  const callbackURL = `${baseURL}${redirectTo}`
+
+  const [redirecting, setRedirecting] = useState(false)
+
+  const { mutate: signInSocial, isPending } = useSignInSocial({
+    onSuccess: () => {
+      setRedirecting(true)
+
+      setTimeout(() => {
+        setRedirecting(false)
+      }, 5000)
+    }
+  })
+
+  const ProviderIcon = providerIcons[provider]
+
+  const pending = isPending || redirecting
+
+  return (
+    <Button
+      variant={variant}
+      isDisabled={isDisabled}
+      isPending={pending}
+      onPress={() => signInSocial({ provider, callbackURL })}
+      {...props}
+    >
+      {pending ? <Spinner color="current" size="sm" /> : <ProviderIcon />}
+
+      {label === "continueWith"
+        ? localization.auth.continueWith.replace(
+            "{{provider}}",
+            getProviderName(provider)
+          )
+        : label === "providerName"
+          ? getProviderName(provider)
+          : null}
+    </Button>
+  )
+}

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

@@ -1,36 +1,28 @@
-import { getProviderName } from "@better-auth-ui/core"
-import { providerIcons, useAuth } from "@better-auth-ui/react"
-import { Button, cn } from "@heroui/react"
-import type { SocialProvider } from "better-auth/social-providers"
+import { useAuth } from "@better-auth-ui/react"
+import { cn } from "@heroui/react"
 import { useMemo } from "react"
 
+import { ProviderButton } from "./provider-button"
+
 export type ProviderButtonsProps = {
-  isPending: boolean
+  isPending?: boolean
   socialLayout?: SocialLayout
-  signInSocial: (params: {
-    provider: SocialProvider
-    callbackURL: string
-  }) => void
 }
 
 export type SocialLayout = "auto" | "horizontal" | "vertical" | "grid"
 
 /**
- * Render social provider sign-in buttons and handle initiation and pending state.
+ * Render social provider sign-in buttons. Each button owns its own sign-in mutation.
  *
- * @param isPending - Disables all provider buttons when true.
+ * @param isPending - External pending state (e.g. parent form submitting) that disables all buttons.
  * @param socialLayout - Preferred layout for the buttons; `"auto"` picks `"horizontal"` when there are four or more providers, otherwise `"vertical"`.
- * @param signInSocial - Callback invoked with the provider and callbackURL when a button is clicked.
  * @returns The JSX element that renders the configured social provider buttons.
  */
 export function ProviderButtons({
   isPending,
-  socialLayout = "auto",
-  signInSocial
+  socialLayout = "auto"
 }: ProviderButtonsProps) {
-  const { baseURL, localization, redirectTo, socialProviders } = useAuth()
-
-  const callbackURL = `${baseURL}${redirectTo}`
+  const { socialProviders } = useAuth()
 
   const resolvedSocialLayout = useMemo(() => {
     if (socialLayout === "auto") {
@@ -53,33 +45,24 @@ export function ProviderButtons({
         resolvedSocialLayout === "horizontal" && "flex flex-wrap"
       )}
     >
-      {socialProviders?.map((provider) => {
-        const ProviderIcon = providerIcons[provider]
-
-        return (
-          <Button
-            key={provider}
-            className={cn(
-              "w-full",
-              resolvedSocialLayout === "horizontal" && "flex-1"
-            )}
-            variant="tertiary"
-            isPending={isPending}
-            onPress={() => signInSocial({ provider, callbackURL })}
-          >
-            <ProviderIcon />
-
-            {resolvedSocialLayout === "vertical"
-              ? localization.auth.continueWith.replace(
-                  "{{provider}}",
-                  getProviderName(provider)
-                )
+      {socialProviders?.map((provider) => (
+        <ProviderButton
+          key={provider}
+          provider={provider}
+          isDisabled={isPending}
+          label={
+            resolvedSocialLayout === "vertical"
+              ? "continueWith"
               : resolvedSocialLayout === "grid"
-                ? getProviderName(provider)
-                : null}
-          </Button>
-        )
-      })}
+                ? "providerName"
+                : "none"
+          }
+          className={cn(
+            "w-full",
+            resolvedSocialLayout === "horizontal" && "flex-1"
+          )}
+        />
+      ))}
     </div>
   )
 }

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

@@ -31,12 +31,11 @@ export function ResetPassword({
   className,
   variant,
   ...props
-}: ResetPasswordProps & CardProps) {
+}: ResetPasswordProps & Omit<CardProps, "children">) {
   const { basePaths, emailAndPassword, localization, viewPaths, navigate } =
     useAuth()
 
   const { mutate: resetPassword, isPending } = useResetPassword({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => {
       toast.success(localization.auth.passwordResetSuccess)
       navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })

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

@@ -2,7 +2,7 @@ import {
   useAuth,
   useSendVerificationEmail,
   useSignInEmail,
-  useSignInSocial
+  useSignInUsername
 } from "@better-auth-ui/react"
 import {
   Button,
@@ -34,6 +34,10 @@ export interface SignInProps {
   variant?: CardProps["variant"]
 }
 
+function isEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+}
+
 /**
  * Render the sign-in UI using auth context for configuration and localization.
  *
@@ -45,7 +49,7 @@ export function SignIn({
   socialPosition = "bottom",
   variant,
   ...props
-}: SignInProps & CardProps) {
+}: SignInProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     baseURL,
@@ -55,6 +59,7 @@ export function SignIn({
     passkey,
     redirectTo,
     socialProviders,
+    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
@@ -62,44 +67,41 @@ export function SignIn({
   const [password, setPassword] = useState("")
 
   const { mutate: sendVerificationEmail } = useSendVerificationEmail({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.auth.verificationEmailSent)
   })
 
-  const { mutate: signInEmail, isPending: signInPending } = useSignInEmail({
-    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 [socialRedirecting, setSocialRedirecting] = useState(false)
-
-  const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
-    onError: (error) => toast.danger(error.error?.message || error.message),
-    onSuccess: () => {
-      setSocialRedirecting(true)
-
-      setTimeout(() => {
-        setSocialRedirecting(false)
-      }, 5000)
+  const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
+    {
+      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: signInUsername, isPending: signInUsernamePending } =
+    useSignInUsername({
+      onError: (error) => {
+        setPassword("")
+        toast.danger(error.error?.message || error.message)
+      },
+      onSuccess: () => navigate({ to: redirectTo })
+    })
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -108,14 +110,21 @@ export function SignIn({
     const email = formData.get("email") as string
     const rememberMe = formData.get("rememberMe") === "on"
 
-    signInEmail({
-      email,
-      password,
-      ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
-    })
+    if (usernameConfig?.enabled && !isEmail(email)) {
+      signInUsername({
+        username: email,
+        password
+      })
+    } else {
+      signInEmail({
+        email,
+        password,
+        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
+      })
+    }
   }
 
-  const isPending = signInPending || socialPending || socialRedirecting
+  const isPending = signInEmailPending || signInUsernamePending
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
 
@@ -137,7 +146,6 @@ export function SignIn({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}
@@ -152,14 +160,22 @@ export function SignIn({
           <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
             <TextField
               name="email"
-              type="email"
-              autoComplete="email"
+              type={usernameConfig?.enabled ? "text" : "email"}
+              autoComplete={usernameConfig?.enabled ? "username" : "email"}
               isDisabled={isPending}
             >
-              <Label>{localization.auth.email}</Label>
+              <Label>
+                {usernameConfig?.enabled
+                  ? localization.auth.username
+                  : localization.auth.email}
+              </Label>
 
               <Input
-                placeholder={localization.auth.emailPlaceholder}
+                placeholder={
+                  usernameConfig?.enabled
+                    ? localization.auth.usernameOrEmailPlaceholder
+                    : localization.auth.emailPlaceholder
+                }
                 variant={variant === "transparent" ? "primary" : "secondary"}
                 required
               />
@@ -229,7 +245,6 @@ export function SignIn({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}

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

@@ -1,5 +1,9 @@
-import { useAuth, useSignInSocial, useSignUpEmail } from "@better-auth-ui/react"
-import { Eye, EyeSlash } from "@gravity-ui/icons"
+import {
+  useAuth,
+  useIsUsernameAvailable,
+  useSignUpEmail
+} from "@better-auth-ui/react"
+import { Check, Eye, EyeSlash, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Card,
@@ -16,6 +20,7 @@ import {
   TextField,
   toast
 } from "@heroui/react"
+import { useDebouncer } from "@tanstack/react-pacer"
 import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
@@ -45,7 +50,7 @@ export function SignUp({
   socialPosition = "bottom",
   variant,
   ...props
-}: SignUpProps & CardProps) {
+}: SignUpProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     emailAndPassword,
@@ -53,12 +58,42 @@ export function SignUp({
     magicLink,
     redirectTo,
     socialProviders,
+    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
 
   const [password, setPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
+  const [username, setUsername] = useState("")
+
+  const {
+    mutate: isUsernameAvailable,
+    data: usernameData,
+    error: usernameError,
+    reset: resetUsername
+  } = useIsUsernameAvailable()
+
+  const usernameDebouncer = useDebouncer(
+    (value: string) => {
+      if (!value.trim()) {
+        resetUsername()
+        return
+      }
+
+      isUsernameAvailable({ username: value.trim() })
+    },
+    { wait: 500 }
+  )
+
+  function handleUsernameChange(value: string) {
+    setUsername(value)
+    resetUsername()
+
+    if (usernameConfig?.isUsernameAvailable) {
+      usernameDebouncer.maybeExecute(value)
+    }
+  }
 
   const { mutate: signUpEmail, isPending: signUpPending } = useSignUpEmail({
     onError: (error) => {
@@ -76,24 +111,11 @@ export function SignUp({
     }
   })
 
-  const [socialRedirecting, setSocialRedirecting] = useState(false)
-
-  const { mutate: signInSocial, isPending: socialPending } = useSignInSocial({
-    onError: (error) => toast.danger(error.error?.message || error.message),
-    onSuccess: () => {
-      setSocialRedirecting(true)
-
-      setTimeout(() => {
-        setSocialRedirecting(false)
-      }, 5000)
-    }
-  })
-
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
   const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] =
     useState(false)
 
-  const isPending = signUpPending || socialPending || socialRedirecting
+  const isPending = signUpPending
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -109,7 +131,19 @@ export function SignUp({
       return
     }
 
-    signUpEmail({ name, email, password })
+    signUpEmail({
+      name,
+      email,
+      password,
+      ...(usernameConfig?.enabled
+        ? {
+            username: username.trim(),
+            ...(usernameConfig.displayUsername
+              ? { displayUsername: username.trim() }
+              : {})
+          }
+        : {})
+    })
   }
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
@@ -133,7 +167,6 @@ export function SignUp({
               <ProviderButtons
                 isPending={isPending}
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
               />
             )}
 
@@ -162,6 +195,53 @@ export function SignUp({
               <FieldError />
             </TextField>
 
+            {usernameConfig?.enabled && (
+              <TextField
+                name="username"
+                type="text"
+                autoComplete="username"
+                minLength={usernameConfig.minUsernameLength}
+                maxLength={usernameConfig.maxUsernameLength}
+                isDisabled={isPending}
+                value={username}
+                onChange={handleUsernameChange}
+                isInvalid={
+                  !!usernameError || (usernameData && !usernameData.available)
+                }
+              >
+                <Label>{localization.auth.username}</Label>
+
+                <InputGroup
+                  variant={variant === "transparent" ? "primary" : "secondary"}
+                >
+                  <InputGroup.Input
+                    placeholder={localization.auth.usernamePlaceholder}
+                    required
+                  />
+
+                  {usernameConfig.isUsernameAvailable && username.trim() && (
+                    <InputGroup.Suffix className="px-2">
+                      {usernameData?.available ? (
+                        <Check className="text-success" />
+                      ) : usernameError || usernameData?.available === false ? (
+                        <Xmark className="text-danger" />
+                      ) : (
+                        <Spinner size="sm" color="current" />
+                      )}
+                    </InputGroup.Suffix>
+                  )}
+                </InputGroup>
+
+                <FieldError>
+                  {usernameError?.error?.message ||
+                    usernameError?.message ||
+                    (usernameData?.available === false
+                      ? localization.auth.usernameTaken
+                      : null)}
+                </FieldError>
+              </TextField>
+            )}
+
             <TextField
               name="email"
               type="email"
@@ -290,7 +370,6 @@ export function SignUp({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}

package/src/components/settings/account/appearance.tsx

@@ -34,7 +34,7 @@ export function Appearance({
   className,
   variant,
   ...props
-}: AppearanceProps & CardProps) {
+}: AppearanceProps & Omit<CardProps, "children">) {
   const {
     localization,
     appearance: { theme, setTheme, themes }

package/src/components/settings/account/change-avatar.tsx

@@ -14,9 +14,7 @@ export function ChangeAvatar({ className }: ChangeAvatarProps) {
   const { localization, avatar } = useAuth()
   const { data: session } = useSession()
 
-  const { mutate: updateUser, isPending: updatePending } = useUpdateUser({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
+  const { mutate: updateUser, isPending: updatePending } = useUpdateUser()
 
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isUploading, setIsUploading] = useState(false)

package/src/components/settings/account/change-email.tsx

@@ -34,13 +34,12 @@ export function ChangeEmail({
   className,
   variant,
   ...props
-}: ChangeEmailProps & CardProps) {
+}: ChangeEmailProps & Omit<CardProps, "children">) {
   const { localization, baseURL, viewPaths } = useAuth()
   const { data: session } = useSession()
 
   const { mutate: changeEmail, isPending } = useChangeEmail({
-    onSuccess: () => toast.success(localization.settings.changeEmailSuccess),
-    onError: (error) => toast.danger(error.error?.message || error.message)
+    onSuccess: () => toast.success(localization.settings.changeEmailSuccess)
   })
 
   function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {

package/src/components/settings/account/manage-account.tsx

@@ -41,13 +41,10 @@ export function ManageAccount({
   const { data: user } = useUser()
 
   const { mutate: setActiveSession, isPending: isSwitching } =
-    useSetActiveSession({
-      onError: (error) => toast.danger(error.error?.message || error.message)
-    })
+    useSetActiveSession()
 
   const { mutate: revokeSession, isPending: isRevoking } =
     useRevokeMultiSession({
-      onError: (error) => toast.danger(error.error?.message || error.message),
       onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
     })
 

package/src/components/settings/account/manage-accounts.tsx

@@ -3,7 +3,7 @@ import {
   useListDeviceSessions,
   useSession
 } from "@better-auth-ui/react"
-import { Card, type CardProps, cn, toast } from "@heroui/react"
+import { Card, type CardProps, cn } from "@heroui/react"
 import { ManageAccount } from "./manage-account"
 
 export type ManageAccountsProps = {
@@ -23,16 +23,11 @@ export function ManageAccounts({
   className,
   variant,
   ...props
-}: ManageAccountsProps & CardProps) {
+}: ManageAccountsProps & Omit<CardProps, "children">) {
   const { localization } = useAuth()
   const { data: session } = useSession()
 
-  const { data: deviceSessions, isPending } = useListDeviceSessions({
-    throwOnError: (error) => {
-      if (error.error) toast.danger(error.error.message)
-      return false
-    }
-  })
+  const { data: deviceSessions, isPending } = useListDeviceSessions()
 
   const otherSessions = deviceSessions?.filter(
     (deviceSession) => deviceSession.session.id !== session?.session.id