@better-auth-ui/heroui 1.6.3 → 1.6.5

package/src/components/{settings → auth/settings}/security/change-password.tsx

@@ -43,9 +43,10 @@ export function ChangePassword({
   variant,
   ...props
 }: ChangePasswordProps & Omit<CardProps, "children">) {
-  const { emailAndPassword, localization } = useAuth()
-  const { data: session } = useSession()
-  const { data: accounts, isPending: isAccountsPending } = useListAccounts()
+  const { authClient, emailAndPassword, localization } = useAuth()
+  const { data: session } = useSession(authClient)
+  const { data: accounts, isPending: isAccountsPending } =
+    useListAccounts(authClient)
 
   const hasCredentialAccount = accounts?.some(
     (account) => account.providerId === "credential"
@@ -72,12 +73,15 @@ function SetPassword({
   variant,
   ...props
 }: Omit<CardProps, "children">) {
-  const { localization } = useAuth()
-  const { data: session } = useSession()
+  const { authClient, localization } = useAuth()
+  const { data: session } = useSession(authClient)
 
-  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-    onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
-  })
+  const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset(
+    authClient,
+    {
+      onSuccess: () => toast.success(localization.auth.passwordResetEmailSent)
+    }
+  )
 
   const handleSetPassword = () => {
     if (!session?.user.email) return
@@ -129,11 +133,12 @@ function ChangePasswordForm({
   localization: ReturnType<typeof useAuth>["localization"]
   session: ReturnType<typeof useSession>["data"]
 } & Omit<CardProps, "children">) {
+  const { authClient } = useAuth()
   const [currentPassword, setCurrentPassword] = useState("")
   const [newPassword, setNewPassword] = useState("")
   const [confirmPassword, setConfirmPassword] = useState("")
 
-  const { mutate: changePassword, isPending } = useChangePassword({
+  const { mutate: changePassword, isPending } = useChangePassword(authClient, {
     onError: (error) => {
       setCurrentPassword("")
       setNewPassword("")

package/src/components/{settings → auth/settings}/security/linked-account.tsx

@@ -26,17 +26,21 @@ export type LinkedAccountProps = {
  * @returns A JSX element containing the linked account row
  */
 export function LinkedAccount({ account, provider }: LinkedAccountProps) {
-  const { baseURL, localization } = useAuth()
+  const { authClient, baseURL, localization } = useAuth()
 
-  const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo({
-    query: { accountId: account?.accountId }
-  })
+  const { data: accountInfo, isPending: isLoadingInfo } = useAccountInfo(
+    authClient,
+    { query: { accountId: account?.accountId } }
+  )
 
-  const { mutate: linkSocial, isPending: isLinking } = useLinkSocial()
+  const { mutate: linkSocial, isPending: isLinking } = useLinkSocial(authClient)
 
-  const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount({
-    onSuccess: () => toast.success(localization.settings.accountUnlinked)
-  })
+  const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount(
+    authClient,
+    {
+      onSuccess: () => toast.success(localization.settings.accountUnlinked)
+    }
+  )
 
   const ProviderIcon = providerIcons[provider]
   const providerName = getProviderName(provider)

package/src/components/{settings → auth/settings}/security/linked-accounts.tsx

@@ -21,9 +21,9 @@ export function LinkedAccounts({
   variant,
   ...props
 }: LinkedAccountsProps & Omit<CardProps, "children">) {
-  const { localization, socialProviders } = useAuth()
+  const { authClient, localization, socialProviders } = useAuth()
 
-  const { data: accounts, isPending } = useListAccounts()
+  const { data: accounts, isPending } = useListAccounts(authClient)
 
   const linkedAccounts = accounts?.filter(
     (account) => account.providerId !== "credential"

package/src/components/{settings → auth/settings}/security/security-settings.tsx

@@ -4,9 +4,7 @@ import type { ComponentProps } from "react"
 
 import { ActiveSessions } from "./active-sessions"
 import { ChangePassword } from "./change-password"
-import { DangerZone } from "./danger-zone"
 import { LinkedAccounts } from "./linked-accounts"
-import { Passkeys } from "./passkeys"
 
 export type SecuritySettingsProps = {
   className?: string
@@ -17,7 +15,7 @@ export type SecuritySettingsProps = {
  * Renders the security settings layout including password management, linked accounts, and active sessions.
  *
  * ChangePassword is rendered when password authentication is enabled; LinkedAccounts is rendered when social providers are present.
- * DangerZone is rendered when `deleteUser.enabled` is true in auth config.
+ * Each registered auth plugin may contribute `securityCards` (for example delete-user, passkeys).
  *
  * @param className - Optional additional CSS class names for the outer container.
  * @param variant - Card variant forwarded to each security settings card.
@@ -28,7 +26,7 @@ export function SecuritySettings({
   variant,
   ...props
 }: SecuritySettingsProps & ComponentProps<"div">) {
-  const { deleteUser, emailAndPassword, passkey, socialProviders } = useAuth()
+  const { emailAndPassword, plugins, socialProviders } = useAuth()
 
   return (
     <div
@@ -37,9 +35,12 @@ export function SecuritySettings({
     >
       {emailAndPassword?.enabled && <ChangePassword variant={variant} />}
       {!!socialProviders?.length && <LinkedAccounts variant={variant} />}
-      {passkey && <Passkeys variant={variant} />}
       <ActiveSessions variant={variant} />
-      {deleteUser?.enabled && <DangerZone variant={variant} />}
+      {plugins.flatMap((plugin) =>
+        plugin.securityCards?.map((Card, index) => (
+          <Card key={`${plugin.id}-${index.toString()}`} variant={variant} />
+        ))
+      )}
     </div>
   )
 }

package/src/components/{settings → auth/settings}/settings.tsx

@@ -35,8 +35,8 @@ export function Settings({
   view,
   ...props
 }: SettingsProps & ComponentProps<"div">) {
-  const { basePaths, localization, viewPaths } = useAuth()
-  useAuthenticate()
+  const { authClient, basePaths, localization, viewPaths } = useAuth()
+  useAuthenticate(authClient)
 
   if (!view && !path) {
     throw new Error("[Better Auth UI] Either `view` or `path` must be provided")

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

@@ -1,8 +1,9 @@
+import { authMutationKeys } from "@better-auth-ui/core"
 import {
   useAuth,
+  useFetchOptions,
   useSendVerificationEmail,
-  useSignInEmail,
-  useSignInUsername
+  useSignInEmail
 } from "@better-auth-ui/react"
 import {
   Button,
@@ -20,11 +21,10 @@ import {
   TextField,
   toast
 } from "@heroui/react"
+import { useIsMutating } from "@tanstack/react-query"
 import { type SyntheticEvent, useState } from "react"
 
 import { FieldSeparator } from "./field-separator"
-import { MagicLinkButton } from "./magic-link-button"
-import { PasskeyButton } from "./passkey-button"
 import { ProviderButtons, type SocialLayout } from "./provider-buttons"
 
 export interface SignInProps {
@@ -34,10 +34,6 @@ 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.
  *
@@ -51,26 +47,31 @@ export function SignIn({
   ...props
 }: SignInProps & Omit<CardProps, "children">) {
   const {
+    authClient,
     basePaths,
     baseURL,
     emailAndPassword,
     localization,
-    magicLink,
-    passkey,
+    plugins,
     redirectTo,
     socialProviders,
-    username: usernameConfig,
     viewPaths,
     navigate
   } = useAuth()
 
+  const { fetchOptions, resetFetchOptions } = useFetchOptions()
+
   const [password, setPassword] = useState("")
 
-  const { mutate: sendVerificationEmail } = useSendVerificationEmail({
-    onSuccess: () => toast.success(localization.auth.verificationEmailSent)
-  })
+  const { mutate: sendVerificationEmail } = useSendVerificationEmail(
+    authClient,
+    {
+      onSuccess: () => toast.success(localization.auth.verificationEmailSent)
+    }
+  )
 
   const { mutate: signInEmail, isPending: signInEmailPending } = useSignInEmail(
+    authClient,
     {
       onError: (error, { email }) => {
         setPassword("")
@@ -89,20 +90,13 @@ export function SignIn({
         } else {
           toast.danger(error.error?.message || error.message)
         }
+
+        resetFetchOptions()
       },
       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()
 
@@ -110,21 +104,25 @@ export function SignIn({
     const email = formData.get("email") as string
     const rememberMe = formData.get("rememberMe") === "on"
 
-    if (usernameConfig?.enabled && !isEmail(email)) {
-      signInUsername({
-        username: email,
-        password
-      })
-    } else {
-      signInEmail({
-        email,
-        password,
-        ...(emailAndPassword?.rememberMe ? { rememberMe } : {})
-      })
-    }
+    signInEmail({
+      email,
+      password,
+      ...(emailAndPassword?.rememberMe ? { rememberMe } : {}),
+      fetchOptions
+    })
   }
 
-  const isPending = signInEmailPending || signInUsernamePending
+  const signInMutating = useIsMutating({
+    mutationKey: authMutationKeys.signIn.all
+  })
+  const signUpMutating = useIsMutating({
+    mutationKey: authMutationKeys.signUp.all
+  })
+  const isPending = signInMutating + signUpMutating > 0
+
+  const Captcha = plugins.find(
+    (plugin) => plugin.captchaComponent
+  )?.captchaComponent
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
 
@@ -144,10 +142,7 @@ export function SignIn({
         {socialPosition === "top" && (
           <>
             {!!socialProviders?.length && (
-              <ProviderButtons
-                socialLayout={socialLayout}
-                isPending={isPending}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
 
             {showSeparator && (
@@ -160,22 +155,14 @@ export function SignIn({
           <Form onSubmit={handleSubmit} className="flex flex-col gap-4">
             <TextField
               name="email"
-              type={usernameConfig?.enabled ? "text" : "email"}
-              autoComplete={usernameConfig?.enabled ? "username" : "email"}
+              type="email"
+              autoComplete="email"
               isDisabled={isPending}
             >
-              <Label>
-                {usernameConfig?.enabled
-                  ? localization.auth.username
-                  : localization.auth.email}
-              </Label>
+              <Label>{localization.auth.email}</Label>
 
               <Input
-                placeholder={
-                  usernameConfig?.enabled
-                    ? localization.auth.usernameOrEmailPlaceholder
-                    : localization.auth.emailPlaceholder
-                }
+                placeholder={localization.auth.emailPlaceholder}
                 variant={variant === "transparent" ? "primary" : "secondary"}
                 required
               />
@@ -220,18 +207,23 @@ export function SignIn({
               </Checkbox>
             )}
 
+            {Captcha && <div className="flex justify-center">{Captcha}</div>}
+
             <div className="flex flex-col gap-3">
               <Button type="submit" className="w-full" isPending={isPending}>
-                {isPending && <Spinner color="current" size="sm" />}
+                {signInEmailPending && <Spinner color="current" size="sm" />}
 
                 {localization.auth.signIn}
               </Button>
 
-              {magicLink && (
-                <MagicLinkButton view="signIn" isPending={isPending} />
+              {plugins.flatMap((plugin) =>
+                plugin.authButtons?.map((AuthButton, index) => (
+                  <AuthButton
+                    key={`${plugin.id}-${index.toString()}`}
+                    view="signIn"
+                  />
+                ))
               )}
-
-              {passkey && <PasskeyButton isPending={isPending} />}
             </div>
           </Form>
         )}
@@ -243,10 +235,7 @@ export function SignIn({
             )}
 
             {!!socialProviders?.length && (
-              <ProviderButtons
-                socialLayout={socialLayout}
-                isPending={isPending}
-              />
+              <ProviderButtons socialLayout={socialLayout} />
             )}
           </>
         )}

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

@@ -12,9 +12,9 @@ export type SignOutProps = {
  * @returns A Card containing a centered Spinner shown during the sign-out process
  */
 export function SignOut({ className }: SignOutProps) {
-  const { basePaths, navigate, viewPaths } = useAuth()
+  const { authClient, basePaths, navigate, viewPaths } = useAuth()
 
-  const { mutate: signOut } = useSignOut({
+  const { mutate: signOut } = useSignOut(authClient, {
     onError: (error) => {
       toast.danger(error.error?.message || error.message)
       navigate({