@better-auth-ui/heroui 1.6.8 → 1.6.9

package/dist/lib/auth/theme-plugin.js

@@ -1,23 +1,26 @@
-import { ThemeToggleItem as e } from "../../components/auth/theme/theme-toggle-item.js";
-import { Appearance as t } from "../../components/auth/theme/appearance.js";
-import { createAuthPlugin as n } from "@better-auth-ui/core";
-import { themePlugin as r } from "@better-auth-ui/core/plugins";
-//#region src/lib/auth/theme-plugin.ts
-var i = n(r.id, ({ useTheme: n, ...i }) => {
-	let a = r({
-		setTheme: () => {},
-		...i
-	});
-	return {
-		...a,
-		useTheme: n ?? (() => ({
-			theme: a.theme,
-			setTheme: a.setTheme,
-			themes: a.themes
-		})),
-		userMenuItems: [e],
-		accountCards: [t]
-	};
+import { createAuthPlugin } from "@better-auth-ui/core";
+import { themePlugin as coreThemePlugin } from "@better-auth-ui/core/plugins";
+import { Appearance } from "../../components/auth/theme/appearance";
+import { ThemeToggleItem } from "../../components/auth/theme/theme-toggle-item";
+export const themePlugin = createAuthPlugin(coreThemePlugin.id, ({ useTheme, ...rest }) => {
+    // No-op `setTheme` baseline keeps core's required option satisfied on the
+    // hook branch (where the consumer doesn't pass a setter); on the static
+    // branch the spread overrides it with the consumer's real setter.
+    const base = coreThemePlugin({ setTheme: () => { }, ...rest });
+    return {
+        ...base,
+        // Slot components always call `plugin.useTheme()` — invoking the hook
+        // inside their render keeps it in scope of any `<ThemeProvider>` the
+        // consumer mounts. On the static branch the factory re-runs on every
+        // parent render, so the synthesized closure stays in sync with the
+        // consumer's `theme` state.
+        useTheme: useTheme ??
+            (() => ({
+                theme: base.theme,
+                setTheme: base.setTheme,
+                themes: base.themes
+            })),
+        userMenuItems: [ThemeToggleItem],
+        accountCards: [Appearance]
+    };
 });
-//#endregion
-export { i as themePlugin };

package/dist/lib/auth/username-plugin.d.ts

@@ -1,7 +1,7 @@
-import { UsernamePluginOptions } from '@better-auth-ui/core/plugins';
-import { SignInUsername } from '../../components/auth/username/sign-in-username';
-import { UsernameField } from '../../components/auth/username/username-field';
-export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefined) => Omit<{
+import { type UsernamePluginOptions } from "@better-auth-ui/core/plugins";
+import { SignInUsername } from "../../components/auth/username/sign-in-username";
+import { UsernameField } from "../../components/auth/username/username-field";
+export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefined) => {
     additionalFields: ({
         name: string;
         type: "string";
@@ -9,7 +9,7 @@ export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefin
         placeholder: string;
         inputType: "input";
         signUp: "above";
-        required: boolean;
+        required: true;
     } | {
         name: string;
         type: "string";
@@ -26,7 +26,7 @@ export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefin
         placeholder: string;
         inputType: "input";
         signUp: "above";
-        required: boolean;
+        required: true;
     } | {
         render: typeof UsernameField;
         name: string;
@@ -42,6 +42,8 @@ export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefin
             signIn: typeof SignInUsername;
         };
     };
+    minUsernameLength: number;
+    maxUsernameLength: number;
     localization: {
         username: string;
         usernamePlaceholder: string;
@@ -51,12 +53,10 @@ export declare const usernamePlugin: ((options?: UsernamePluginOptions | undefin
         displayUsername: string;
         displayUsernamePlaceholder: string;
     };
-    isUsernameAvailable?: boolean | undefined;
-    displayUsername?: boolean | undefined;
-    minUsernameLength: number;
-    maxUsernameLength: number;
+    displayUsername?: boolean;
+    isUsernameAvailable?: boolean;
     id: "username";
-}, "id"> & {
+} & {
     id: "username";
 }) & {
     id: "username";

package/dist/lib/auth/username-plugin.js

@@ -1,18 +1,19 @@
-import { UsernameField as e } from "../../components/auth/username/username-field.js";
-import { SignInUsername as t } from "../../components/auth/username/sign-in-username.js";
-import { createAuthPlugin as n } from "@better-auth-ui/core";
-import { usernamePlugin as r } from "@better-auth-ui/core/plugins";
-//#region src/lib/auth/username-plugin.tsx
-var i = n(r.id, (n = {}) => {
-	let i = r(n);
-	return {
-		...i,
-		additionalFields: i.additionalFields?.map((t) => t.name === "username" ? {
-			...t,
-			render: e
-		} : t),
-		views: { auth: { signIn: t } }
-	};
+import { createAuthPlugin } from "@better-auth-ui/core";
+import { usernamePlugin as coreUsernamePlugin } from "@better-auth-ui/core/plugins";
+import { SignInUsername } from "../../components/auth/username/sign-in-username";
+import { UsernameField } from "../../components/auth/username/username-field";
+export const usernamePlugin = createAuthPlugin(coreUsernamePlugin.id, (options = {}) => {
+    const core = coreUsernamePlugin(options);
+    return {
+        ...core,
+        additionalFields: core.additionalFields?.map((field) => field.name === "username"
+            ? {
+                ...field,
+                render: UsernameField
+            }
+            : field),
+        views: {
+            auth: { signIn: SignInUsername }
+        }
+    };
 });
-//#endregion
-export { i as usernamePlugin };

package/dist/plugins.d.ts

@@ -1,22 +1,46 @@
-export * from './components/auth/api-key/api-keys';
-export * from './components/auth/delete-user/danger-zone';
-export * from './components/auth/delete-user/delete-user';
-export * from './components/auth/magic-link/magic-link';
-export * from './components/auth/multi-session/manage-account';
-export * from './components/auth/multi-session/manage-accounts';
-export * from './components/auth/multi-session/switch-account-submenu';
-export * from './components/auth/multi-session/switch-account-submenu-content';
-export * from './components/auth/multi-session/switch-account-submenu-item';
-export * from './components/auth/passkey/passkeys';
-export * from './components/auth/theme/appearance';
-export * from './components/auth/theme/theme-toggle-item';
-export * from './components/auth/username/sign-in-username';
-export * from './components/auth/username/username-field';
-export * from './lib/auth/api-key-plugin';
-export * from './lib/auth/auth-plugin';
-export * from './lib/auth/delete-user-plugin';
-export * from './lib/auth/magic-link-plugin';
-export * from './lib/auth/multi-session-plugin';
-export * from './lib/auth/passkey-plugin';
-export * from './lib/auth/theme-plugin';
-export * from './lib/auth/username-plugin';
+export * from "./components/auth/api-key/api-keys";
+export * from "./components/auth/api-key/organization-api-keys";
+export * from "./components/auth/delete-user/danger-zone";
+export * from "./components/auth/delete-user/delete-account";
+export * from "./components/auth/magic-link/magic-link";
+export * from "./components/auth/multi-session/manage-account";
+export * from "./components/auth/multi-session/manage-accounts";
+export * from "./components/auth/multi-session/switch-account-submenu";
+export * from "./components/auth/multi-session/switch-account-submenu-content";
+export * from "./components/auth/multi-session/switch-account-submenu-item";
+export * from "./components/auth/organization/change-organization-logo";
+export * from "./components/auth/organization/create-organization-dialog";
+export * from "./components/auth/organization/delete-organization";
+export * from "./components/auth/organization/delete-organization-skeleton";
+export * from "./components/auth/organization/invite-member-dialog";
+export * from "./components/auth/organization/leave-organization";
+export * from "./components/auth/organization/organization";
+export * from "./components/auth/organization/organization-danger-zone";
+export * from "./components/auth/organization/organization-invitations";
+export * from "./components/auth/organization/organization-invitations-empty";
+export * from "./components/auth/organization/organization-logo";
+export * from "./components/auth/organization/organization-members";
+export * from "./components/auth/organization/organization-people";
+export * from "./components/auth/organization/organization-profile";
+export * from "./components/auth/organization/organization-row";
+export * from "./components/auth/organization/organization-settings";
+export * from "./components/auth/organization/organization-switcher";
+export * from "./components/auth/organization/organization-view";
+export * from "./components/auth/organization/organization-view-skeleton";
+export * from "./components/auth/organization/organizations";
+export * from "./components/auth/organization/organizations-settings";
+export * from "./components/auth/organization/user-invitations";
+export * from "./components/auth/passkey/passkeys";
+export * from "./components/auth/theme/appearance";
+export * from "./components/auth/theme/theme-toggle-item";
+export * from "./components/auth/username/sign-in-username";
+export * from "./components/auth/username/username-field";
+export * from "./lib/auth/api-key-plugin";
+export * from "./lib/auth/auth-plugin";
+export * from "./lib/auth/delete-user-plugin";
+export * from "./lib/auth/magic-link-plugin";
+export * from "./lib/auth/multi-session-plugin";
+export * from "./lib/auth/organization-plugin";
+export * from "./lib/auth/passkey-plugin";
+export * from "./lib/auth/theme-plugin";
+export * from "./lib/auth/username-plugin";

package/dist/plugins.js

@@ -1,23 +1,48 @@
 "use client";
-import { apiKeyPlugin as e } from "./lib/auth/api-key-plugin.js";
-import { ApiKeys as t } from "./components/auth/api-key/api-keys.js";
-import { deleteUserPlugin as n } from "./lib/auth/delete-user-plugin.js";
-import { DeleteUser as r } from "./components/auth/delete-user/delete-user.js";
-import { DangerZone as i } from "./components/auth/delete-user/danger-zone.js";
-import { magicLinkPlugin as a } from "./lib/auth/magic-link-plugin.js";
-import { MagicLink as o } from "./components/auth/magic-link/magic-link.js";
-import { ManageAccounts as s } from "./components/auth/multi-session/manage-accounts.js";
-import { SwitchAccountSubmenuItem as c } from "./components/auth/multi-session/switch-account-submenu-item.js";
-import { SwitchAccountSubmenuContent as l } from "./components/auth/multi-session/switch-account-submenu-content.js";
-import { SwitchAccountSubmenu as u } from "./components/auth/multi-session/switch-account-submenu.js";
-import { multiSessionPlugin as d } from "./lib/auth/multi-session-plugin.js";
-import { ManageAccount as f } from "./components/auth/multi-session/manage-account.js";
-import { passkeyPlugin as p } from "./lib/auth/passkey-plugin.js";
-import { Passkeys as m } from "./components/auth/passkey/passkeys.js";
-import { ThemeToggleItem as h } from "./components/auth/theme/theme-toggle-item.js";
-import { themePlugin as g } from "./lib/auth/theme-plugin.js";
-import { Appearance as _ } from "./components/auth/theme/appearance.js";
-import { UsernameField as v } from "./components/auth/username/username-field.js";
-import { usernamePlugin as y } from "./lib/auth/username-plugin.js";
-import { SignInUsername as b } from "./components/auth/username/sign-in-username.js";
-export { t as ApiKeys, _ as Appearance, i as DangerZone, r as DeleteUser, o as MagicLink, f as ManageAccount, s as ManageAccounts, m as Passkeys, b as SignInUsername, u as SwitchAccountSubmenu, l as SwitchAccountSubmenuContent, c as SwitchAccountSubmenuItem, h as ThemeToggleItem, v as UsernameField, e as apiKeyPlugin, n as deleteUserPlugin, a as magicLinkPlugin, d as multiSessionPlugin, p as passkeyPlugin, g as themePlugin, y as usernamePlugin };
+export * from "./components/auth/api-key/api-keys";
+export * from "./components/auth/api-key/organization-api-keys";
+export * from "./components/auth/delete-user/danger-zone";
+export * from "./components/auth/delete-user/delete-account";
+// Plugin-contributed components that may be used standalone
+export * from "./components/auth/magic-link/magic-link";
+export * from "./components/auth/multi-session/manage-account";
+export * from "./components/auth/multi-session/manage-accounts";
+export * from "./components/auth/multi-session/switch-account-submenu";
+export * from "./components/auth/multi-session/switch-account-submenu-content";
+export * from "./components/auth/multi-session/switch-account-submenu-item";
+export * from "./components/auth/organization/change-organization-logo";
+export * from "./components/auth/organization/create-organization-dialog";
+export * from "./components/auth/organization/delete-organization";
+export * from "./components/auth/organization/delete-organization-skeleton";
+export * from "./components/auth/organization/invite-member-dialog";
+export * from "./components/auth/organization/leave-organization";
+export * from "./components/auth/organization/organization";
+export * from "./components/auth/organization/organization-danger-zone";
+export * from "./components/auth/organization/organization-invitations";
+export * from "./components/auth/organization/organization-invitations-empty";
+export * from "./components/auth/organization/organization-logo";
+export * from "./components/auth/organization/organization-members";
+export * from "./components/auth/organization/organization-people";
+export * from "./components/auth/organization/organization-profile";
+export * from "./components/auth/organization/organization-row";
+export * from "./components/auth/organization/organization-settings";
+export * from "./components/auth/organization/organization-switcher";
+export * from "./components/auth/organization/organization-view";
+export * from "./components/auth/organization/organization-view-skeleton";
+export * from "./components/auth/organization/organizations";
+export * from "./components/auth/organization/organizations-settings";
+export * from "./components/auth/organization/user-invitations";
+export * from "./components/auth/passkey/passkeys";
+export * from "./components/auth/theme/appearance";
+export * from "./components/auth/theme/theme-toggle-item";
+export * from "./components/auth/username/sign-in-username";
+export * from "./components/auth/username/username-field";
+export * from "./lib/auth/api-key-plugin";
+export * from "./lib/auth/auth-plugin";
+export * from "./lib/auth/delete-user-plugin";
+export * from "./lib/auth/magic-link-plugin";
+export * from "./lib/auth/multi-session-plugin";
+export * from "./lib/auth/organization-plugin";
+export * from "./lib/auth/passkey-plugin";
+export * from "./lib/auth/theme-plugin";
+export * from "./lib/auth/username-plugin";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "type": "module",
   "scripts": {
-    "build": "vite build",
-    "dev": "tsc --watch",
+    "build": "tsc && bun run styles",
+    "styles": "mkdir -p dist && cp src/styles.css dist/styles.css",
     "test": "vitest"
   },
   "files": [
@@ -13,48 +13,54 @@
   ],
   "exports": {
     ".": {
+      "development": "./src/index.tsx",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./email": {
+      "development": "./src/email.ts",
       "types": "./dist/email.d.ts",
       "import": "./dist/email.js"
     },
     "./plugins": {
+      "development": "./src/plugins.ts",
       "types": "./dist/plugins.d.ts",
       "import": "./dist/plugins.js"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "development": "./src/styles.css",
+      "default": "./dist/styles.css"
+    }
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.0.4",
-    "@heroui/styles": "^3.0.4",
+    "@heroui/react": "^3.1.0",
+    "@heroui/styles": "^3.1.0",
     "@internationalized/date": "^3.12.1",
-    "@tanstack/react-pacer": "^0.22.0",
-    "@tanstack/react-query": "^5.100.9",
+    "@tanstack/react-pacer": "^0.22.1",
+    "@tanstack/react-query": "^5.100.14",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.2.14",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "^4.1.5",
-    "better-auth": "^1.6.10",
+    "@types/react": "^19.2.15",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.7",
+    "better-auth": "^1.6.11",
     "bowser": "^2.11.0",
-    "playwright": "^1.59.1",
+    "playwright": "^1.60.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.0.4",
-    "@heroui/styles": ">=3.0.4",
+    "@heroui/react": ">=3.1.0",
+    "@heroui/styles": ">=3.1.0",
     "@internationalized/date": ">=3.12.1",
-    "@tanstack/react-pacer": ">=0.22.0",
-    "@tanstack/react-query": ">=5.100.9",
-    "better-auth": ">=1.6.10",
+    "@tanstack/react-pacer": ">=0.22.1",
+    "@tanstack/react-query": ">=5.100.14",
+    "better-auth": ">=1.6.11",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

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

@@ -12,9 +12,13 @@ import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
 
 export type ApiKeyProps = {
   apiKey: ListedApiKey
+  /** Hide the row's delete button (e.g., when caller lacks `apiKey:delete`). */
+  hideDelete?: boolean
+  /** Scope the delete payload to an organization (sets `configId`). */
+  organizationId?: string
 }
 
-export function ApiKey({ apiKey }: ApiKeyProps) {
+export function ApiKey({ apiKey, hideDelete, organizationId }: ApiKeyProps) {
   const { localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
   const [deleteOpen, setDeleteOpen] = useState(false)
@@ -42,23 +46,28 @@ export function ApiKey({ apiKey }: ApiKeyProps) {
         </span>
       </div>
 
-      <Button
-        className="ml-auto shrink-0"
-        variant="outline"
-        size="sm"
-        onPress={() => setDeleteOpen(true)}
-        aria-label={apiKeyLocalization.deleteApiKey}
-      >
-        <Xmark />
+      {!hideDelete && (
+        <>
+          <Button
+            className="ml-auto shrink-0"
+            variant="outline"
+            size="sm"
+            onPress={() => setDeleteOpen(true)}
+            aria-label={apiKeyLocalization.deleteApiKey}
+          >
+            <Xmark />
 
-        {localization.settings.delete}
-      </Button>
+            {localization.settings.delete}
+          </Button>
 
-      <DeleteApiKeyDialog
-        isOpen={deleteOpen}
-        onOpenChange={setDeleteOpen}
-        apiKey={apiKey}
-      />
+          <DeleteApiKeyDialog
+            isOpen={deleteOpen}
+            onOpenChange={setDeleteOpen}
+            apiKey={apiKey}
+            organizationId={organizationId}
+          />
+        </>
+      )}
     </div>
   )
 }

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

@@ -6,9 +6,11 @@ import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
 
 export type ApiKeysEmptyProps = {
   onCreatePress: () => void
+  /** Hide the empty-state "Create API key" button. */
+  hideCreate?: boolean
 }
 
-export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
+export function ApiKeysEmpty({ onCreatePress, hideCreate }: ApiKeysEmptyProps) {
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
 
   return (
@@ -25,9 +27,11 @@ export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
         </p>
       </div>
 
-      <Button size="sm" onPress={onCreatePress}>
-        {apiKeyLocalization.createApiKey}
-      </Button>
+      {!hideCreate && (
+        <Button size="sm" onPress={onCreatePress}>
+          {apiKeyLocalization.createApiKey}
+        </Button>
+      )}
     </div>
   )
 }

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

@@ -16,16 +16,39 @@ import { CreateApiKeyDialog } from "./create-api-key-dialog"
 export type ApiKeysProps = {
   className?: string
   variant?: CardProps["variant"]
+  /** Scope the list and create payload to an organization. */
+  organizationId?: string
+  /** Force the loading skeleton and disable the list query. */
+  isPending?: boolean
+  /** Hide the "Create API key" button (header + empty state). */
+  hideCreate?: boolean
+  /** Hide the per-row delete button on listed keys. */
+  hideDelete?: boolean
 }
 
-export function ApiKeys({ className, variant }: ApiKeysProps) {
+export function ApiKeys({
+  className,
+  variant,
+  organizationId,
+  isPending: isPendingProp,
+  hideCreate,
+  hideDelete
+}: ApiKeysProps) {
   const { authClient } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
 
-  const { data: listData, isPending } = useListApiKeys(
-    authClient as ApiKeyAuthClient
+  const { data: listData, isPending: isListPending } = useListApiKeys(
+    authClient as ApiKeyAuthClient,
+    {
+      enabled: !isPendingProp,
+      ...(organizationId
+        ? { query: { organizationId, configId: "organization" } }
+        : {})
+    }
   )
 
+  const isPending = isPendingProp || isListPending
+
   const [createOpen, setCreateOpen] = useState(false)
 
   return (
@@ -35,14 +58,16 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
           {apiKeyLocalization.apiKeys}
         </h2>
 
-        <Button
-          className="shrink-0"
-          size="sm"
-          isDisabled={isPending}
-          onPress={() => setCreateOpen(true)}
-        >
-          {apiKeyLocalization.createApiKey}
-        </Button>
+        {!hideCreate && (
+          <Button
+            className="shrink-0"
+            size="sm"
+            isDisabled={isPending}
+            onPress={() => setCreateOpen(true)}
+          >
+            {apiKeyLocalization.createApiKey}
+          </Button>
+        )}
       </div>
 
       <Card variant={variant}>
@@ -50,7 +75,10 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
           {isPending ? (
             <ApiKeySkeleton />
           ) : !listData?.apiKeys.length ? (
-            <ApiKeysEmpty onCreatePress={() => setCreateOpen(true)} />
+            <ApiKeysEmpty
+              onCreatePress={() => setCreateOpen(true)}
+              hideCreate={hideCreate}
+            />
           ) : (
             listData?.apiKeys.map((key, index) => (
               <div key={key.id}>
@@ -58,14 +86,24 @@ export function ApiKeys({ className, variant }: ApiKeysProps) {
                   <div className="border-b border-dashed -mx-4 my-4" />
                 )}
 
-                <ApiKey apiKey={key} />
+                <ApiKey
+                  apiKey={key}
+                  hideDelete={hideDelete}
+                  organizationId={organizationId}
+                />
               </div>
             ))
           )}
         </Card.Content>
       </Card>
 
-      <CreateApiKeyDialog isOpen={createOpen} onOpenChange={setCreateOpen} />
+      {!hideCreate && (
+        <CreateApiKeyDialog
+          isOpen={createOpen}
+          onOpenChange={setCreateOpen}
+          organizationId={organizationId}
+        />
+      )}
     </div>
   )
 }

package/src/components/auth/api-key/create-api-key-dialog.tsx

@@ -24,11 +24,14 @@ import { NewApiKeyDialog } from "./new-api-key-dialog"
 export type CreateApiKeyDialogProps = {
   isOpen: boolean
   onOpenChange: (open: boolean) => void
+  /** Create an organization-owned key by passing the organization id. */
+  organizationId?: string
 }
 
 export function CreateApiKeyDialog({
   isOpen,
-  onOpenChange
+  onOpenChange,
+  organizationId
 }: CreateApiKeyDialogProps) {
   const { authClient, localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
@@ -56,7 +59,17 @@ export function CreateApiKeyDialog({
     const formData = new FormData(e.target as HTMLFormElement)
     const name = (formData.get("name") as string)?.trim()
 
-    createApiKey(name ? { name } : undefined, {
+    const payload =
+      name || organizationId
+        ? {
+            ...(name ? { name } : {}),
+            ...(organizationId
+              ? { organizationId, configId: "organization" }
+              : {})
+          }
+        : undefined
+
+    createApiKey(payload, {
       onSuccess: (result) => {
         handleOpenChange(false)
         setKeyName(name)

package/src/components/auth/api-key/delete-api-key-dialog.tsx

@@ -21,12 +21,15 @@ export type DeleteApiKeyDialogProps = {
   isOpen: boolean
   onOpenChange: (open: boolean) => void
   apiKey: ListedApiKey
+  /** Scope the delete payload to an organization (sets `configId`). */
+  organizationId?: string
 }
 
 export function DeleteApiKeyDialog({
   isOpen,
   onOpenChange,
-  apiKey
+  apiKey,
+  organizationId
 }: DeleteApiKeyDialogProps) {
   const { authClient, localization } = useAuth()
   const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
@@ -77,7 +80,12 @@ export function DeleteApiKeyDialog({
 
             <Button
               variant="danger"
-              onPress={() => deleteApiKey({ keyId: apiKey.id })}
+              onPress={() =>
+                deleteApiKey({
+                  keyId: apiKey.id,
+                  ...(organizationId ? { configId: "organization" } : {})
+                })
+              }
               isPending={isDeleting}
             >
               {isDeleting && <Spinner color="current" size="sm" />}