@better-auth-ui/heroui 1.6.1 → 1.6.3

package/src/components/settings/account/user-profile.tsx

@@ -1,4 +1,10 @@
-import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react"
+import {
+  useAuth,
+  useIsUsernameAvailable,
+  useSession,
+  useUpdateUser
+} from "@better-auth-ui/react"
+import { Check, Xmark } from "@gravity-ui/icons"
 import {
   Button,
   Card,
@@ -8,13 +14,16 @@ import {
   Fieldset,
   Form,
   Input,
+  InputGroup,
   Label,
   Skeleton,
   Spinner,
   TextField,
   toast
 } from "@heroui/react"
-import type { SyntheticEvent } from "react"
+import { useDebouncer } from "@tanstack/react-pacer"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
 import { ChangeAvatar } from "./change-avatar"
 
 export type UserProfileProps = {
@@ -23,27 +32,77 @@ export type UserProfileProps = {
 }
 
 /**
- * Render a profile card that lets the authenticated user view and update their display name and avatar.
+ * Render a profile card that lets the authenticated user view and update their display name, username, and avatar.
  *
- * @returns A JSX element containing the user profile card with avatar upload and an editable name form
+ * @returns A JSX element containing the user profile card with avatar upload and editable form fields
  */
 export function UserProfile({
   className,
   variant,
   ...props
-}: UserProfileProps & CardProps) {
-  const { localization } = useAuth()
+}: UserProfileProps & Omit<CardProps, "children">) {
+  const { localization, username: usernameConfig } = useAuth()
   const { data: session } = useSession()
 
+  const currentUsername =
+    (usernameConfig?.displayUsername
+      ? session?.user?.displayUsername
+      : session?.user?.username) || ""
+
+  const [username, setUsername] = useState(currentUsername)
+
+  useEffect(() => {
+    setUsername(currentUsername)
+  }, [currentUsername])
+
+  const {
+    mutate: isUsernameAvailable,
+    data: usernameData,
+    error: usernameError,
+    reset: resetUsername
+  } = useIsUsernameAvailable()
+
+  const usernameDebouncer = useDebouncer(
+    (value: string) => {
+      if (!value.trim() || value.trim() === currentUsername) {
+        resetUsername()
+        return
+      }
+
+      isUsernameAvailable({ username: value.trim() })
+    },
+    { wait: 500 }
+  )
+
+  function handleUsernameChange(value: string) {
+    setUsername(value)
+    resetUsername()
+
+    if (usernameConfig?.isUsernameAvailable) {
+      usernameDebouncer.maybeExecute(value)
+    }
+  }
+
   const { mutate: updateUser, isPending } = useUpdateUser({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
   })
 
   function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)
-    updateUser({ name: formData.get("name") as string })
+    const name = formData.get("name") as string
+
+    updateUser({
+      name,
+      ...(usernameConfig?.enabled
+        ? {
+            username: username.trim(),
+            ...(usernameConfig.displayUsername
+              ? { displayUsername: username.trim() }
+              : {})
+          }
+        : {})
+    })
   }
 
   return (
@@ -59,6 +118,61 @@ export function UserProfile({
               <ChangeAvatar />
 
               <Fieldset.Group>
+                {usernameConfig?.enabled && (
+                  <TextField
+                    type="text"
+                    autoComplete="username"
+                    minLength={usernameConfig.minUsernameLength}
+                    maxLength={usernameConfig.maxUsernameLength}
+                    isDisabled={isPending || !session}
+                    value={username}
+                    onChange={handleUsernameChange}
+                    isInvalid={
+                      !!usernameError ||
+                      (usernameData && !usernameData.available)
+                    }
+                  >
+                    <Label>{localization.auth.username}</Label>
+
+                    {session ? (
+                      <InputGroup
+                        variant={
+                          variant === "transparent" ? "primary" : "secondary"
+                        }
+                      >
+                        <InputGroup.Input
+                          placeholder={localization.auth.usernamePlaceholder}
+                          name="username"
+                        />
+
+                        {usernameConfig.isUsernameAvailable &&
+                          username.trim() &&
+                          username.trim() !== currentUsername && (
+                            <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>
+                    ) : (
+                      <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                    )}
+
+                    <FieldError>
+                      {usernameError?.error?.message ||
+                        usernameError?.message ||
+                        (usernameData?.available === false &&
+                          localization.auth.usernameTaken)}
+                    </FieldError>
+                  </TextField>
+                )}
+
                 <TextField
                   key={session?.user?.name}
                   name="name"

package/src/components/settings/security/active-session.tsx

@@ -50,7 +50,6 @@ export function ActiveSession({ activeSession }: ActiveSessionProps) {
   const { data: session } = useSession({ refetchOnMount: false })
 
   const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
   })
 

package/src/components/settings/security/active-sessions.tsx

@@ -1,5 +1,5 @@
 import { useAuth, useListSessions, useSession } from "@better-auth-ui/react"
-import { Card, type CardProps, cn, Skeleton, toast } from "@heroui/react"
+import { Card, type CardProps, cn, Skeleton } from "@heroui/react"
 import { ActiveSession } from "./active-session"
 
 export type ActiveSessionsProps = {
@@ -19,16 +19,11 @@ export function ActiveSessions({
   className,
   variant,
   ...props
-}: ActiveSessionsProps & CardProps) {
+}: ActiveSessionsProps & Omit<CardProps, "children">) {
   const { localization } = useAuth()
   const { data: session } = useSession()
 
-  const { data: sessions, isPending } = useListSessions({
-    throwOnError: (error) => {
-      if (error.error) toast.danger(error.error.message)
-      return false
-    }
-  })
+  const { data: sessions, isPending } = useListSessions()
 
   const activeSessions = sessions?.toSorted((activeSession) =>
     activeSession.id === session?.session.id ? -1 : 1

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

@@ -42,7 +42,7 @@ export function ChangePassword({
   className,
   variant,
   ...props
-}: ChangePasswordProps & CardProps) {
+}: ChangePasswordProps & Omit<CardProps, "children">) {
   const { emailAndPassword, localization } = useAuth()
   const { data: session } = useSession()
   const { data: accounts, isPending: isAccountsPending } = useListAccounts()
@@ -67,12 +67,15 @@ export function ChangePassword({
   )
 }
 
-function SetPassword({ className, variant, ...props }: CardProps) {
+function SetPassword({
+  className,
+  variant,
+  ...props
+}: Omit<CardProps, "children">) {
   const { localization } = useAuth()
   const { data: session } = useSession()
 
   const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
   })
 
@@ -125,7 +128,7 @@ function ChangePasswordForm({
   emailAndPassword: ReturnType<typeof useAuth>["emailAndPassword"]
   localization: ReturnType<typeof useAuth>["localization"]
   session: ReturnType<typeof useSession>["data"]
-} & CardProps) {
+} & Omit<CardProps, "children">) {
   const [currentPassword, setCurrentPassword] = useState("")
   const [newPassword, setNewPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")

package/src/components/settings/security/delete-user.tsx

@@ -28,7 +28,7 @@ export function DeleteUser({
   className,
   variant,
   ...props
-}: DeleteUserProps & CardProps) {
+}: DeleteUserProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     deleteUser: deleteUserConfig,
@@ -76,9 +76,6 @@ export function DeleteUser({
             replace: true
           })
         }
-      },
-      onError: (error) => {
-        toast.danger(error.error?.message || error.message)
       }
     })
   }

package/src/components/settings/security/linked-account.tsx

@@ -28,23 +28,13 @@ export type LinkedAccountProps = {
 export function LinkedAccount({ account, provider }: LinkedAccountProps) {
   const { baseURL, localization } = useAuth()
 
-  const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(
-    account?.accountId,
-    {
-      enabled: !!account,
-      throwOnError: (error) => {
-        if (error.error) toast.danger(error.error.message)
-        return false
-      }
-    }
-  )
-
-  const { mutate: linkSocial, isPending: isLinking } = useLinkSocial({
-    onError: (error) => toast.danger(error.error?.message || error.message)
+  const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo({
+    query: { accountId: account?.accountId }
   })
 
+  const { mutate: linkSocial, isPending: isLinking } = useLinkSocial()
+
   const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => toast.success(localization.settings.accountUnlinked)
   })
 

package/src/components/settings/security/linked-accounts.tsx

@@ -1,5 +1,5 @@
 import { useAuth, useListAccounts } from "@better-auth-ui/react"
-import { Card, type CardProps, cn, Skeleton, toast } from "@heroui/react"
+import { Card, type CardProps, cn, Skeleton } from "@heroui/react"
 import { LinkedAccount } from "./linked-account"
 
 export type LinkedAccountsProps = {
@@ -20,15 +20,10 @@ export function LinkedAccounts({
   className,
   variant,
   ...props
-}: LinkedAccountsProps & CardProps) {
+}: LinkedAccountsProps & Omit<CardProps, "children">) {
   const { localization, socialProviders } = useAuth()
 
-  const { data: accounts, isPending } = useListAccounts({
-    throwOnError: (error) => {
-      if (error.error) toast.danger(error.error.message)
-      return false
-    }
-  })
+  const { data: accounts, isPending } = useListAccounts()
 
   const linkedAccounts = accounts?.filter(
     (account) => account.providerId !== "credential"

package/src/components/settings/security/passkey.tsx

@@ -1,6 +1,6 @@
 import { useAuth, useDeletePasskey } from "@better-auth-ui/react"
 import { Fingerprint, Xmark } from "@gravity-ui/icons"
-import { Button, Spinner, toast } from "@heroui/react"
+import { Button, Spinner } from "@heroui/react"
 
 export type PasskeyProps = {
   passkey: {
@@ -13,9 +13,7 @@ export type PasskeyProps = {
 export function Passkey({ passkey }: PasskeyProps) {
   const { localization } = useAuth()
 
-  const { mutate: deletePasskey, isPending } = useDeletePasskey({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
+  const { mutate: deletePasskey, isPending } = useDeletePasskey()
 
   return (
     <div className="flex items-center gap-3">

package/src/components/settings/security/passkeys.tsx

@@ -9,8 +9,7 @@ import {
   type CardProps,
   cn,
   Skeleton,
-  Spinner,
-  toast
+  Spinner
 } from "@heroui/react"
 
 import { Passkey } from "./passkey"
@@ -24,19 +23,12 @@ export function Passkeys({
   className,
   variant,
   ...props
-}: PasskeysProps & CardProps) {
+}: PasskeysProps & Omit<CardProps, "children">) {
   const { localization } = useAuth()
 
-  const { data: passkeys, isPending } = useListUserPasskeys({
-    throwOnError: (error) => {
-      if (error.error) toast.danger(error.error.message)
-      return false
-    }
-  })
+  const { data: passkeys, isPending } = useListUserPasskeys()
 
-  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
+  const { mutate: addPasskey, isPending: isAdding } = useAddPasskey()
 
   return (
     <div>

package/src/components/settings/settings.tsx

@@ -1,5 +1,5 @@
+import type { SettingsView } from "@better-auth-ui/core"
 import { useAuth, useAuthenticate } from "@better-auth-ui/react"
-import type { SettingsView } from "@better-auth-ui/react/core"
 import { type CardProps, cn, Tabs } from "@heroui/react"
 import { type ComponentProps, useMemo } from "react"
 

package/src/components/user/switch-account-item.tsx

@@ -1,5 +1,5 @@
 import { useSetActiveSession } from "@better-auth-ui/react"
-import { Dropdown, Spinner, toast } from "@heroui/react"
+import { Dropdown, Spinner } from "@heroui/react"
 import type { Session, User } from "better-auth"
 import { UserView } from "./user-view"
 
@@ -19,9 +19,7 @@ export type SwitchAccountItemProps = {
  * @returns The switch account dropdown item as a JSX element
  */
 export function SwitchAccountItem({ deviceSession }: SwitchAccountItemProps) {
-  const { mutate: setActiveSession, isPending } = useSetActiveSession({
-    onError: (error) => toast.danger(error.error?.message || error.message)
-  })
+  const { mutate: setActiveSession, isPending } = useSetActiveSession()
 
   return (
     <Dropdown.Item

package/src/components/user/switch-account-menu.tsx

@@ -4,7 +4,7 @@ import {
   useSession
 } from "@better-auth-ui/react"
 import { Check, CirclePlus } from "@gravity-ui/icons"
-import { Dropdown, Label, Separator, toast } from "@heroui/react"
+import { Dropdown, Label, Separator } from "@heroui/react"
 
 import { SwitchAccountItem } from "./switch-account-item"
 import { UserView } from "./user-view"
@@ -21,12 +21,7 @@ import { UserView } from "./user-view"
 export function SwitchAccountMenu() {
   const { basePaths, viewPaths, 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()
 
   return (
     <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">

package/src/index.tsx

@@ -6,6 +6,7 @@ export * from "./components/auth/forgot-password"
 export * from "./components/auth/magic-link"
 export * from "./components/auth/magic-link-button"
 export * from "./components/auth/passkey-button"
+export * from "./components/auth/provider-button"
 export * from "./components/auth/provider-buttons"
 export * from "./components/auth/reset-password"
 export * from "./components/auth/sign-in"