@better-auth-ui/heroui 1.6.8 → 1.6.9

package/src/components/auth/api-key/organization-api-keys.tsx

@@ -0,0 +1,55 @@
+import {
+  type OrganizationAuthClient,
+  useActiveOrganization,
+  useAuth,
+  useListOrganizationMembers,
+  useSession
+} from "@better-auth-ui/react"
+import type { CardProps } from "@heroui/react"
+
+import { ApiKeys } from "./api-keys"
+
+export type OrganizationApiKeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * {@link ApiKeys} scoped to the active organization.
+ *
+ * Hidden for members whose role isn't `owner`. Better Auth's
+ * `/organization/has-permission` endpoint isn't usable for `apiKey:*` checks
+ * (it doesn't pass `allowCreatorAllPermissions` and the default org AC has no
+ * `apiKey` statements), so we gate on role directly.
+ */
+export function OrganizationApiKeys({
+  className,
+  variant
+}: OrganizationApiKeysProps) {
+  const { authClient } = useAuth()
+  const { data: session } = useSession(authClient)
+
+  const { data: activeOrganization, isPending: activeOrganizationPending } =
+    useActiveOrganization(authClient as OrganizationAuthClient)
+
+  const { data: membersData } = useListOrganizationMembers(
+    authClient as OrganizationAuthClient
+  )
+
+  const canManageApiKeys = membersData?.members.some(
+    (member) => member.role === "owner" && member.userId === session?.user.id
+  )
+
+  if (!canManageApiKeys) {
+    return null
+  }
+
+  return (
+    <ApiKeys
+      className={className}
+      variant={variant}
+      organizationId={activeOrganization?.id}
+      isPending={activeOrganizationPending}
+    />
+  )
+}

package/src/components/auth/delete-user/danger-zone.tsx

@@ -2,7 +2,7 @@ import { useAuth } from "@better-auth-ui/react"
 import { type CardProps, cn } from "@heroui/react"
 import type { ComponentProps } from "react"
 
-import { DeleteUser } from "./delete-user"
+import { DeleteAccount } from "./delete-account"
 
 export type DangerZoneProps = {
   className?: string
@@ -10,7 +10,7 @@ export type DangerZoneProps = {
 }
 
 /**
- * Renders the danger zone heading and {@link DeleteUser}.
+ * Renders the danger zone heading and {@link DeleteAccount}.
  * Registered as a `securityCard` by `deleteUserPlugin()`; gate by registering the plugin.
  */
 export function DangerZone({
@@ -26,7 +26,7 @@ export function DangerZone({
         {localization.settings.dangerZone}
       </h2>
 
-      <DeleteUser variant={variant} />
+      <DeleteAccount variant={variant} />
     </div>
   )
 }

package/src/components/auth/delete-user/{delete-user.tsx → delete-account.tsx}

@@ -24,7 +24,7 @@ import { type SyntheticEvent, useState } from "react"
 
 import { deleteUserPlugin } from "../../../lib/auth/delete-user-plugin"
 
-export type DeleteUserProps = {
+export type DeleteAccountProps = {
   className?: string
   variant?: CardProps["variant"]
 }
@@ -32,11 +32,11 @@ export type DeleteUserProps = {
 /**
  * Danger-zone card to delete the authenticated account, with a confirmation dialog and toasts.
  */
-export function DeleteUser({
+export function DeleteAccount({
   className,
   variant,
   ...props
-}: DeleteUserProps & Omit<CardProps, "children">) {
+}: DeleteAccountProps & Omit<CardProps, "children">) {
   const { authClient, basePaths, localization, navigate, viewPaths } = useAuth()
 
   const {
@@ -94,11 +94,11 @@ export function DeleteUser({
       <Card.Content className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <p className="text-sm font-medium leading-tight">
-            {deleteUserLocalization.deleteUser}
+            {deleteUserLocalization.deleteAccount}
           </p>
 
           <p className="text-muted text-xs mt-0.5">
-            {deleteUserLocalization.deleteUserDescription}
+            {deleteUserLocalization.deleteAccountDescription}
           </p>
         </div>
 
@@ -109,7 +109,7 @@ export function DeleteUser({
             variant="danger-soft"
             onPress={() => setConfirmOpen(true)}
           >
-            {deleteUserLocalization.deleteUser}
+            {deleteUserLocalization.deleteAccount}
           </Button>
 
           <AlertDialog.Backdrop
@@ -127,13 +127,13 @@ export function DeleteUser({
                     </AlertDialog.Icon>
 
                     <AlertDialog.Heading>
-                      {deleteUserLocalization.deleteUser}
+                      {deleteUserLocalization.deleteAccount}
                     </AlertDialog.Heading>
                   </AlertDialog.Header>
 
                   <AlertDialog.Body className="overflow-visible">
                     <p className="text-muted text-sm">
-                      {deleteUserLocalization.deleteUserDescription}
+                      {deleteUserLocalization.deleteAccountDescription}
                     </p>
 
                     {needsPassword && (
@@ -175,7 +175,7 @@ export function DeleteUser({
                     >
                       {isPending && <Spinner color="current" size="sm" />}
 
-                      {deleteUserLocalization.deleteUser}
+                      {deleteUserLocalization.deleteAccount}
                     </Button>
                   </AlertDialog.Footer>
                 </Form>

package/src/components/auth/email/organization-invitation-email.tsx

@@ -0,0 +1,38 @@
+import {
+  OrganizationInvitationEmail as OrganizationInvitationEmailPrimitive,
+  type OrganizationInvitationEmailProps
+} from "@better-auth-ui/react/email"
+import { cn } from "@heroui/react"
+
+export type { OrganizationInvitationEmailProps } from "@better-auth-ui/react/email"
+
+export function OrganizationInvitationEmail({
+  colors,
+  classNames,
+  ...props
+}: OrganizationInvitationEmailProps) {
+  return (
+    <OrganizationInvitationEmailPrimitive
+      colors={{
+        light: {
+          background: "#F5F5F5",
+          primary: "#0285F7",
+          primaryForeground: "#FCFCFC",
+          ...colors?.light
+        },
+        dark: {
+          background: "#060607",
+          primary: "#0584F6",
+          primaryForeground: "#FCFCFC",
+          ...colors?.dark
+        }
+      }}
+      classNames={{
+        ...classNames,
+        card: cn("border-none rounded-3xl", classNames?.card),
+        button: cn("rounded-full", classNames?.button)
+      }}
+      {...props}
+    />
+  )
+}

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>
+  )
+}