@better-auth-ui/heroui 1.6.6 → 1.6.8

package/dist/components/auth/passkey/passkeys-empty.d.ts

@@ -0,0 +1,4 @@
+export type PasskeysEmptyProps = {
+    onAddPress: () => void;
+};
+export declare function PasskeysEmpty({ onAddPress }: PasskeysEmptyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/passkey/passkeys-empty.js

@@ -0,0 +1,35 @@
+import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
+import { useAuthPlugin as t } from "@better-auth-ui/react";
+import { Fingerprint as n } from "@gravity-ui/icons";
+import { Button as r } from "@heroui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/auth/passkey/passkeys-empty.tsx
+function o({ onAddPress: o }) {
+	let { localization: s } = t(e);
+	return /* @__PURE__ */ a("div", {
+		className: "flex flex-col items-center justify-center gap-4",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex size-10 items-center justify-center rounded-xl bg-surface-secondary",
+				children: /* @__PURE__ */ i(n, { className: "size-4.5" })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-col items-center justify-center gap-1 text-center",
+				children: [/* @__PURE__ */ i("p", {
+					className: "text-sm font-semibold",
+					children: s.noPasskeys
+				}), /* @__PURE__ */ i("p", {
+					className: "text-muted text-xs",
+					children: s.passkeysDescription
+				})]
+			}),
+			/* @__PURE__ */ i(r, {
+				size: "sm",
+				onPress: o,
+				children: s.addPasskey
+			})
+		]
+	});
+}
+//#endregion
+export { o as PasskeysEmpty };

package/dist/components/auth/passkey/passkeys.js

@@ -1,106 +1,42 @@
 import { passkeyPlugin as e } from "../../../lib/auth/passkey-plugin.js";
-import { Passkey as t } from "./passkey.js";
-import { useAddPasskey as n, useAuth as r, useAuthPlugin as i, useListPasskeys as a } from "@better-auth-ui/react";
-import { Fingerprint as o } from "@gravity-ui/icons";
-import { AlertDialog as s, Button as c, Card as l, FieldError as u, Form as d, Input as f, Label as p, Skeleton as m, Spinner as h, TextField as g, cn as _ } from "@heroui/react";
-import { useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { AddPasskeyDialog as t } from "./add-passkey-dialog.js";
+import { Passkey as n } from "./passkey.js";
+import { PasskeySkeleton as r } from "./passkey-skeleton.js";
+import { PasskeysEmpty as i } from "./passkeys-empty.js";
+import { useAuth as a, useAuthPlugin as o, useListPasskeys as s } from "@better-auth-ui/react";
+import { Button as c, Card as l, cn as u } from "@heroui/react";
+import { useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/auth/passkey/passkeys.tsx
-function S({ className: m, variant: S, ...w }) {
-	let { authClient: T, localization: E } = r(), { localization: D } = i(e), { data: O, isPending: k } = a(T), { mutate: A, isPending: j } = n(T), [M, N] = v(!1), [P, F] = v(""), I = (e) => {
-		N(e), F("");
-	}, L = async (e) => {
-		e.preventDefault(), A({ name: P.trim() || void 0 }, { onSuccess: () => {
-			N(!1), F("");
-		} });
-	};
-	return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
-		className: _("text-sm font-semibold mb-3"),
-		children: D.passkeys
-	}), /* @__PURE__ */ b(l, {
-		className: _(m),
-		variant: S,
-		...w,
-		children: /* @__PURE__ */ x(l.Content, {
-			className: "gap-0",
-			children: [/* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-					className: "text-sm font-medium leading-tight",
-					children: D.passkeysDescription
-				}), /* @__PURE__ */ b("p", {
-					className: "text-muted text-xs mt-0.5",
-					children: D.passkeysInstructions
-				})] }), /* @__PURE__ */ x(s, { children: [/* @__PURE__ */ b(c, {
+function m({ className: m, variant: h, ...g }) {
+	let { authClient: _ } = a(), { localization: v } = o(e), { data: y, isPending: b } = s(_), [x, S] = d(!1);
+	return /* @__PURE__ */ p("div", {
+		className: u("flex flex-col gap-3", m),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-end justify-between gap-3",
+				children: [/* @__PURE__ */ f("h2", {
+					className: "text-sm font-semibold truncate",
+					children: v.passkeys
+				}), /* @__PURE__ */ f(c, {
 					className: "shrink-0",
 					size: "sm",
-					isDisabled: k,
-					onPress: () => N(!0),
-					children: D.addPasskey
-				}), /* @__PURE__ */ b(s.Backdrop, {
-					isOpen: M,
-					onOpenChange: I,
-					children: /* @__PURE__ */ b(s.Container, { children: /* @__PURE__ */ b(s.Dialog, { children: /* @__PURE__ */ x(d, {
-						onSubmit: L,
-						children: [
-							/* @__PURE__ */ b(s.CloseTrigger, {}),
-							/* @__PURE__ */ x(s.Header, { children: [/* @__PURE__ */ b(s.Icon, {
-								status: "default",
-								children: /* @__PURE__ */ b(o, {})
-							}), /* @__PURE__ */ b(s.Heading, { children: D.addPasskey })] }),
-							/* @__PURE__ */ x(s.Body, {
-								className: "overflow-visible",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-muted text-sm",
-									children: D.passkeysInstructions
-								}), /* @__PURE__ */ x(g, {
-									className: "mt-4",
-									name: "passkey-name",
-									isDisabled: j,
-									value: P,
-									onChange: F,
-									children: [
-										/* @__PURE__ */ b(p, { children: D.passkey }),
-										/* @__PURE__ */ b(f, {
-											autoFocus: !0,
-											placeholder: E.settings.optional,
-											variant: "secondary"
-										}),
-										/* @__PURE__ */ b(u, {})
-									]
-								})]
-							}),
-							/* @__PURE__ */ x(s.Footer, { children: [/* @__PURE__ */ b(c, {
-								slot: "close",
-								variant: "tertiary",
-								isDisabled: j,
-								children: E.settings.cancel
-							}), /* @__PURE__ */ x(c, {
-								type: "submit",
-								isPending: j,
-								children: [j && /* @__PURE__ */ b(h, {
-									color: "current",
-									size: "sm"
-								}), D.addPasskey]
-							})] })
-						]
-					}) }) })
-				})] })]
-			}), k ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(C, {})] }) : O?.map((e) => /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("div", { className: "border-b border-dashed -mx-4 md:-mx-6 my-4" }), /* @__PURE__ */ b(t, { passkey: e })] }, e.id))]
-		})
-	})] });
-}
-function C() {
-	return /* @__PURE__ */ b("div", {
-		className: "flex items-center justify-between",
-		children: /* @__PURE__ */ x("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ b(m, { className: "size-10 rounded-xl" }), /* @__PURE__ */ x("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ b(m, { className: "h-4 w-24 rounded-lg" }), /* @__PURE__ */ b(m, { className: "h-3 w-20 rounded-lg" })]
-			})]
-		})
+					isDisabled: b,
+					onPress: () => S(!0),
+					children: v.addPasskey
+				})]
+			}),
+			/* @__PURE__ */ f(l, {
+				variant: h,
+				...g,
+				children: /* @__PURE__ */ f(l.Content, { children: b ? /* @__PURE__ */ f(r, {}) : y?.length ? y.map((e, t) => /* @__PURE__ */ p("div", { children: [t > 0 && /* @__PURE__ */ f("div", { className: "border-b border-dashed -mx-4 my-4" }), /* @__PURE__ */ f(n, { passkey: e })] }, e.id)) : /* @__PURE__ */ f(i, { onAddPress: () => S(!0) }) })
+			}),
+			/* @__PURE__ */ f(t, {
+				isOpen: x,
+				onOpenChange: S
+			})
+		]
 	});
 }
 //#endregion
-export { S as Passkeys };
+export { m as Passkeys };

package/dist/components/auth/settings/security/linked-account.js

@@ -11,7 +11,7 @@ function g({ account: g, provider: _ }) {
 		children: [
 			/* @__PURE__ */ m("div", {
 				className: f("flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary"),
-				children: m(D || c, { className: f("size-4.5", !g && "opacity-50") })
+				children: m(D || c, { className: "size-4.5" })
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "flex flex-col min-w-0",

package/dist/lib/auth/api-key-plugin.d.ts

@@ -0,0 +1,23 @@
+import { ApiKeyPluginOptions } from '@better-auth-ui/core/plugins';
+import { ApiKeys } from '../../components/auth/api-key/api-keys';
+export declare const apiKeyPlugin: ((options?: ApiKeyPluginOptions | undefined) => Omit<{
+    securityCards: (typeof ApiKeys)[];
+    localization: {
+        apiKey: string;
+        apiKeys: string;
+        apiKeysDescription: string;
+        createApiKey: string;
+        noApiKeys: string;
+        name: string;
+        newApiKey: string;
+        newApiKeyWarning: string;
+        deleteApiKey: string;
+        deleteApiKeyWarning: string;
+        dismissNewKey: string;
+    };
+    id: "apiKey";
+}, "id"> & {
+    id: "apiKey";
+}) & {
+    id: "apiKey";
+};

package/dist/lib/auth/api-key-plugin.js

@@ -0,0 +1,10 @@
+import { ApiKeys as e } from "../../components/auth/api-key/api-keys.js";
+import { createAuthPlugin as t } from "@better-auth-ui/core";
+import { apiKeyPlugin as n } from "@better-auth-ui/core/plugins";
+//#region src/lib/auth/api-key-plugin.ts
+var r = t(n.id, (t = {}) => ({
+	...n(t),
+	securityCards: [e]
+}));
+//#endregion
+export { r as apiKeyPlugin };

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

@@ -8,9 +8,12 @@ export declare const passkeyPlugin: ((options?: PasskeyPluginOptions | undefined
         passkey: string;
         addPasskey: string;
         deletePasskey: string;
+        deletePasskeyTitle: string;
+        deletePasskeyWarning: string;
         passkeys: string;
         passkeysDescription: string;
-        passkeysInstructions: string;
+        noPasskeys: string;
+        name: string;
     };
     id: "passkey";
 }, "id"> & {

package/dist/plugins.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -11,6 +12,7 @@ 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';

package/dist/plugins.js

@@ -1,21 +1,23 @@
 "use client";
-import { deleteUserPlugin as e } from "./lib/auth/delete-user-plugin.js";
-import { DeleteUser as t } from "./components/auth/delete-user/delete-user.js";
-import { DangerZone as n } from "./components/auth/delete-user/danger-zone.js";
-import { magicLinkPlugin as r } from "./lib/auth/magic-link-plugin.js";
-import { MagicLink as i } from "./components/auth/magic-link/magic-link.js";
-import { ManageAccounts as a } from "./components/auth/multi-session/manage-accounts.js";
-import { SwitchAccountSubmenuItem as o } from "./components/auth/multi-session/switch-account-submenu-item.js";
-import { SwitchAccountSubmenuContent as s } from "./components/auth/multi-session/switch-account-submenu-content.js";
-import { SwitchAccountSubmenu as c } from "./components/auth/multi-session/switch-account-submenu.js";
-import { multiSessionPlugin as l } from "./lib/auth/multi-session-plugin.js";
-import { ManageAccount as u } from "./components/auth/multi-session/manage-account.js";
-import { passkeyPlugin as d } from "./lib/auth/passkey-plugin.js";
-import { Passkeys as f } from "./components/auth/passkey/passkeys.js";
-import { ThemeToggleItem as p } from "./components/auth/theme/theme-toggle-item.js";
-import { themePlugin as m } from "./lib/auth/theme-plugin.js";
-import { Appearance as h } from "./components/auth/theme/appearance.js";
-import { UsernameField as g } from "./components/auth/username/username-field.js";
-import { usernamePlugin as _ } from "./lib/auth/username-plugin.js";
-import { SignInUsername as v } from "./components/auth/username/sign-in-username.js";
-export { h as Appearance, n as DangerZone, t as DeleteUser, i as MagicLink, u as ManageAccount, a as ManageAccounts, f as Passkeys, v as SignInUsername, c as SwitchAccountSubmenu, s as SwitchAccountSubmenuContent, o as SwitchAccountSubmenuItem, p as ThemeToggleItem, g as UsernameField, e as deleteUserPlugin, r as magicLinkPlugin, l as multiSessionPlugin, d as passkeyPlugin, m as themePlugin, _ as usernamePlugin };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "type": "module",
   "scripts": {
     "build": "vite build",
@@ -38,7 +38,7 @@
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.5",
-    "better-auth": "^1.6.9",
+    "better-auth": "^1.6.10",
     "bowser": "^2.11.0",
     "playwright": "^1.59.1",
     "react": "^19.2.6",
@@ -54,7 +54,7 @@
     "@internationalized/date": ">=3.12.1",
     "@tanstack/react-pacer": ">=0.22.0",
     "@tanstack/react-query": ">=5.100.9",
-    "better-auth": ">=1.6.9",
+    "better-auth": ">=1.6.10",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"

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

@@ -0,0 +1,17 @@
+import { Skeleton } from "@heroui/react"
+
+export function ApiKeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-28 rounded-lg" />
+          <Skeleton className="h-3 w-36 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import {
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Key, Xmark } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
+
+export type ApiKeyProps = {
+  apiKey: ListedApiKey
+}
+
+export function ApiKey({ apiKey }: ApiKeyProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight truncate">
+          {apiKey.name || apiKeyLocalization.apiKey}
+        </span>
+
+        <span className="text-xs text-muted font-mono truncate">{preview}</span>
+
+        <span className="text-xs text-muted">
+          {new Date(apiKey.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        onPress={() => setDeleteOpen(true)}
+        aria-label={apiKeyLocalization.deleteApiKey}
+      >
+        <Xmark />
+
+        {localization.settings.delete}
+      </Button>
+
+      <DeleteApiKeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        apiKey={apiKey}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type ApiKeysEmptyProps = {
+  onCreatePress: () => void
+}
+
+export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex size-10 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">{apiKeyLocalization.noApiKeys}</p>
+
+        <p className="text-muted text-xs">
+          {apiKeyLocalization.apiKeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onCreatePress}>
+        {apiKeyLocalization.createApiKey}
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListApiKeys
+} from "@better-auth-ui/react"
+import { Button, Card, type CardProps, cn } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { ApiKey } from "./api-key"
+import { ApiKeySkeleton } from "./api-key-skeleton"
+import { ApiKeysEmpty } from "./api-keys-empty"
+import { CreateApiKeyDialog } from "./create-api-key-dialog"
+
+export type ApiKeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function ApiKeys({ className, variant }: ApiKeysProps) {
+  const { authClient } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { data: listData, isPending } = useListApiKeys(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [createOpen, setCreateOpen] = useState(false)
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-end justify-between gap-3">
+        <h2 className="text-sm font-semibold truncate">
+          {apiKeyLocalization.apiKeys}
+        </h2>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setCreateOpen(true)}
+        >
+          {apiKeyLocalization.createApiKey}
+        </Button>
+      </div>
+
+      <Card variant={variant}>
+        <Card.Content>
+          {isPending ? (
+            <ApiKeySkeleton />
+          ) : !listData?.apiKeys.length ? (
+            <ApiKeysEmpty onCreatePress={() => setCreateOpen(true)} />
+          ) : (
+            listData?.apiKeys.map((key, index) => (
+              <div key={key.id}>
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 my-4" />
+                )}
+
+                <ApiKey apiKey={key} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+
+      <CreateApiKeyDialog isOpen={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  )
+}

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

@@ -0,0 +1,134 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useCreateApiKey
+} from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import {
+  AlertDialog,
+  Button,
+  FieldError,
+  Form,
+  Input,
+  Label,
+  Spinner,
+  TextField
+} from "@heroui/react"
+import { type SyntheticEvent, useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+import { NewApiKeyDialog } from "./new-api-key-dialog"
+
+export type CreateApiKeyDialogProps = {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function CreateApiKeyDialog({
+  isOpen,
+  onOpenChange
+}: CreateApiKeyDialogProps) {
+  const { authClient, localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { mutate: createApiKey, isPending: isCreating } = useCreateApiKey(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [isNewKeyDialogOpen, setIsNewKeyDialogOpen] = useState(false)
+  const [keyName, setKeyName] = useState<string | null>(null)
+  const [secretKey, setSecretKey] = useState<string | null>(null)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setKeyName(null)
+      setSecretKey(null)
+    }
+
+    onOpenChange(open)
+  }
+
+  const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const formData = new FormData(e.target as HTMLFormElement)
+    const name = (formData.get("name") as string)?.trim()
+
+    createApiKey(name ? { name } : undefined, {
+      onSuccess: (result) => {
+        handleOpenChange(false)
+        setKeyName(name)
+        setSecretKey(result.key)
+        setIsNewKeyDialogOpen(true)
+      }
+    })
+  }
+
+  return (
+    <>
+      <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={handleOpenChange}>
+        <AlertDialog.Container>
+          <AlertDialog.Dialog>
+            <Form onSubmit={handleSubmit}>
+              <AlertDialog.CloseTrigger />
+
+              <AlertDialog.Header>
+                <AlertDialog.Icon status="default">
+                  <Key />
+                </AlertDialog.Icon>
+
+                <AlertDialog.Heading>
+                  {apiKeyLocalization.createApiKey}
+                </AlertDialog.Heading>
+              </AlertDialog.Header>
+
+              <AlertDialog.Body className="overflow-visible">
+                <p className="text-muted text-sm">
+                  {apiKeyLocalization.apiKeysDescription}
+                </p>
+
+                <TextField
+                  className="mt-4"
+                  id="name"
+                  name="name"
+                  isDisabled={isCreating}
+                >
+                  <Label>{apiKeyLocalization.name}</Label>
+
+                  <Input
+                    autoFocus
+                    placeholder={localization.settings.optional}
+                    variant="secondary"
+                  />
+
+                  <FieldError />
+                </TextField>
+              </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" />}
+
+                  {apiKeyLocalization.createApiKey}
+                </Button>
+              </AlertDialog.Footer>
+            </Form>
+          </AlertDialog.Dialog>
+        </AlertDialog.Container>
+      </AlertDialog.Backdrop>
+
+      <NewApiKeyDialog
+        isOpen={isNewKeyDialogOpen}
+        onOpenChange={setIsNewKeyDialogOpen}
+        secretKey={secretKey}
+        name={keyName}
+      />
+    </>
+  )
+}