@better-auth-ui/react 1.6.0

package/src/hooks/auth/use-reset-password.ts

@@ -0,0 +1,23 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for the reset-password flow.
+ *
+ * The mutation resets the user's password using the provided token and new password.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useResetPassword(
+  options?: UseAuthMutationOptions<AuthClient["resetPassword"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.resetPassword, options })
+}

package/src/hooks/auth/use-send-verification-email.ts

@@ -0,0 +1,23 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation to send a verification email.
+ *
+ * The mutation sends a verification email to the specified email address.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSendVerificationEmail(
+  options?: UseAuthMutationOptions<AuthClient["sendVerificationEmail"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.sendVerificationEmail, options })
+}

package/src/hooks/auth/use-session.ts

@@ -0,0 +1,26 @@
+import { type AuthClient, useAuth } from "@better-auth-ui/react"
+import {
+  type UseAuthQueryOptions,
+  type UseAuthQueryResult,
+  useAuthQuery
+} from "./use-auth-query"
+
+/**
+ * Retrieve the current authentication session.
+ *
+ * @param options - Options to merge into the React Query configuration for the session query.
+ * @returns The React Query result for the session query: `data` contains session information, `isLoading`/`isFetching` indicate loading state, and `error` contains any fetch error.
+ */
+export function useSession(
+  options?: Partial<UseAuthQueryOptions<AuthClient["getSession"]>>
+): UseAuthQueryResult<AuthClient["getSession"]> {
+  const { authClient } = useAuth()
+
+  return useAuthQuery({
+    authFn: authClient.getSession,
+    options: {
+      queryKey: ["auth", "getSession"],
+      ...options
+    }
+  })
+}

package/src/hooks/auth/use-sign-in-email.ts

@@ -0,0 +1,35 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useSession
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for email/password sign-in.
+ *
+ * The mutation sends an email/password sign-in request and
+ * refetches the session on completion.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignInEmail(
+  options?: UseAuthMutationOptions<AuthClient["signIn"]["email"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useSession({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.signIn.email,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/auth/use-sign-in-magic-link.ts

@@ -0,0 +1,23 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for magic-link sign-in.
+ *
+ * The mutation sends a magic-link sign-in email to the specified address.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignInMagicLink(
+  options?: UseAuthMutationOptions<AuthClient["signIn"]["magicLink"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.signIn.magicLink, options })
+}

package/src/hooks/auth/use-sign-in-social.ts

@@ -0,0 +1,23 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for social sign-in.
+ *
+ * The mutation initiates a social sign-in flow with the specified provider.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignInSocial(
+  options?: UseAuthMutationOptions<AuthClient["signIn"]["social"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.signIn.social, options })
+}

package/src/hooks/auth/use-sign-out.ts

@@ -0,0 +1,34 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import { useQueryClient } from "@tanstack/react-query"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for signing out.
+ *
+ * The mutation signs out the current user and removes auth queries from cache.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignOut(
+  options?: UseAuthMutationOptions<AuthClient["signOut"]>
+) {
+  const { authClient } = useAuth()
+  const queryClient = useQueryClient()
+
+  return useAuthMutation({
+    authFn: authClient.signOut,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        queryClient.removeQueries({ queryKey: ["auth"] })
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/auth/use-sign-up-email.ts

@@ -0,0 +1,35 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useSession
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "./use-auth-mutation"
+
+export { useAuthMutation } from "./use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for email/password sign-up.
+ *
+ * The mutation sends an email/password sign-up request and
+ * refetches the session on success.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSignUpEmail(
+  options?: UseAuthMutationOptions<AuthClient["signUp"]["email"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useSession({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.signUp.email,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

package/src/hooks/auth/use-user.ts

@@ -0,0 +1,21 @@
+import type { AuthClient } from "@better-auth-ui/react"
+import type { UseAuthQueryOptions } from "./use-auth-query"
+
+import { useSession } from "./use-session"
+
+/**
+ * Retrieve the current authenticated user.
+ *
+ * @param options - Options to merge into the React Query configuration for the session query.
+ * @returns The React Query result with `data` containing the user object from the session.
+ */
+export function useUser(
+  options?: Partial<UseAuthQueryOptions<AuthClient["getSession"]>>
+) {
+  const { data, ...rest } = useSession(options)
+
+  return {
+    data: data?.user,
+    ...rest
+  }
+}

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

@@ -0,0 +1,30 @@
+import { type AuthClient, useAuth } from "@better-auth-ui/react"
+import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+
+/**
+ * Retrieve provider-specific account info for a given account ID.
+ *
+ * Uses the `accountInfo` API endpoint to fetch detailed information
+ * from the social provider. The provider is automatically detected
+ * from the account ID.
+ *
+ * @param accountId - The provider-given account ID to fetch info for
+ * @param options - Optional react-query options forwarded to `useQuery`
+ * @returns The react-query result containing account info data, loading state, and error state
+ */
+export function useAccountInfo(
+  accountId?: string,
+  options?: Partial<UseAuthQueryOptions<AuthClient["accountInfo"]>>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthQuery({
+    authFn: authClient.accountInfo,
+    params: { query: { accountId } },
+    options: {
+      queryKey: ["auth", "accountInfo", accountId],
+      enabled: !!accountId,
+      ...options
+    }
+  })
+}

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

@@ -0,0 +1,33 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useSession
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+/**
+ * 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.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useChangeEmail(
+  options?: UseAuthMutationOptions<AuthClient["changeEmail"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useSession({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.changeEmail,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

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

@@ -0,0 +1,21 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+export { useAuthMutation } from "../auth/use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for changing the authenticated user's password.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useChangePassword(
+  options?: UseAuthMutationOptions<AuthClient["changePassword"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.changePassword, options })
+}

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

@@ -0,0 +1,21 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+export { useAuthMutation } from "../auth/use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for deleting the authenticated user account.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useDeleteUser(
+  options?: UseAuthMutationOptions<AuthClient["deleteUser"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.deleteUser, options })
+}

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

@@ -0,0 +1,19 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for linking a social provider to the current user.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useLinkSocial(
+  options?: UseAuthMutationOptions<AuthClient["linkSocial"]>
+) {
+  const { authClient } = useAuth()
+
+  return useAuthMutation({ authFn: authClient.linkSocial, options })
+}

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

@@ -0,0 +1,27 @@
+import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
+import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+
+/**
+ * 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.
+ *
+ * @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
+ */
+export function useListAccounts(
+  options?: Partial<UseAuthQueryOptions<AuthClient["listAccounts"]>>
+) {
+  const { authClient } = useAuth()
+  const { data: session } = useSession({ refetchOnMount: false })
+
+  return useAuthQuery({
+    authFn: authClient.listAccounts,
+    options: {
+      queryKey: ["auth", "listAccounts", session?.user.id],
+      enabled: !!session,
+      ...options
+    }
+  })
+}

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

@@ -0,0 +1,32 @@
+import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
+import {
+  type UseAuthQueryOptions,
+  type UseAuthQueryResult,
+  useAuthQuery
+} from "../auth/use-auth-query"
+
+/**
+ * Retrieve device sessions for multi-session account switching.
+ *
+ * The query is enabled only when `multiSession` is true and session data is available.
+ *
+ * @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.
+ */
+export function useListDeviceSessions(
+  options?: Partial<
+    UseAuthQueryOptions<AuthClient["multiSession"]["listDeviceSessions"]>
+  >
+): UseAuthQueryResult<AuthClient["multiSession"]["listDeviceSessions"]> {
+  const { authClient } = useAuth()
+  const { data: session } = useSession({ refetchOnMount: false })
+
+  return useAuthQuery({
+    authFn: authClient.multiSession.listDeviceSessions,
+    options: {
+      queryKey: ["auth", "multiSession", "listDeviceSessions"],
+      enabled: !!session,
+      ...options
+    }
+  })
+}

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

@@ -0,0 +1,26 @@
+import { type AuthClient, useAuth, useSession } from "@better-auth-ui/react"
+import { type UseAuthQueryOptions, useAuthQuery } from "../auth/use-auth-query"
+
+/**
+ * Retrieve the active sessions (devices where the current user is signed in).
+ *
+ * The underlying query is enabled only when session data is available.
+ *
+ * @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.
+ */
+export function useListSessions(
+  options?: Partial<UseAuthQueryOptions<AuthClient["listSessions"]>>
+) {
+  const { authClient } = useAuth()
+  const { data: session } = useSession({ refetchOnMount: false })
+
+  return useAuthQuery({
+    authFn: authClient.listSessions,
+    options: {
+      queryKey: ["auth", "listSessions", session?.user.id],
+      enabled: !!session,
+      ...options
+    }
+  })
+}

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

@@ -0,0 +1,30 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useListDeviceSessions
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for revoking a device session in multi-session mode.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useRevokeMultiSession(
+  options?: UseAuthMutationOptions<AuthClient["multiSession"]["revoke"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useListDeviceSessions({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.multiSession.revoke,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

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

@@ -0,0 +1,31 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+import { useListSessions } from "./use-list-sessions"
+
+/**
+ * Hook that creates a mutation for revoking a user session.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useRevokeSession(
+  options?: UseAuthMutationOptions<AuthClient["revokeSession"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useListSessions({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.revokeSession,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

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

@@ -0,0 +1,46 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useListDeviceSessions,
+  useSession
+} from "@better-auth-ui/react"
+import { useQueryClient } from "@tanstack/react-query"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+/**
+ * Hook that sets an active device session in multi-session mode.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useSetActiveSession(
+  options?: UseAuthMutationOptions<AuthClient["multiSession"]["setActive"]>
+) {
+  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
+        )
+
+        if (deviceSession)
+          queryClient.setQueryData(["auth", "getSession"], deviceSession)
+
+        window.scrollTo({ top: 0 })
+
+        await refetchSession()
+        await refetchDeviceSessions()
+        await options?.onSuccess?.(data, { sessionToken }, ...args)
+      }
+    }
+  })
+}

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

@@ -0,0 +1,31 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation
+} from "@better-auth-ui/react"
+import type { UseAuthMutationOptions } from "../auth/use-auth-mutation"
+
+import { useListAccounts } from "./use-list-accounts"
+
+/**
+ * Hook that creates a mutation for unlinking a social provider from the current user.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useUnlinkAccount(
+  options?: UseAuthMutationOptions<AuthClient["unlinkAccount"]>
+) {
+  const { authClient } = useAuth()
+  const { refetch } = useListAccounts({ refetchOnMount: false })
+
+  return useAuthMutation({
+    authFn: authClient.unlinkAccount,
+    options: {
+      ...options,
+      onSuccess: async (...args) => {
+        await refetch()
+        await options?.onSuccess?.(...args)
+      }
+    }
+  })
+}

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

@@ -0,0 +1,44 @@
+import {
+  type AuthClient,
+  useAuth,
+  useAuthMutation,
+  useSession
+} from "@better-auth-ui/react"
+import { useQueryClient } from "@tanstack/react-query"
+import type {
+  UseAuthMutationOptions,
+  UseAuthMutationResult
+} from "../auth/use-auth-mutation"
+
+/**
+ * Hook that creates a mutation for updating the authenticated user's profile.
+ *
+ * The mutation submits the name update, refetches the session on success,
+ * and displays success or error toasts.
+ *
+ * @returns The `useMutation` result.
+ */
+export function useUpdateUser(
+  options?: UseAuthMutationOptions<AuthClient["updateUser"]>
+): UseAuthMutationResult<AuthClient["updateUser"]> {
+  const { authClient } = useAuth()
+  const { data: session, refetch } = useSession({ refetchOnMount: false })
+  const queryClient = useQueryClient()
+
+  return useAuthMutation({
+    authFn: authClient.updateUser,
+    options: {
+      ...options,
+      onSuccess: async (data, variables, ...rest) => {
+        queryClient.setQueryData(["auth", "getSession"], {
+          ...session,
+          user: { ...session?.user, ...variables }
+        })
+
+        refetch()
+
+        await options?.onSuccess?.(data, variables, ...rest)
+      }
+    }
+  })
+}