@better-auth-ui/heroui 1.6.2 → 1.6.3

package/dist/index.js

@@ -2,36 +2,37 @@
 import { ForgotPassword as e } from "./components/auth/forgot-password.js";
 import { MagicLinkButton as t } from "./components/auth/magic-link-button.js";
 import { PasskeyButton as n } from "./components/auth/passkey-button.js";
-import { ProviderButtons as r } from "./components/auth/provider-buttons.js";
-import { MagicLink as i } from "./components/auth/magic-link.js";
-import { ResetPassword as a } from "./components/auth/reset-password.js";
-import { SignIn as o } from "./components/auth/sign-in.js";
-import { SignOut as s } from "./components/auth/sign-out.js";
-import { SignUp as c } from "./components/auth/sign-up.js";
-import { Auth as l } from "./components/auth/auth.js";
-import { AuthProvider as u } from "./components/auth/auth-provider.js";
-import { EmailChangedEmail as d } from "./components/email/email-changed-email.js";
-import { EmailVerificationEmail as f } from "./components/email/email-verification-email.js";
-import { MagicLinkEmail as p } from "./components/email/magic-link-email.js";
-import { NewDeviceEmail as m } from "./components/email/new-device-email.js";
-import { OtpEmail as h } from "./components/email/otp-email.js";
-import { PasswordChangedEmail as g } from "./components/email/password-changed-email.js";
-import { ResetPasswordEmail as _ } from "./components/email/reset-password-email.js";
-import { Appearance as v } from "./components/settings/account/appearance.js";
-import { ChangeEmail as y } from "./components/settings/account/change-email.js";
-import { UserAvatar as b } from "./components/user/user-avatar.js";
-import { UserView as x } from "./components/user/user-view.js";
-import { ManageAccount as S } from "./components/settings/account/manage-account.js";
-import { ManageAccounts as C } from "./components/settings/account/manage-accounts.js";
-import { UserProfile as w } from "./components/settings/account/user-profile.js";
-import { AccountSettings as T } from "./components/settings/account/account-settings.js";
-import { ActiveSessions as E } from "./components/settings/security/active-sessions.js";
-import { ChangePassword as D } from "./components/settings/security/change-password.js";
-import { DeleteUser as O } from "./components/settings/security/delete-user.js";
-import { DangerZone as k } from "./components/settings/security/danger-zone.js";
-import { LinkedAccounts as A } from "./components/settings/security/linked-accounts.js";
-import { Passkeys as j } from "./components/settings/security/passkeys.js";
-import { SecuritySettings as M } from "./components/settings/security/security-settings.js";
-import { Settings as N } from "./components/settings/settings.js";
-import { UserButton as P } from "./components/user/user-button.js";
-export { T as AccountSettings, E as ActiveSessions, v as Appearance, l as Auth, u as AuthProvider, y as ChangeEmail, D as ChangePassword, k as DangerZone, O as DeleteUser, d as EmailChangedEmail, f as EmailVerificationEmail, e as ForgotPassword, A as LinkedAccounts, i as MagicLink, t as MagicLinkButton, p as MagicLinkEmail, S as ManageAccount, C as ManageAccounts, m as NewDeviceEmail, h as OtpEmail, n as PasskeyButton, j as Passkeys, g as PasswordChangedEmail, r as ProviderButtons, a as ResetPassword, _ as ResetPasswordEmail, M as SecuritySettings, N as Settings, o as SignIn, s as SignOut, c as SignUp, b as UserAvatar, P as UserButton, w as UserProfile, x as UserView };
+import { ProviderButton as r } from "./components/auth/provider-button.js";
+import { ProviderButtons as i } from "./components/auth/provider-buttons.js";
+import { MagicLink as a } from "./components/auth/magic-link.js";
+import { ResetPassword as o } from "./components/auth/reset-password.js";
+import { SignIn as s } from "./components/auth/sign-in.js";
+import { SignOut as c } from "./components/auth/sign-out.js";
+import { SignUp as l } from "./components/auth/sign-up.js";
+import { Auth as u } from "./components/auth/auth.js";
+import { AuthProvider as d } from "./components/auth/auth-provider.js";
+import { EmailChangedEmail as f } from "./components/email/email-changed-email.js";
+import { EmailVerificationEmail as p } from "./components/email/email-verification-email.js";
+import { MagicLinkEmail as m } from "./components/email/magic-link-email.js";
+import { NewDeviceEmail as h } from "./components/email/new-device-email.js";
+import { OtpEmail as g } from "./components/email/otp-email.js";
+import { PasswordChangedEmail as _ } from "./components/email/password-changed-email.js";
+import { ResetPasswordEmail as v } from "./components/email/reset-password-email.js";
+import { Appearance as y } from "./components/settings/account/appearance.js";
+import { ChangeEmail as b } from "./components/settings/account/change-email.js";
+import { UserAvatar as x } from "./components/user/user-avatar.js";
+import { UserView as S } from "./components/user/user-view.js";
+import { ManageAccount as C } from "./components/settings/account/manage-account.js";
+import { ManageAccounts as w } from "./components/settings/account/manage-accounts.js";
+import { UserProfile as T } from "./components/settings/account/user-profile.js";
+import { AccountSettings as E } from "./components/settings/account/account-settings.js";
+import { ActiveSessions as D } from "./components/settings/security/active-sessions.js";
+import { ChangePassword as O } from "./components/settings/security/change-password.js";
+import { DeleteUser as k } from "./components/settings/security/delete-user.js";
+import { DangerZone as A } from "./components/settings/security/danger-zone.js";
+import { LinkedAccounts as j } from "./components/settings/security/linked-accounts.js";
+import { Passkeys as M } from "./components/settings/security/passkeys.js";
+import { SecuritySettings as N } from "./components/settings/security/security-settings.js";
+import { Settings as P } from "./components/settings/settings.js";
+import { UserButton as F } from "./components/user/user-button.js";
+export { E as AccountSettings, D as ActiveSessions, y as Appearance, u as Auth, d as AuthProvider, b as ChangeEmail, O as ChangePassword, A as DangerZone, k as DeleteUser, f as EmailChangedEmail, p as EmailVerificationEmail, e as ForgotPassword, j as LinkedAccounts, a as MagicLink, t as MagicLinkButton, m as MagicLinkEmail, C as ManageAccount, w as ManageAccounts, h as NewDeviceEmail, g as OtpEmail, n as PasskeyButton, M as Passkeys, _ as PasswordChangedEmail, r as ProviderButton, i as ProviderButtons, o as ResetPassword, v as ResetPasswordEmail, N as SecuritySettings, P as Settings, s as SignIn, c as SignOut, l as SignUp, x as UserAvatar, F as UserButton, T as UserProfile, S as UserView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "type": "module",
   "scripts": {
     "build": "vite build && bun styles",
@@ -31,18 +31,19 @@
     "@gravity-ui/icons": "^2.18.0",
     "@heroui/react": "^3.0.2",
     "@heroui/styles": "^3.0.2",
-    "@tanstack/react-pacer": "^0.21.1",
+    "@tanstack/react-pacer": "^0.22.0",
+    "@tanstack/react-query": "^5.99.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.4",
     "better-auth": "^1.6.5",
+    "bowser": "^2.11.0",
     "cpy-cli": "^7.0.0",
     "playwright": "^1.59.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "bowser": "^2.11.0",
     "vitest": "^4.1.4"
   },
   "dependencies": {
@@ -53,7 +54,8 @@
     "@gravity-ui/icons": ">=2.18.0",
     "@heroui/react": ">=3.0.2",
     "@heroui/styles": ">=3.0.2",
-    "@tanstack/react-pacer": ">=0.21.0",
+    "@tanstack/react-pacer": ">=0.22.0",
+    "@tanstack/react-query": ">=5.99.0",
     "better-auth": ">=1.6.5",
     "react": ">=19.2.5",
     "react-dom": ">=19.2.5",

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

@@ -4,6 +4,8 @@ import {
 } from "@better-auth-ui/react"
 import { RouterProvider } from "@heroui/react"
 
+import { ErrorToaster } from "./error-toaster"
+
 export type AuthProviderProps = Omit<AuthProviderPropsPrimitive, "Link">
 
 /**
@@ -21,6 +23,8 @@ export function AuthProvider({
     <AuthProviderPrimitive navigate={navigate} {...config}>
       <RouterProvider navigate={(path) => navigate({ to: path })}>
         {children}
+
+        <ErrorToaster />
       </RouterProvider>
     </AuthProviderPrimitive>
   )

package/src/components/auth/auth.tsx

@@ -35,7 +35,7 @@ export function Auth({
   socialPosition,
   view,
   ...props
-}: AuthProps & CardProps) {
+}: AuthProps & Omit<CardProps, "children">) {
   const { viewPaths } = useAuth()
 
   if (!view && !path) {

package/src/components/auth/error-toaster.tsx

@@ -0,0 +1,25 @@
+import { toast } from "@heroui/react"
+import { useQueryClient } from "@tanstack/react-query"
+import type { BetterFetchError } from "better-auth/react"
+import { useEffect } from "react"
+
+export function ErrorToaster() {
+  const queryClient = useQueryClient()
+
+  useEffect(() => {
+    queryClient.getQueryCache().config.onError = (error) => {
+      const err = error as BetterFetchError
+      if (err?.error) toast.danger(err.error.message)
+    }
+
+    queryClient.setMutationDefaults([], {
+      onError: (error) => {
+        toast.danger(
+          (error as BetterFetchError)?.error?.message || error.message
+        )
+      }
+    })
+  }, [queryClient])
+
+  return null
+}

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

@@ -34,11 +34,10 @@ export function ForgotPassword({
   className,
   variant,
   ...props
-}: ForgotPasswordProps & CardProps) {
+}: ForgotPasswordProps & Omit<CardProps, "children">) {
   const { basePaths, localization, viewPaths, navigate } = useAuth()
 
   const { mutate: requestPasswordReset, isPending } = useRequestPasswordReset({
-    onError: (error) => toast.danger(error.error?.message || error.message),
     onSuccess: () => {
       toast.success(localization.auth.passwordResetEmailSent)
       navigate({ to: `${basePaths.auth}/${viewPaths.auth.signIn}` })

package/src/components/auth/magic-link.tsx

@@ -1,8 +1,4 @@
-import {
-  useAuth,
-  useSignInMagicLink,
-  useSignInSocial
-} from "@better-auth-ui/react"
+import { useAuth, useSignInMagicLink } from "@better-auth-ui/react"
 import {
   Button,
   Card,
@@ -46,7 +42,7 @@ export function MagicLink({
   socialPosition = "bottom",
   variant,
   ...props
-}: MagicLinkProps & CardProps) {
+}: MagicLinkProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     baseURL,
@@ -61,27 +57,13 @@ export function MagicLink({
 
   const { mutate: signInMagicLink, isPending: magicLinkPending } =
     useSignInMagicLink({
-      onError: (error) => toast.danger(error.error?.message || error.message),
       onSuccess: () => {
         setEmail("")
         toast.success(localization.auth.magicLinkSent)
       }
     })
 
-  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 isPending = magicLinkPending || socialPending || socialRedirecting
+  const isPending = magicLinkPending
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
@@ -108,7 +90,6 @@ export function MagicLink({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}
@@ -161,7 +142,6 @@ export function MagicLink({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}

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

@@ -1,6 +1,6 @@
 import { useAuth, useSignInPasskey } from "@better-auth-ui/react"
 import { Fingerprint } from "@gravity-ui/icons"
-import { Button, Spinner, toast } from "@heroui/react"
+import { Button, Spinner } from "@heroui/react"
 
 export type PasskeyButtonProps = {
   isPending: boolean
@@ -11,7 +11,6 @@ export function PasskeyButton({ isPending }: PasskeyButtonProps) {
 
   const { mutate: signInPasskey, isPending: passkeyPending } = useSignInPasskey(
     {
-      onError: (error) => toast.danger(error.error?.message || error.message),
       onSuccess: () => navigate({ to: redirectTo })
     }
   )

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,6 @@ import {
   useAuth,
   useSendVerificationEmail,
   useSignInEmail,
-  useSignInSocial,
   useSignInUsername
 } from "@better-auth-ui/react"
 import {
@@ -50,7 +49,7 @@ export function SignIn({
   socialPosition = "bottom",
   variant,
   ...props
-}: SignInProps & CardProps) {
+}: SignInProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     baseURL,
@@ -68,7 +67,6 @@ 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)
   })
 
@@ -105,19 +103,6 @@ export function SignIn({
       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 handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
@@ -139,8 +124,7 @@ export function SignIn({
     }
   }
 
-  const signInPending = signInEmailPending || signInUsernamePending
-  const isPending = signInPending || socialPending || socialRedirecting
+  const isPending = signInEmailPending || signInUsernamePending
 
   const showSeparator = emailAndPassword?.enabled && !!socialProviders?.length
 
@@ -162,7 +146,6 @@ export function SignIn({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}
@@ -262,7 +245,6 @@ export function SignIn({
             {!!socialProviders?.length && (
               <ProviderButtons
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
                 isPending={isPending}
               />
             )}

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

@@ -1,7 +1,6 @@
 import {
   useAuth,
   useIsUsernameAvailable,
-  useSignInSocial,
   useSignUpEmail
 } from "@better-auth-ui/react"
 import { Check, Eye, EyeSlash, Xmark } from "@gravity-ui/icons"
@@ -51,7 +50,7 @@ export function SignUp({
   socialPosition = "bottom",
   variant,
   ...props
-}: SignUpProps & CardProps) {
+}: SignUpProps & Omit<CardProps, "children">) {
   const {
     basePaths,
     emailAndPassword,
@@ -112,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()
@@ -181,7 +167,6 @@ export function SignUp({
               <ProviderButtons
                 isPending={isPending}
                 socialLayout={socialLayout}
-                signInSocial={signInSocial}
               />
             )}
 
@@ -250,8 +235,9 @@ export function SignUp({
                 <FieldError>
                   {usernameError?.error?.message ||
                     usernameError?.message ||
-                    (usernameData?.available === false &&
-                      localization.auth.usernameTaken)}
+                    (usernameData?.available === false
+                      ? localization.auth.usernameTaken
+                      : null)}
                 </FieldError>
               </TextField>
             )}
@@ -384,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)
     })