@better-auth-ui/react 1.6.2 → 1.6.3

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

@@ -1,19 +1,29 @@
+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 { 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,19 +1,29 @@
+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 { 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 { 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 { 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,29 +1,39 @@
+import { skipToken, useQuery } from "@tanstack/react-query"
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+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,34 +1,39 @@
+import { skipToken, useQuery } from "@tanstack/react-query"
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import {
-  type UseAuthQueryOptions,
-  type UseAuthQueryResult,
-  useAuthQuery
-} from "../auth/use-auth-query"
+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,28 +1,39 @@
+import { skipToken, useQuery } from "@tanstack/react-query"
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+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,30 +1,39 @@
+import { skipToken, useQuery } from "@tanstack/react-query"
 import { useAuth } from "../../components/auth/auth-provider"
 import type { AuthClient } from "../../lib/auth-client"
-import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+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 { 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 { 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,30 +1,39 @@
+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 { 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)
     }
   })
 }

package/src/hooks/settings/use-set-active-session.ts

@@ -1,47 +1,58 @@
-import { useQueryClient } from "@tanstack/react-query"
+import { useMutation, useQueryClient } 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 { setActiveSessionOptions } from "../../mutations/settings/set-active-session-options"
+import { sessionOptions } from "../../queries/auth/session-options"
 import { useSession } from "../auth/use-session"
 import { useListDeviceSessions } from "./use-list-device-sessions"
 
+export type UseSetActiveSessionParams = NonNullable<
+  Parameters<AuthClient["multiSession"]["setActive"]>[0]
+>
+
+export type UseSetActiveSessionOptions = Omit<
+  ReturnType<typeof setActiveSessionOptions>,
+  "mutationKey" | "mutationFn"
+>
+
 /**
  * Hook that sets an active device session in multi-session mode.
  *
+ * Optimistically switches the cached session to the matching device session,
+ * scrolls to top, and refetches both the session and device-session queries.
+ *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useSetActiveSession(
-  options?: UseAuthMutationOptions<AuthClient["multiSession"]["setActive"]>
-) {
+export function useSetActiveSession(options?: UseSetActiveSessionOptions) {
   const queryClient = useQueryClient()
   const { authClient } = useAuth()
-
   const { refetch: refetchSession } = useSession({ refetchOnMount: false })
   const { data: deviceSessions, refetch: refetchDeviceSessions } =
     useListDeviceSessions({ refetchOnMount: false })
 
-  return useAuthMutation({
-    authFn: authClient.multiSession.setActive,
-    options: {
-      ...options,
-      onSuccess: async (data, { sessionToken }, ...args) => {
-        const deviceSession = deviceSessions?.find(
-          (session) => session.session.token === sessionToken
-        )
+  return useMutation({
+    ...setActiveSessionOptions(authClient),
+    ...options,
+    onSuccess: async (data, variables, ...rest) => {
+      const sessionToken = variables?.sessionToken
+      const deviceSession = deviceSessions?.find(
+        (session) => session.session.token === sessionToken
+      )
 
-        if (deviceSession)
-          queryClient.setQueryData(["auth", "getSession"], deviceSession)
+      if (deviceSession) {
+        queryClient.setQueryData(
+          sessionOptions(authClient).queryKey,
+          deviceSession
+        )
+      }
 
-        window.scrollTo({ top: 0 })
+      window.scrollTo({ top: 0 })
 
-        await refetchSession()
-        await refetchDeviceSessions()
-        await options?.onSuccess?.(data, { sessionToken }, ...args)
-      }
+      await refetchSession()
+      await refetchDeviceSessions()
+      await options?.onSuccess?.(data, variables, ...rest)
     }
   })
 }

package/src/hooks/settings/use-unlink-account.ts

@@ -1,30 +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 { unlinkAccountOptions } from "../../mutations/settings/unlink-account-options"
 import { useListAccounts } from "./use-list-accounts"
 
+export type UseUnlinkAccountParams = NonNullable<
+  Parameters<AuthClient["unlinkAccount"]>[0]
+>
+
+export type UseUnlinkAccountOptions = Omit<
+  ReturnType<typeof unlinkAccountOptions>,
+  "mutationKey" | "mutationFn"
+>
+
 /**
  * Hook that creates a mutation for unlinking a social provider from the current user.
  *
+ * Refetches the linked accounts list on success.
+ *
+ * @param options - React Query options forwarded to `useMutation`.
  * @returns The `useMutation` result.
  */
-export function useUnlinkAccount(
-  options?: UseAuthMutationOptions<AuthClient["unlinkAccount"]>
-) {
+export function useUnlinkAccount(options?: UseUnlinkAccountOptions) {
   const { authClient } = useAuth()
   const { refetch } = useListAccounts({ refetchOnMount: false })
 
-  return useAuthMutation({
-    authFn: authClient.unlinkAccount,
-    options: {
-      ...options,
-      onSuccess: async (...args) => {
-        await refetch()
-        await options?.onSuccess?.(...args)
-      }
+  return useMutation({
+    ...unlinkAccountOptions(authClient),
+    ...options,
+    onSuccess: async (...args) => {
+      await refetch()
+      await options?.onSuccess?.(...args)
     }
   })
 }