@better-auth-ui/heroui 1.6.8 → 1.6.10

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

@@ -1,5 +1,10 @@
+import { authMutationKeys, authQueryKeys } from "@better-auth-ui/core"
 import { toast } from "@heroui/react"
-import { useQueryClient } from "@tanstack/react-query"
+import {
+  matchMutation,
+  matchQuery,
+  useQueryClient
+} from "@tanstack/react-query"
 import type { BetterFetchError } from "better-auth/react"
 import { useEffect } from "react"
 
@@ -7,18 +12,31 @@ export function ErrorToaster() {
   const queryClient = useQueryClient()
 
   useEffect(() => {
-    queryClient.getQueryCache().config.onError = (error) => {
-      const err = error as BetterFetchError
+    const unsubscribeQuery = queryClient.getQueryCache().subscribe((event) => {
+      if (event.type !== "updated" || event.action.type !== "error") return
+      if (!matchQuery({ queryKey: authQueryKeys.all }, event.query)) return
+
+      const err = event.action.error as BetterFetchError
       if (err?.error) toast.danger(err.error.message)
-    }
+    })
 
-    queryClient.setMutationDefaults([], {
-      onError: (error) => {
-        toast.danger(
-          (error as BetterFetchError)?.error?.message || error.message
+    const unsubscribeMutation = queryClient
+      .getMutationCache()
+      .subscribe((event) => {
+        if (event.type !== "updated" || event.action.type !== "error") return
+        if (
+          !matchMutation({ mutationKey: authMutationKeys.all }, event.mutation)
         )
-      }
-    })
+          return
+
+        const err = event.action.error as BetterFetchError
+        toast.danger(err.error?.message || err.message)
+      })
+
+    return () => {
+      unsubscribeQuery()
+      unsubscribeMutation()
+    }
   }, [queryClient])
 
   return null

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

@@ -39,8 +39,15 @@ export function ForgotPassword({
   variant,
   ...props
 }: ForgotPasswordProps & Omit<CardProps, "children">) {
-  const { authClient, basePaths, localization, viewPaths, navigate, plugins } =
-    useAuth()
+  const {
+    authClient,
+    baseURL,
+    basePaths,
+    localization,
+    viewPaths,
+    navigate,
+    plugins
+  } = useAuth()
 
   const { fetchOptions, resetFetchOptions } = useFetchOptions()
 
@@ -64,6 +71,7 @@ export function ForgotPassword({
     const formData = new FormData(e.currentTarget)
     requestPasswordReset({
       email: formData.get("email") as string,
+      redirectTo: `${baseURL}${basePaths.auth}/${viewPaths.auth.resetPassword}`,
       fetchOptions
     })
   }

package/src/components/auth/multi-session/manage-accounts.tsx

@@ -66,7 +66,7 @@ export function ManageAccounts({
           {allRows.map((row, index) => (
             <div key={row.key}>
               {index > 0 && (
-                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                <div className="border-b border-dashed -mx-4 my-4" />
               )}
 
               <ManageAccount

package/src/components/auth/multi-session/switch-account-submenu-content.tsx

@@ -21,7 +21,11 @@ import { SwitchAccountSubmenuItem } from "./switch-account-submenu-item"
  *
  * @returns The switch account submenu content as a JSX element
  */
-export function SwitchAccountSubmenuContent() {
+export function SwitchAccountSubmenuContent({
+  hideSubtitle
+}: {
+  hideSubtitle?: boolean
+}) {
   const { authClient, basePaths, viewPaths } = useAuth()
   const { localization: multiSessionLocalization } =
     useAuthPlugin(multiSessionPlugin)
@@ -34,7 +38,7 @@ export function SwitchAccountSubmenuContent() {
     <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">
       <Dropdown.Menu>
         <Dropdown.Item className="px-2">
-          <UserView isPending={isPending} />
+          <UserView isPending={isPending} hideSubtitle={hideSubtitle} />
 
           {!isPending && <Check className="ml-auto" />}
         </Dropdown.Item>
@@ -47,6 +51,7 @@ export function SwitchAccountSubmenuContent() {
             <SwitchAccountSubmenuItem
               key={deviceSession.session.id}
               deviceSession={deviceSession}
+              hideSubtitle={hideSubtitle}
             />
           ))}
 

package/src/components/auth/multi-session/switch-account-submenu-item.tsx

@@ -14,6 +14,7 @@ type DeviceSession = {
 
 export type SwitchAccountSubmenuItemProps = {
   deviceSession: DeviceSession
+  hideSubtitle?: boolean
 }
 
 /**
@@ -23,7 +24,8 @@ export type SwitchAccountSubmenuItemProps = {
  * @returns The switch account dropdown item as a JSX element
  */
 export function SwitchAccountSubmenuItem({
-  deviceSession
+  deviceSession,
+  hideSubtitle
 }: SwitchAccountSubmenuItemProps) {
   const { authClient } = useAuth()
   const { mutate: setActiveSession, isPending } = useSetActiveSession(
@@ -41,7 +43,7 @@ export function SwitchAccountSubmenuItem({
         setActiveSession({ sessionToken: deviceSession.session.token })
       }
     >
-      <UserView user={deviceSession.user} />
+      <UserView user={deviceSession.user} hideSubtitle={hideSubtitle} />
 
       {isPending && <Spinner color="current" size="sm" className="ml-auto" />}
     </Dropdown.Item>

package/src/components/auth/multi-session/switch-account-submenu.tsx

@@ -1,5 +1,5 @@
 import { useAuth, useAuthPlugin, useSession } from "@better-auth-ui/react"
-import { Persons } from "@gravity-ui/icons"
+import { ArrowRightArrowLeft } from "@gravity-ui/icons"
 import { Dropdown, Label } from "@heroui/react"
 
 import { multiSessionPlugin } from "../../../lib/auth/multi-session-plugin"
@@ -8,6 +8,7 @@ import { SwitchAccountSubmenuContent } from "./switch-account-submenu-content"
 
 export type SwitchAccountSubmenuProps = {
   className?: string
+  hideSubtitle?: boolean
 }
 
 /**
@@ -19,7 +20,10 @@ export type SwitchAccountSubmenuProps = {
  * @param className - Optional additional CSS class names
  * @returns The switch account submenu as a JSX element
  */
-export function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps) {
+export function SwitchAccountSubmenu({
+  className,
+  hideSubtitle
+}: SwitchAccountSubmenuProps) {
   const { authClient } = useAuth()
   const { data: session } = useSession(authClient)
   const { localization: multiSessionLocalization } =
@@ -35,7 +39,7 @@ export function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps) {
         className={className}
         textValue={multiSessionLocalization.switchAccount}
       >
-        <Persons className="text-muted" />
+        <ArrowRightArrowLeft className="text-muted" />
 
         <Label>{multiSessionLocalization.switchAccount}</Label>
 
@@ -43,7 +47,7 @@ export function SwitchAccountSubmenu({ className }: SwitchAccountSubmenuProps) {
       </Dropdown.Item>
 
       <Dropdown.Popover className="min-w-40 md:min-w-56 max-w-[48svw]">
-        <SwitchAccountSubmenuContent />
+        <SwitchAccountSubmenuContent hideSubtitle={hideSubtitle} />
       </Dropdown.Popover>
     </Dropdown.SubmenuTrigger>
   )

package/src/components/auth/organization/change-organization-logo.tsx

@@ -0,0 +1,171 @@
+import { fileToBase64 } from "@better-auth-ui/core"
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useUpdateOrganization
+} from "@better-auth-ui/react"
+import { CloudArrowUpIn, TrashBin } from "@gravity-ui/icons"
+import { Button, cn, Dropdown, Label, Spinner, toast } from "@heroui/react"
+import { type ChangeEvent, useRef, useState } from "react"
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationLogo } from "./organization-logo"
+
+export type ChangeOrganizationLogoProps = {
+  className?: string
+}
+
+export function ChangeOrganizationLogo({
+  className
+}: ChangeOrganizationLogoProps) {
+  const { authClient } = useAuth()
+  const { logo, localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient)
+
+  const { mutate: updateOrganization, isPending: updatePending } =
+    useUpdateOrganization(authClient as OrganizationAuthClient)
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isUploading, setIsUploading] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const isPending = updatePending || isUploading || isDeleting
+
+  async function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file || !activeOrganization) return
+
+    e.target.value = ""
+
+    setIsUploading(true)
+
+    try {
+      const resized =
+        (await logo.resize?.(file, logo.size, logo.extension)) || file
+
+      const image =
+        (await logo.upload?.(resized)) || (await fileToBase64(resized))
+
+      updateOrganization(
+        { data: { logo: image } },
+        {
+          onSuccess: () =>
+            toast.success(organizationLocalization.logoChangedSuccess),
+          onSettled: () => setIsUploading(false)
+        }
+      )
+    } catch (error) {
+      setIsUploading(false)
+      if (error instanceof Error) {
+        toast.danger(error.message)
+      }
+    }
+  }
+
+  async function handleDelete() {
+    const currentLogo = activeOrganization?.logo
+
+    updateOrganization(
+      {
+        data: { logo: "" }
+      },
+      {
+        onSuccess: async () => {
+          if (!currentLogo) {
+            toast.success(organizationLocalization.logoDeletedSuccess)
+            return
+          }
+
+          setIsDeleting(true)
+          try {
+            await logo.delete?.(currentLogo)
+            toast.success(organizationLocalization.logoDeletedSuccess)
+          } catch (error) {
+            if (error instanceof Error) {
+              toast.danger(error.message)
+            }
+          } finally {
+            setIsDeleting(false)
+          }
+        }
+      }
+    )
+  }
+
+  if (!logo.enabled) {
+    return null
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <Label isDisabled={!activeOrganization}>
+        {organizationLocalization.logo}
+      </Label>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      <div className="flex items-center gap-4">
+        <Button
+          type="button"
+          isIconOnly
+          variant="ghost"
+          className="p-0 h-auto w-auto rounded-full"
+          isDisabled={!activeOrganization || isPending}
+          onPress={() => fileInputRef.current?.click()}
+        >
+          <OrganizationLogo
+            size="lg"
+            isPending={activeOrganizationPending}
+            organization={activeOrganization}
+          />
+        </Button>
+
+        <Dropdown>
+          <Button
+            isDisabled={!activeOrganization || isPending}
+            size="sm"
+            variant="secondary"
+          >
+            {isPending && <Spinner size="sm" />}
+
+            {organizationLocalization.changeLogo}
+          </Button>
+
+          <Dropdown.Popover className="min-w-fit">
+            <Dropdown.Menu>
+              <Dropdown.Item
+                textValue={organizationLocalization.uploadLogo}
+                onAction={() => fileInputRef.current?.click()}
+              >
+                <CloudArrowUpIn className="text-muted" />
+
+                <Label>{organizationLocalization.uploadLogo}</Label>
+              </Dropdown.Item>
+
+              <Dropdown.Item
+                textValue={organizationLocalization.deleteLogo}
+                isDisabled={!activeOrganization?.logo}
+                onAction={handleDelete}
+                variant="danger"
+              >
+                <TrashBin className="text-danger" />
+
+                <Label>{organizationLocalization.deleteLogo}</Label>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown.Popover>
+        </Dropdown>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/organization/create-organization-dialog.tsx

@@ -0,0 +1,133 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCreateOrganization
+} from "@better-auth-ui/react"
+import { Briefcase } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { type SyntheticEvent, useEffect, useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { SlugField, sanitizeSlug } from "./slug-field"
+
+/** Props for the {@link CreateOrganizationDialog} component. */
+export type CreateOrganizationDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/**
+ * Render a dialog for creating a new organization.
+ *
+ * @param isOpen - Whether the dialog is open
+ * @param onOpenChange - Callback for when the dialog open state changes
+ * @returns The create organization dialog as a JSX element
+ */
+export function CreateOrganizationDialog({
+  isOpen,
+  onOpenChange
+}: CreateOrganizationDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const [name, setName] = useState("")
+  const [slug, setSlug] = useState("")
+
+  const { mutate: createOrganization, isPending: isCreating } =
+    useCreateOrganization(authClient as OrganizationAuthClient, {
+      onSuccess: () => onOpenChange(false)
+    })
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    createOrganization({ name, slug })
+  }
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSlug("")
+      setName("")
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    setSlug(sanitizeSlug(name))
+  }, [name])
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="default">
+                <Briefcase />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {organizationLocalization.createOrganization}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+              <p className="text-muted text-sm">
+                {organizationLocalization.organizationsDescription}
+              </p>
+
+              <TextField
+                id="name"
+                name="name"
+                isDisabled={isCreating}
+                value={name}
+                onChange={setName}
+              >
+                <Label>{organizationLocalization.name}</Label>
+
+                <Input
+                  required
+                  autoFocus
+                  placeholder={organizationLocalization.namePlaceholder}
+                  variant="secondary"
+                />
+
+                <FieldError />
+              </TextField>
+
+              <SlugField
+                value={slug}
+                onChange={setSlug}
+                isDisabled={isCreating}
+                variant="secondary"
+              />
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isCreating}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button type="submit" isPending={isCreating}>
+                {isCreating && <Spinner color="current" size="sm" />}
+
+                {organizationLocalization.createOrganization}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/organization/delete-organization-dialog.tsx

@@ -0,0 +1,97 @@
+import {
+  type OrganizationAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useDeleteOrganization
+} from "@better-auth-ui/react"
+import { TriangleExclamation } from "@gravity-ui/icons"
+import { AlertDialog, Button, Card, Form, Spinner, toast } from "@heroui/react"
+import type { Organization } from "better-auth/client"
+import type { SyntheticEvent } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { OrganizationView } from "./organization-view"
+
+export type DeleteOrganizationDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  organization: Organization
+}
+
+export function DeleteOrganizationDialog({
+  isOpen,
+  onOpenChange,
+  organization
+}: DeleteOrganizationDialogProps) {
+  const { authClient, basePaths, localization, navigate } = useAuth()
+  const {
+    localization: organizationLocalization,
+    viewPaths: organizationPluginViewPaths
+  } = useAuthPlugin(organizationPlugin)
+
+  const { mutate: deleteOrganization, isPending } = useDeleteOrganization(
+    authClient as OrganizationAuthClient,
+    {
+      onSuccess: () => {
+        onOpenChange(false)
+        toast.success(organizationLocalization.organizationDeleted)
+
+        navigate({
+          to: `${basePaths.settings}/${organizationPluginViewPaths.settings.organizations}`,
+          replace: true
+        })
+      }
+    }
+  )
+
+  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+    deleteOrganization({ organizationId: organization.id })
+  }
+
+  return (
+    <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialog.Container>
+        <AlertDialog.Dialog>
+          <Form onSubmit={handleSubmit}>
+            <AlertDialog.CloseTrigger />
+
+            <AlertDialog.Header>
+              <AlertDialog.Icon status="danger">
+                <TriangleExclamation />
+              </AlertDialog.Icon>
+
+              <AlertDialog.Heading>
+                {organizationLocalization.deleteOrganization}
+              </AlertDialog.Heading>
+            </AlertDialog.Header>
+
+            <AlertDialog.Body className="flex flex-col gap-4 overflow-visible">
+              <p className="text-muted text-sm">
+                {organizationLocalization.deleteOrganizationDescription}
+              </p>
+
+              <Card variant="secondary">
+                <Card.Content>
+                  <OrganizationView organization={organization} hideRole />
+                </Card.Content>
+              </Card>
+            </AlertDialog.Body>
+
+            <AlertDialog.Footer>
+              <Button slot="close" variant="tertiary" isDisabled={isPending}>
+                {localization.settings.cancel}
+              </Button>
+
+              <Button type="submit" variant="danger" isPending={isPending}>
+                {isPending && <Spinner color="current" size="sm" />}
+
+                {organizationLocalization.deleteOrganization}
+              </Button>
+            </AlertDialog.Footer>
+          </Form>
+        </AlertDialog.Dialog>
+      </AlertDialog.Container>
+    </AlertDialog.Backdrop>
+  )
+}

package/src/components/auth/organization/delete-organization-skeleton.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@heroui/react"
+
+/**
+ * Placeholder matching {@link DeleteOrganization} while the delete permission resolves.
+ */
+export function DeleteOrganizationSkeleton() {
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-1">
+        <Skeleton className="h-3.5 w-40 rounded-lg" />
+        <Skeleton className="h-3 w-64 rounded-lg" />
+      </div>
+
+      <Skeleton className="h-8 w-36 shrink-0 rounded-full" />
+    </div>
+  )
+}

package/src/components/auth/organization/delete-organization.tsx

@@ -0,0 +1,77 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useAuthPlugin,
+  useHasPermission
+} from "@better-auth-ui/react"
+import { AlertDialog, Button } from "@heroui/react"
+import { useState } from "react"
+
+import { organizationPlugin } from "../../../lib/auth/organization-plugin"
+import { DeleteOrganizationDialog } from "./delete-organization-dialog"
+import { DeleteOrganizationSkeleton } from "./delete-organization-skeleton"
+
+/**
+ * Danger-zone row to delete the active organization. Hidden for members without
+ * the `organization:delete` permission.
+ */
+export function DeleteOrganization() {
+  const { authClient } = useAuth()
+  const { localization: organizationLocalization } =
+    useAuthPlugin(organizationPlugin)
+
+  const { data: activeOrganization } = useActiveOrganization(
+    authClient as OrganizationAuthClient
+  )
+
+  const { data: permission, isPending: permissionPending } = useHasPermission(
+    authClient as OrganizationAuthClient,
+    {
+      permissions: { organization: ["delete"] }
+    }
+  )
+
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  if (permissionPending) {
+    return <DeleteOrganizationSkeleton />
+  }
+
+  if (!permission?.success) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <p className="text-sm font-medium leading-tight">
+          {organizationLocalization.deleteOrganization}
+        </p>
+
+        <p className="text-muted mt-0.5 text-xs">
+          {organizationLocalization.deleteOrganizationDescription}
+        </p>
+      </div>
+
+      <AlertDialog>
+        <Button
+          isDisabled={!activeOrganization}
+          size="sm"
+          variant="danger-soft"
+          onPress={() => setConfirmOpen(true)}
+        >
+          {organizationLocalization.deleteOrganization}
+        </Button>
+
+        {activeOrganization && (
+          <DeleteOrganizationDialog
+            isOpen={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            organization={activeOrganization}
+          />
+        )}
+      </AlertDialog>
+    </div>
+  )
+}