@better-auth-ui/react 1.6.1 → 1.6.3

package/src/hooks/settings/use-add-passkey.ts

@@ -1,32 +1,37 @@
+import { useMutation } from "@tanstack/react-query"
+
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import {
-  type UseAuthMutationOptions,
-  useAuthMutation
-} from "../auth/use-auth-mutation"
+import { addPasskeyOptions } from "../../mutations/settings/add-passkey-options"
 import { useListUserPasskeys } from "./use-list-user-passkeys"
 
+export type UseAddPasskeyParams = NonNullable<
+  Parameters<AuthClient["passkey"]["addPasskey"]>[0]
+>
+
+export type UseAddPasskeyOptions = Omit<
+  ReturnType<typeof addPasskeyOptions>,
+  "mutationKey" | "mutationFn"
+>
+
 /**
- * Hook that creates a mutation for adding a new passkey.
+ * Hook that creates a mutation for registering a new passkey.
  *
- * Refetches the passkeys list on success.
+ * Refetches the user's passkey list on success.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useAddPasskey(
-  options?: UseAuthMutationOptions<AuthClient["passkey"]["addPasskey"]>
-) {
+export function useAddPasskey(options?: UseAddPasskeyOptions) {
   const { authClient } = useAuth()
   const { refetch } = useListUserPasskeys()
 
-  return useAuthMutation({
-    authFn: authClient.passkey.addPasskey,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        await refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...addPasskeyOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetch()
+      await options?.onSuccess?.(...args)
     }
   })
 }

package/src/hooks/settings/use-change-email.ts

@@ -1,33 +1,37 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation,
-  useSession
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { changeEmailOptions } from "../../mutations/settings/change-email-options"
+import { useSession } from "../auth/use-session"
+
+export type UseChangeEmailParams = NonNullable<
+  Parameters<AuthClient["changeEmail"]>[0]
+>
+
+export type UseChangeEmailOptions = Omit<
+  ReturnType<typeof changeEmailOptions>,
+  "mutationKey" | "mutationFn"
+>
 
 /**
  * Hook that creates a mutation for changing the current user's email address.
  *
- * The mutation sends an email-change request and shows success or error toasts.
- * On success the callback URL is set to the account settings view.
+ * Refetches the session on success to surface the new email.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useChangeEmail(
-  options?: UseAuthMutationOptions<AuthClient["changeEmail"]>
-) {
+export function useChangeEmail(options?: UseChangeEmailOptions) {
   const { authClient } = useAuth()
   const { refetch } = useSession({ refetchOnMount: false })
 
-  return useAuthMutation({
-    authFn: authClient.changeEmail,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...changeEmailOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetch()
+      await options?.onSuccess?.(...args)
     }
   })
 }

package/src/hooks/settings/use-change-password.ts

@@ -1,21 +1,29 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
 
-export { useAuthMutation } from "../auth/use-auth-mutation"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { changePasswordOptions } from "../../mutations/settings/change-password-options"
+
+export type UseChangePasswordParams = NonNullable<
+  Parameters<AuthClient["changePassword"]>[0]
+>
+
+export type UseChangePasswordOptions = Omit<
+  ReturnType<typeof changePasswordOptions>,
+  "mutationKey" | "mutationFn"
+>
 
 /**
  * Hook that creates a mutation for changing the authenticated user's password.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useChangePassword(
-  options?: UseAuthMutationOptions<AuthClient["changePassword"]>
-) {
+export function useChangePassword(options?: UseChangePasswordOptions) {
   const { authClient } = useAuth()
 
-  return useAuthMutation({ authFn: authClient.changePassword, options })
+  return useMutation({
+    ...changePasswordOptions(authClient),
+    ...options
+  })
 }

package/src/hooks/settings/use-delete-passkey.ts

@@ -1,32 +1,37 @@
+import { useMutation } from "@tanstack/react-query"
+
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import {
-  type UseAuthMutationOptions,
-  useAuthMutation
-} from "../auth/use-auth-mutation"
+import { deletePasskeyOptions } from "../../mutations/settings/delete-passkey-options"
 import { useListUserPasskeys } from "./use-list-user-passkeys"
 
+export type UseDeletePasskeyParams = NonNullable<
+  Parameters<AuthClient["passkey"]["deletePasskey"]>[0]
+>
+
+export type UseDeletePasskeyOptions = Omit<
+  ReturnType<typeof deletePasskeyOptions>,
+  "mutationKey" | "mutationFn"
+>
+
 /**
  * Hook that creates a mutation for deleting a passkey.
  *
- * Refetches the passkeys list on success.
+ * Refetches the user's passkey list on success.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useDeletePasskey(
-  options?: UseAuthMutationOptions<AuthClient["passkey"]["deletePasskey"]>
-) {
+export function useDeletePasskey(options?: UseDeletePasskeyOptions) {
   const { authClient } = useAuth()
   const { refetch } = useListUserPasskeys()
 
-  return useAuthMutation({
-    authFn: authClient.passkey.deletePasskey,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        await refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...deletePasskeyOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetch()
+      await options?.onSuccess?.(...args)
     }
   })
 }

package/src/hooks/settings/use-delete-user.ts

@@ -1,21 +1,29 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
 
-export { useAuthMutation } from "../auth/use-auth-mutation"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { deleteUserOptions } from "../../mutations/settings/delete-user-options"
+
+export type UseDeleteUserParams = NonNullable<
+  Parameters<AuthClient["deleteUser"]>[0]
+>
+
+export type UseDeleteUserOptions = Omit<
+  ReturnType<typeof deleteUserOptions>,
+  "mutationKey" | "mutationFn"
+>
 
 /**
  * Hook that creates a mutation for deleting the authenticated user account.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useDeleteUser(
-  options?: UseAuthMutationOptions<AuthClient["deleteUser"]>
-) {
+export function useDeleteUser(options?: UseDeleteUserOptions) {
   const { authClient } = useAuth()
 
-  return useAuthMutation({ authFn: authClient.deleteUser, options })
+  return useMutation({
+    ...deleteUserOptions(authClient),
+    ...options
+  })
 }

package/src/hooks/settings/use-link-social.ts

@@ -1,19 +1,29 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { linkSocialOptions } from "../../mutations/settings/link-social-options"
+
+export type UseLinkSocialParams = NonNullable<
+  Parameters<AuthClient["linkSocial"]>[0]
+>
+
+export type UseLinkSocialOptions = Omit<
+  ReturnType<typeof linkSocialOptions>,
+  "mutationKey" | "mutationFn"
+>
 
 /**
  * Hook that creates a mutation for linking a social provider to the current user.
  *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useLinkSocial(
-  options?: UseAuthMutationOptions<AuthClient["linkSocial"]>
-) {
+export function useLinkSocial(options?: UseLinkSocialOptions) {
   const { authClient } = useAuth()
 
-  return useAuthMutation({ authFn: authClient.linkSocial, options })
+  return useMutation({
+    ...linkSocialOptions(authClient),
+    ...options
+  })
 }

package/src/hooks/settings/use-list-accounts.ts

@@ -1,27 +1,39 @@
-import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+import { skipToken, useQuery } from "@tanstack/react-query"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { listAccountsOptions } from "../../queries/settings/list-accounts-options"
+import { useSession } from "../auth/use-session"
+
+export type UseListAccountsParams = NonNullable<
+  Parameters<AuthClient["listAccounts"]>[0]
+>
+
+export type UseListAccountsOptions = Omit<
+  ReturnType<typeof listAccountsOptions>,
+  "queryKey" | "queryFn"
+> &
+  UseListAccountsParams
 
 /**
  * Retrieve the current user's linked social accounts.
  *
- * The query runs only when at least one social provider is configured and a session exists.
- * The provided `options` are forwarded to both `useSession` and `useQuery`, allowing customization of initial data and query behavior.
+ * Keyed per-user; waits for the active session before firing.
  *
- * @param options - Optional react-query / initial-data options forwarded to `useSession` and `useQuery`
- * @returns The react-query result containing linked accounts data, loading state, and error state
+ * @param options - Better Auth params (`fetchOptions`) and React Query
+ *   options forwarded to `useQuery`.
+ * @returns React Query result for the user's linked accounts.
  */
-export function useListAccounts(
-  options?: Partial<UseAuthQueryOptions<AuthClient["listAccounts"]>>
-) {
+export function useListAccounts(options?: UseListAccountsOptions) {
   const { authClient } = useAuth()
   const { data: session } = useSession({ refetchOnMount: false })
+  const userId = session?.user.id
+  const disabled = !userId
+
+  const { fetchOptions, ...queryOptions } = options ?? {}
 
-  return useAuthQuery({
-    authFn: authClient.listAccounts,
-    options: {
-      queryKey: ["auth", "listAccounts", session?.user.id],
-      enabled: !!session,
-      ...options
-    }
+  return useQuery({
+    ...listAccountsOptions(authClient, userId, { fetchOptions }),
+    ...(disabled && { queryFn: skipToken }),
+    ...queryOptions
   })
 }

package/src/hooks/settings/use-list-device-sessions.ts

@@ -1,32 +1,39 @@
-import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
-import {
-  type UseAuthQueryOptions,
-  type UseAuthQueryResult,
-  useAuthQuery
-} from "../auth/use-auth-query"
+import { skipToken, useQuery } from "@tanstack/react-query"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { listDeviceSessionsOptions } from "../../queries/settings/list-device-sessions-options"
+import { useSession } from "../auth/use-session"
+
+export type UseListDeviceSessionsParams = NonNullable<
+  Parameters<AuthClient["multiSession"]["listDeviceSessions"]>[0]
+>
+
+export type UseListDeviceSessionsOptions = Omit<
+  ReturnType<typeof listDeviceSessionsOptions>,
+  "queryKey" | "queryFn"
+> &
+  UseListDeviceSessionsParams
 
 /**
- * Retrieve device sessions for multi-session account switching.
+ * Retrieve the device sessions (multi-session account switcher).
  *
- * The query is enabled only when `multiSession` is true and session data is available.
+ * Keyed per-user; waits for the active session before firing.
  *
- * @param options - Optional React Query options to customize the query behavior.
- * @returns The React Query result for the device sessions list; `data` is the array of device session objects and includes loading and error states.
+ * @param options - Better Auth params (`fetchOptions`) and React Query
+ *   options forwarded to `useQuery`.
+ * @returns React Query result for the device sessions list.
  */
-export function useListDeviceSessions(
-  options?: Partial<
-    UseAuthQueryOptions<AuthClient["multiSession"]["listDeviceSessions"]>
-  >
-): UseAuthQueryResult<AuthClient["multiSession"]["listDeviceSessions"]> {
+export function useListDeviceSessions(options?: UseListDeviceSessionsOptions) {
   const { authClient } = useAuth()
   const { data: session } = useSession({ refetchOnMount: false })
+  const userId = session?.user.id
+  const disabled = !userId
+
+  const { fetchOptions, ...queryOptions } = options ?? {}
 
-  return useAuthQuery({
-    authFn: authClient.multiSession.listDeviceSessions,
-    options: {
-      queryKey: ["auth", "multiSession", "listDeviceSessions"],
-      enabled: !!session,
-      ...options
-    }
+  return useQuery({
+    ...listDeviceSessionsOptions(authClient, userId, { fetchOptions }),
+    ...(disabled && { queryFn: skipToken }),
+    ...queryOptions
   })
 }

package/src/hooks/settings/use-list-sessions.ts

@@ -1,26 +1,39 @@
-import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+import { skipToken, useQuery } from "@tanstack/react-query"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { listSessionsOptions } from "../../queries/settings/list-sessions-options"
+import { useSession } from "../auth/use-session"
+
+export type UseListSessionsParams = NonNullable<
+  Parameters<AuthClient["listSessions"]>[0]
+>
+
+export type UseListSessionsOptions = Omit<
+  ReturnType<typeof listSessionsOptions>,
+  "queryKey" | "queryFn"
+> &
+  UseListSessionsParams
 
 /**
  * Retrieve the active sessions (devices where the current user is signed in).
  *
- * The underlying query is enabled only when session data is available.
+ * Keyed per-user; waits for the active session before firing.
  *
- * @param options - Optional React Query options to customize the query behavior.
- * @returns The React Query result for the sessions list; `data` is the array of session objects, and the result includes loading and error states.
+ * @param options - Better Auth params (`fetchOptions`) and React Query
+ *   options forwarded to `useQuery`.
+ * @returns React Query result for the sessions list.
  */
-export function useListSessions(
-  options?: Partial<UseAuthQueryOptions<AuthClient["listSessions"]>>
-) {
+export function useListSessions(options?: UseListSessionsOptions) {
   const { authClient } = useAuth()
   const { data: session } = useSession({ refetchOnMount: false })
+  const userId = session?.user.id
+  const disabled = !userId
+
+  const { fetchOptions, ...queryOptions } = options ?? {}
 
-  return useAuthQuery({
-    authFn: authClient.listSessions,
-    options: {
-      queryKey: ["auth", "listSessions", session?.user.id],
-      enabled: !!session,
-      ...options
-    }
+  return useQuery({
+    ...listSessionsOptions(authClient, userId, { fetchOptions }),
+    ...(disabled && { queryFn: skipToken }),
+    ...queryOptions
   })
 }

package/src/hooks/settings/use-list-user-passkeys.ts

@@ -1,28 +1,39 @@
-import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+import { skipToken, useQuery } from "@tanstack/react-query"
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { listUserPasskeysOptions } from "../../queries/settings/list-user-passkeys-options"
+import { useSession } from "../auth/use-session"
+
+export type UseListUserPasskeysParams = NonNullable<
+  Parameters<AuthClient["passkey"]["listUserPasskeys"]>[0]
+>
+
+export type UseListUserPasskeysOptions = Omit<
+  ReturnType<typeof listUserPasskeysOptions>,
+  "queryKey" | "queryFn"
+> &
+  UseListUserPasskeysParams
 
 /**
  * Retrieve the passkeys registered for the current user.
  *
- * The underlying query is enabled only when session data is available.
+ * Keyed per-user; waits for the active session before firing.
  *
- * @param options - Optional React Query options to customize the query behavior.
- * @returns The React Query result for the passkeys list.
+ * @param options - Better Auth params (`fetchOptions`) and React Query
+ *   options forwarded to `useQuery`.
+ * @returns React Query result for the passkeys list.
  */
-export function useListUserPasskeys(
-  options?: Partial<
-    UseAuthQueryOptions<AuthClient["passkey"]["listUserPasskeys"]>
-  >
-) {
+export function useListUserPasskeys(options?: UseListUserPasskeysOptions) {
   const { authClient } = useAuth()
   const { data: session } = useSession({ refetchOnMount: false })
+  const userId = session?.user.id
+  const disabled = !userId
+
+  const { fetchOptions, ...queryOptions } = options ?? {}
 
-  return useAuthQuery({
-    authFn: authClient.passkey.listUserPasskeys,
-    options: {
-      queryKey: ["auth", "listUserPasskeys", session?.user.id],
-      enabled: !!session,
-      ...options
-    }
+  return useQuery({
+    ...listUserPasskeysOptions(authClient, userId, { fetchOptions }),
+    ...(disabled && { queryFn: skipToken }),
+    ...queryOptions
   })
 }

package/src/hooks/settings/use-revoke-multi-session.ts

@@ -1,30 +1,39 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation,
-  useListDeviceSessions
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
+
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { revokeMultiSessionOptions } from "../../mutations/settings/revoke-multi-session-options"
+import { useListDeviceSessions } from "./use-list-device-sessions"
+
+export type UseRevokeMultiSessionParams = NonNullable<
+  Parameters<AuthClient["multiSession"]["revoke"]>[0]
+>
+
+export type UseRevokeMultiSessionOptions = Omit<
+  ReturnType<typeof revokeMultiSessionOptions>,
+  "mutationKey" | "mutationFn"
+>
 
 /**
  * Hook that creates a mutation for revoking a device session in multi-session mode.
  *
+ * Refetches the device sessions list on success.
+ *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useRevokeMultiSession(
-  options?: UseAuthMutationOptions<AuthClient["multiSession"]["revoke"]>
-) {
+export function useRevokeMultiSession(options?: UseRevokeMultiSessionOptions) {
   const { authClient } = useAuth()
-  const { refetch } = useListDeviceSessions({ refetchOnMount: false })
+  const { refetch } = useListDeviceSessions({
+    refetchOnMount: false
+  })
 
-  return useAuthMutation({
-    authFn: authClient.multiSession.revoke,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        await refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...revokeMultiSessionOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetch()
+      await options?.onSuccess?.(...args)
     }
   })
 }

package/src/hooks/settings/use-revoke-session.ts

@@ -1,31 +1,39 @@
-import {
-  type AuthClient,
-  useAuth,
-  useAuthMutation
-} from "@better-auth-ui/react"
-import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+import { useMutation } from "@tanstack/react-query"
 
+import { useAuth } from "../../components/auth/auth-provider"
+import type { AuthClient } from "../../lib/auth-client"
+import { revokeSessionOptions } from "../../mutations/settings/revoke-session-options"
 import { useListSessions } from "./use-list-sessions"
 
+export type UseRevokeSessionParams = NonNullable<
+  Parameters<AuthClient["revokeSession"]>[0]
+>
+
+export type UseRevokeSessionOptions = Omit<
+  ReturnType<typeof revokeSessionOptions>,
+  "mutationKey" | "mutationFn"
+>
+
 /**
  * Hook that creates a mutation for revoking a user session.
  *
+ * Refetches the sessions list on success.
+ *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useRevokeSession(
-  options?: UseAuthMutationOptions<AuthClient["revokeSession"]>
-) {
+export function useRevokeSession(options?: UseRevokeSessionOptions) {
   const { authClient } = useAuth()
-  const { refetch } = useListSessions({ refetchOnMount: false })
+  const { refetch: refetchSessions } = useListSessions({
+    refetchOnMount: false
+  })
 
-  return useAuthMutation({
-    authFn: authClient.revokeSession,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        await refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...revokeSessionOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetchSessions()
+      await options?.onSuccess?.(...args)
     }
   })
 }