@mdxui/auth 1.1.0 → 1.4.0

package/README.md

@@ -44,8 +44,10 @@ function Dashboard() {
 
 - **Authentication Providers** - `IdentityProvider` and `AuthGate` for managing auth state
 - **WorkOS Widgets** - Pre-built components for user management (profile, security, API keys)
+- **Vault Components** - UI for managing encrypted secrets with `VaultProvider`
+- **Secrets Manager** - Full-featured secrets management widget
 - **Type-Safe Schemas** - Zod schemas extending mdxui's `UserIdentity` and `Session` types
-- **React Hooks** - `useAuth` and `useWidgetToken` for accessing auth state
+- **React Hooks** - `useAuth`, `useWidgetToken`, and `useVault` for accessing state
 - **UI Components** - Sign in/out buttons, user menu, team switcher
 
 ## Exports
@@ -61,6 +63,7 @@ import {
   IdentityProviderMinimal,
   AuthGate,
   WidgetsProvider,
+  VaultProvider,
 
   // Widgets
   UserProfile,
@@ -70,6 +73,14 @@ import {
   UsersManagement,
   OrganizationSwitcher,
 
+  // Vault Components
+  VaultList,
+  VaultItemCard,
+  VaultInputModal,
+  VaultDeleteDialog,
+  VaultEmptyState,
+  SecretsManager,
+
   // Components
   SignInButton,
   SignOutButton,
@@ -79,6 +90,8 @@ import {
   // Hooks
   useAuth,
   useWidgetToken,
+  useVault,
+  useVaultContext,
 
   // Schemas
   AuthUserSchema,
@@ -92,6 +105,9 @@ import type {
   AuthSession,
   AuthOrganization,
   AuthToken,
+  VaultClient,
+  VaultItem,
+  VaultField,
 } from '@mdxui/auth'
 ```
 
@@ -291,6 +307,117 @@ function ApiKeysWidget() {
 }
 ```
 
+## Vault Components
+
+@mdxui/auth includes components for managing encrypted secrets via WorkOS Vault.
+
+### VaultProvider
+
+Wrap your app with `VaultProvider` to enable vault functionality:
+
+```tsx
+import { VaultProvider, useVault } from '@mdxui/auth'
+
+function App() {
+  const vaultClient = useMyVaultClient() // Your vault client implementation
+
+  return (
+    <VaultProvider client={vaultClient}>
+      <SecretsPage />
+    </VaultProvider>
+  )
+}
+```
+
+### useVault Hook
+
+Access vault state and operations:
+
+```tsx
+function SecretsPage() {
+  const {
+    items,        // Array of vault items
+    isLoading,    // Loading state
+    error,        // Error message if any
+    createItem,   // Create new secret
+    updateItem,   // Update existing secret
+    deleteItem,   // Delete a secret
+    refresh,      // Refresh the list
+  } = useVault()
+
+  return <VaultList items={items} onRefresh={refresh} />
+}
+```
+
+### Vault UI Components
+
+Pre-built components for secrets management:
+
+```tsx
+import {
+  VaultList,
+  VaultItemCard,
+  VaultInputModal,
+  VaultDeleteDialog,
+  VaultEmptyState,
+} from '@mdxui/auth'
+
+function SecretsManager() {
+  const { items, isLoading, createItem, deleteItem } = useVault()
+  const [showCreate, setShowCreate] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState(null)
+
+  if (isLoading) return <Spinner />
+  if (items.length === 0) return <VaultEmptyState onCreate={() => setShowCreate(true)} />
+
+  return (
+    <>
+      <VaultList
+        items={items}
+        onItemClick={(item) => console.log('View', item)}
+        onItemDelete={(item) => setDeleteTarget(item)}
+      />
+
+      <VaultInputModal
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        onSubmit={async (data) => {
+          await createItem(data)
+          setShowCreate(false)
+        }}
+      />
+
+      <VaultDeleteDialog
+        open={!!deleteTarget}
+        item={deleteTarget}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={async () => {
+          await deleteItem(deleteTarget.id)
+          setDeleteTarget(null)
+        }}
+      />
+    </>
+  )
+}
+```
+
+### SecretsManager Widget
+
+A complete, ready-to-use secrets management interface:
+
+```tsx
+import { SecretsManager } from '@mdxui/auth'
+
+function SettingsPage() {
+  return (
+    <SecretsManager
+      context={{ organizationId: 'org_123' }}
+      onSecretChange={(secret) => console.log('Changed:', secret)}
+    />
+  )
+}
+```
+
 ## API Reference
 
 ### Schemas

package/dist/{auth-Ba2f778e.d.ts → auth-maeYSYU_.d.ts}

@@ -46,7 +46,7 @@ interface AuthGateProps {
     /** Component to show when not authenticated (landing page) */
     landingComponent?: ReactNode;
     /** What to do when unauthenticated */
-    onUnauthenticated?: 'landing' | 'redirect' | 'allow';
+    onUnauthenticated?: 'landing' | 'redirect' | 'allow' | 'signIn';
     /** URL to redirect to when unauthenticated (if onUnauthenticated is 'redirect') */
     redirectUrl?: string;
 }
@@ -54,6 +54,9 @@ interface AuthGateProps {
  * Props for WidgetsProvider
  *
  * Extends the schema type with React-specific fields.
+ *
+ * Note: Widgets always use api.workos.com - WorkOS custom domains do NOT
+ * support widget endpoints. Only authentication uses custom domains.
  */
 interface WidgetsProviderProps {
     /** Children to render */

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { useAuth } from '@workos-inc/authkit-react';
-import { U as UseWidgetTokenOptions, b as UseWidgetTokenResult } from '../auth-Ba2f778e.js';
+import { U as UseWidgetTokenOptions, b as UseWidgetTokenResult } from '../auth-maeYSYU_.js';
+import { V as VaultItem, a as VaultField } from '../types-8tixck1H.js';
 import 'react';
 
 /**
@@ -39,4 +40,93 @@ import 'react';
  */
 declare function useWidgetToken({ widget, organizationId, endpoint, }: UseWidgetTokenOptions): UseWidgetTokenResult;
 
-export { useWidgetToken };
+/**
+ * Result from useVault hook
+ */
+interface UseVaultResult {
+    /** List of vault items */
+    items: VaultItem[];
+    /** Whether the vault is loading */
+    loading: boolean;
+    /** Error message if any */
+    error: string | null;
+    /** Whether a vault client is connected */
+    isConnected: boolean;
+    /** Reload vault items from the backend */
+    reload: () => Promise<void>;
+    /** Create a new vault item */
+    create: (integrationId: string, credentials: Record<string, string>) => Promise<void>;
+    /** Rotate credentials for an existing item */
+    rotate: (id: string, credentials: Record<string, string>) => Promise<void>;
+    /** Delete a vault item */
+    remove: (id: string) => Promise<void>;
+    /** Get field configuration for an integration */
+    getIntegrationFields: (integrationId: string) => VaultField[];
+    /** Find an item by ID */
+    findItem: (id: string) => VaultItem | undefined;
+    /** Find items by integration ID */
+    findByIntegration: (integrationId: string) => VaultItem[];
+}
+/**
+ * Hook to access vault state and operations
+ *
+ * Provides access to the vault context with helper methods for
+ * common operations like finding items and managing credentials.
+ *
+ * Must be used within a VaultProvider.
+ *
+ * @example
+ * ```tsx
+ * import { useVault } from '@mdxui/auth'
+ *
+ * function VaultDashboard() {
+ *   const {
+ *     items,
+ *     loading,
+ *     create,
+ *     rotate,
+ *     remove,
+ *     findByIntegration,
+ *   } = useVault()
+ *
+ *   const openaiItems = findByIntegration('openai')
+ *
+ *   const handleCreate = async () => {
+ *     await create('github', { personal_access_token: 'ghp_...' })
+ *   }
+ *
+ *   if (loading) return <div>Loading...</div>
+ *
+ *   return (
+ *     <ul>
+ *       {items.map(item => (
+ *         <li key={item.id}>{item.name}</li>
+ *       ))}
+ *     </ul>
+ *   )
+ * }
+ * ```
+ */
+declare function useVault(): UseVaultResult;
+/**
+ * Optional vault hook that returns null if not within a VaultProvider
+ *
+ * Useful for components that can optionally integrate with the vault
+ * when it's available.
+ *
+ * @example
+ * ```tsx
+ * function MaybeVaultComponent() {
+ *   const vault = useVaultOptional()
+ *
+ *   if (!vault) {
+ *     return <div>Vault not available</div>
+ *   }
+ *
+ *   return <VaultList items={vault.items} ... />
+ * }
+ * ```
+ */
+declare function useVaultOptional(): UseVaultResult | null;
+
+export { type UseVaultResult, useVault, useVaultOptional, useWidgetToken };

package/dist/hooks/index.js

@@ -36,8 +36,92 @@ function useWidgetToken({
   }, [fetchToken]);
   return { token, loading, error, refetch: fetchToken };
 }
+
+// src/hooks/use-vault.ts
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+
+// src/providers/vault-provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var VaultContext = createContext(null);
+function useVaultContext() {
+  const context = useContext(VaultContext);
+  if (!context) {
+    throw new Error("useVaultContext must be used within a VaultProvider");
+  }
+  return context;
+}
+function useVaultContextOptional() {
+  return useContext(VaultContext);
+}
+
+// src/hooks/use-vault.ts
+function useVault() {
+  const context = useVaultContext();
+  const findItem = useCallback2(
+    (id) => {
+      return context.items.find((item) => item.id === id);
+    },
+    [context.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context.items.filter((item) => item.integrationId === integrationId);
+    },
+    [context.items]
+  );
+  return useMemo2(
+    () => ({
+      items: context.items,
+      loading: context.loading,
+      error: context.error,
+      isConnected: context.client !== null,
+      reload: context.reload,
+      create: context.createItem,
+      rotate: context.rotateItem,
+      remove: context.deleteItem,
+      getIntegrationFields: context.getIntegrationFields,
+      findItem,
+      findByIntegration
+    }),
+    [context, findItem, findByIntegration]
+  );
+}
+function useVaultOptional() {
+  const context = useVaultContextOptional();
+  const findItem = useCallback2(
+    (id) => {
+      return context?.items.find((item) => item.id === id);
+    },
+    [context?.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context?.items.filter((item) => item.integrationId === integrationId) ?? [];
+    },
+    [context?.items]
+  );
+  if (!context) {
+    return null;
+  }
+  return {
+    items: context.items,
+    loading: context.loading,
+    error: context.error,
+    isConnected: context.client !== null,
+    reload: context.reload,
+    create: context.createItem,
+    rotate: context.rotateItem,
+    remove: context.deleteItem,
+    getIntegrationFields: context.getIntegrationFields,
+    findItem,
+    findByIntegration
+  };
+}
 export {
   useAuth,
+  useVault,
+  useVaultOptional,
   useWidgetToken
 };
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-auth.ts","../../src/hooks/use-widget-token.ts"],"sourcesContent":["'use client'\n\n/**\n * Re-export useAuth from WorkOS AuthKit\n *\n * This hook provides access to the authentication state and methods:\n * - user: The authenticated user object\n * - isLoading: Whether auth state is being loaded\n * - signIn: Function to initiate sign in\n * - signOut: Function to sign out\n * - getAccessToken: Function to get the current access token\n * - organizationId: Current organization ID (if in org context)\n * - permissions: User's permissions array\n *\n * @example\n * ```tsx\n * import { useAuth } from '@mdxui/auth'\n *\n * function MyComponent() {\n *   const { user, isLoading, signIn, signOut, getAccessToken } = useAuth()\n *\n *   if (isLoading) return <div>Loading...</div>\n *   if (!user) return <button onClick={() => signIn()}>Sign In</button>\n *\n *   return (\n *     <div>\n *       <p>Hello, {user.firstName}!</p>\n *       <button onClick={() => signOut()}>Sign Out</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport { useAuth } from '@workos-inc/authkit-react'\n","'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { UseWidgetTokenOptions, UseWidgetTokenResult } from '../types/auth'\n\n/**\n * Hook to fetch authorization tokens for WorkOS widgets\n *\n * Use this hook when you need to fetch widget tokens from a backend endpoint,\n * typically for server-side auth scenarios. For client-side AuthKit usage,\n * you can use `getAccessToken` from `useAuth()` directly with widgets.\n *\n * @param options - Options for token fetching\n * @param options.widget - The widget type (user-profile, user-security, api-keys, etc.)\n * @param options.organizationId - Optional organization context\n * @param options.endpoint - Custom endpoint (default: /api/workos/widget-token)\n * @returns Token state and refetch function\n *\n * @example\n * ```tsx\n * // Server-side token fetching (via backend endpoint)\n * const { token, loading, error } = useWidgetToken({\n *   widget: 'user-profile',\n * })\n *\n * if (loading) return <Spinner />\n * if (error) return <Error message={error} />\n * return <UserProfile authToken={token!} />\n * ```\n *\n * @example\n * ```tsx\n * // Client-side AuthKit (recommended - no backend needed)\n * import { useAuth } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * const { getAccessToken } = useAuth()\n * return <UserProfile authToken={getAccessToken} />\n * ```\n */\nexport function useWidgetToken({\n  widget,\n  organizationId,\n  endpoint = '/api/workos/widget-token',\n}: UseWidgetTokenOptions): UseWidgetTokenResult {\n  const [token, setToken] = useState<string | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  const fetchToken = useCallback(async () => {\n    try {\n      setLoading(true)\n      setError(null)\n\n      const params = new URLSearchParams({ widget })\n      if (organizationId) {\n        params.set('organizationId', organizationId)\n      }\n\n      const response = await fetch(`${endpoint}?${params}`)\n      const data = await response.json()\n\n      if (!response.ok) {\n        throw new Error(data.error || 'Failed to fetch token')\n      }\n\n      setToken(data.token)\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Token fetch failed')\n    } finally {\n      setLoading(false)\n    }\n  }, [widget, organizationId, endpoint])\n\n  useEffect(() => {\n    fetchToken()\n  }, [fetchToken])\n\n  return { token, loading, error, refetch: fetchToken }\n}\n"],"mappings":";AAiCA,SAAS,eAAe;;;AC/BxB,SAAS,aAAa,WAAW,gBAAgB;AAsC1C,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAgD;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,aAAa,YAAY,YAAY;AACzC,QAAI;AACF,iBAAW,IAAI;AACf,eAAS,IAAI;AAEb,YAAM,SAAS,IAAI,gBAAgB,EAAE,OAAO,CAAC;AAC7C,UAAI,gBAAgB;AAClB,eAAO,IAAI,kBAAkB,cAAc;AAAA,MAC7C;AAEA,YAAM,WAAW,MAAM,MAAM,GAAG,QAAQ,IAAI,MAAM,EAAE;AACpD,YAAM,OAAO,MAAM,SAAS,KAAK;AAEjC,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,KAAK,SAAS,uBAAuB;AAAA,MACvD;AAEA,eAAS,KAAK,KAAK;AAAA,IACrB,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,oBAAoB;AAAA,IACpE,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,QAAQ,CAAC;AAErC,YAAU,MAAM;AACd,eAAW;AAAA,EACb,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,OAAO,SAAS,OAAO,SAAS,WAAW;AACtD;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-auth.ts","../../src/hooks/use-widget-token.ts","../../src/hooks/use-vault.ts","../../src/providers/vault-provider.tsx"],"sourcesContent":["'use client'\n\n/**\n * Re-export useAuth from WorkOS AuthKit\n *\n * This hook provides access to the authentication state and methods:\n * - user: The authenticated user object\n * - isLoading: Whether auth state is being loaded\n * - signIn: Function to initiate sign in\n * - signOut: Function to sign out\n * - getAccessToken: Function to get the current access token\n * - organizationId: Current organization ID (if in org context)\n * - permissions: User's permissions array\n *\n * @example\n * ```tsx\n * import { useAuth } from '@mdxui/auth'\n *\n * function MyComponent() {\n *   const { user, isLoading, signIn, signOut, getAccessToken } = useAuth()\n *\n *   if (isLoading) return <div>Loading...</div>\n *   if (!user) return <button onClick={() => signIn()}>Sign In</button>\n *\n *   return (\n *     <div>\n *       <p>Hello, {user.firstName}!</p>\n *       <button onClick={() => signOut()}>Sign Out</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport { useAuth } from '@workos-inc/authkit-react'\n","'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { UseWidgetTokenOptions, UseWidgetTokenResult } from '../types/auth'\n\n/**\n * Hook to fetch authorization tokens for WorkOS widgets\n *\n * Use this hook when you need to fetch widget tokens from a backend endpoint,\n * typically for server-side auth scenarios. For client-side AuthKit usage,\n * you can use `getAccessToken` from `useAuth()` directly with widgets.\n *\n * @param options - Options for token fetching\n * @param options.widget - The widget type (user-profile, user-security, api-keys, etc.)\n * @param options.organizationId - Optional organization context\n * @param options.endpoint - Custom endpoint (default: /api/workos/widget-token)\n * @returns Token state and refetch function\n *\n * @example\n * ```tsx\n * // Server-side token fetching (via backend endpoint)\n * const { token, loading, error } = useWidgetToken({\n *   widget: 'user-profile',\n * })\n *\n * if (loading) return <Spinner />\n * if (error) return <Error message={error} />\n * return <UserProfile authToken={token!} />\n * ```\n *\n * @example\n * ```tsx\n * // Client-side AuthKit (recommended - no backend needed)\n * import { useAuth } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * const { getAccessToken } = useAuth()\n * return <UserProfile authToken={getAccessToken} />\n * ```\n */\nexport function useWidgetToken({\n  widget,\n  organizationId,\n  endpoint = '/api/workos/widget-token',\n}: UseWidgetTokenOptions): UseWidgetTokenResult {\n  const [token, setToken] = useState<string | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  const fetchToken = useCallback(async () => {\n    try {\n      setLoading(true)\n      setError(null)\n\n      const params = new URLSearchParams({ widget })\n      if (organizationId) {\n        params.set('organizationId', organizationId)\n      }\n\n      const response = await fetch(`${endpoint}?${params}`)\n      const data = await response.json()\n\n      if (!response.ok) {\n        throw new Error(data.error || 'Failed to fetch token')\n      }\n\n      setToken(data.token)\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Token fetch failed')\n    } finally {\n      setLoading(false)\n    }\n  }, [widget, organizationId, endpoint])\n\n  useEffect(() => {\n    fetchToken()\n  }, [fetchToken])\n\n  return { token, loading, error, refetch: fetchToken }\n}\n","'use client'\n\nimport { useCallback, useMemo } from 'react'\nimport { useVaultContext, useVaultContextOptional } from '../providers/vault-provider'\nimport type { VaultItem, VaultField } from '../vault/types'\n\n/**\n * Result from useVault hook\n */\nexport interface UseVaultResult {\n  /** List of vault items */\n  items: VaultItem[]\n  /** Whether the vault is loading */\n  loading: boolean\n  /** Error message if any */\n  error: string | null\n  /** Whether a vault client is connected */\n  isConnected: boolean\n  /** Reload vault items from the backend */\n  reload: () => Promise<void>\n  /** Create a new vault item */\n  create: (integrationId: string, credentials: Record<string, string>) => Promise<void>\n  /** Rotate credentials for an existing item */\n  rotate: (id: string, credentials: Record<string, string>) => Promise<void>\n  /** Delete a vault item */\n  remove: (id: string) => Promise<void>\n  /** Get field configuration for an integration */\n  getIntegrationFields: (integrationId: string) => VaultField[]\n  /** Find an item by ID */\n  findItem: (id: string) => VaultItem | undefined\n  /** Find items by integration ID */\n  findByIntegration: (integrationId: string) => VaultItem[]\n}\n\n/**\n * Hook to access vault state and operations\n *\n * Provides access to the vault context with helper methods for\n * common operations like finding items and managing credentials.\n *\n * Must be used within a VaultProvider.\n *\n * @example\n * ```tsx\n * import { useVault } from '@mdxui/auth'\n *\n * function VaultDashboard() {\n *   const {\n *     items,\n *     loading,\n *     create,\n *     rotate,\n *     remove,\n *     findByIntegration,\n *   } = useVault()\n *\n *   const openaiItems = findByIntegration('openai')\n *\n *   const handleCreate = async () => {\n *     await create('github', { personal_access_token: 'ghp_...' })\n *   }\n *\n *   if (loading) return <div>Loading...</div>\n *\n *   return (\n *     <ul>\n *       {items.map(item => (\n *         <li key={item.id}>{item.name}</li>\n *       ))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useVault(): UseVaultResult {\n  const context = useVaultContext()\n\n  const findItem = useCallback(\n    (id: string): VaultItem | undefined => {\n      return context.items.find((item) => item.id === id)\n    },\n    [context.items]\n  )\n\n  const findByIntegration = useCallback(\n    (integrationId: string): VaultItem[] => {\n      return context.items.filter((item) => item.integrationId === integrationId)\n    },\n    [context.items]\n  )\n\n  return useMemo(\n    () => ({\n      items: context.items,\n      loading: context.loading,\n      error: context.error,\n      isConnected: context.client !== null,\n      reload: context.reload,\n      create: context.createItem,\n      rotate: context.rotateItem,\n      remove: context.deleteItem,\n      getIntegrationFields: context.getIntegrationFields,\n      findItem,\n      findByIntegration,\n    }),\n    [context, findItem, findByIntegration]\n  )\n}\n\n/**\n * Optional vault hook that returns null if not within a VaultProvider\n *\n * Useful for components that can optionally integrate with the vault\n * when it's available.\n *\n * @example\n * ```tsx\n * function MaybeVaultComponent() {\n *   const vault = useVaultOptional()\n *\n *   if (!vault) {\n *     return <div>Vault not available</div>\n *   }\n *\n *   return <VaultList items={vault.items} ... />\n * }\n * ```\n */\nexport function useVaultOptional(): UseVaultResult | null {\n  const context = useVaultContextOptional()\n\n  const findItem = useCallback(\n    (id: string): VaultItem | undefined => {\n      return context?.items.find((item) => item.id === id)\n    },\n    [context?.items]\n  )\n\n  const findByIntegration = useCallback(\n    (integrationId: string): VaultItem[] => {\n      return context?.items.filter((item) => item.integrationId === integrationId) ?? []\n    },\n    [context?.items]\n  )\n\n  if (!context) {\n    return null\n  }\n\n  return {\n    items: context.items,\n    loading: context.loading,\n    error: context.error,\n    isConnected: context.client !== null,\n    reload: context.reload,\n    create: context.createItem,\n    rotate: context.rotateItem,\n    remove: context.deleteItem,\n    getIntegrationFields: context.getIntegrationFields,\n    findItem,\n    findByIntegration,\n  }\n}\n","'use client'\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport type { VaultItem, VaultField } from '../vault/types'\n\n/**\n * Vault client interface\n *\n * Defines the contract for a vault backend. The actual implementation\n * can be provided by vault.do SDK or any other vault service.\n */\nexport interface VaultClient {\n  /** List all vault items */\n  list: () => Promise<VaultItem[]>\n  /** Create a new vault item */\n  create: (integrationId: string, credentials: Record<string, string>) => Promise<VaultItem>\n  /** Rotate credentials for an existing vault item */\n  rotate: (id: string, credentials: Record<string, string>) => Promise<VaultItem>\n  /** Delete a vault item */\n  delete: (id: string) => Promise<void>\n  /** Get field configuration for an integration */\n  getIntegrationFields?: (integrationId: string) => VaultField[]\n}\n\n/**\n * Vault context state\n */\nexport interface VaultContextState {\n  /** The vault client instance */\n  client: VaultClient | null\n  /** Vault items currently loaded */\n  items: VaultItem[]\n  /** Whether the vault is currently loading */\n  loading: boolean\n  /** Error message if vault operations failed */\n  error: string | null\n  /** Reload vault items */\n  reload: () => Promise<void>\n  /** Create a new vault item */\n  createItem: (integrationId: string, credentials: Record<string, string>) => Promise<void>\n  /** Rotate credentials for an existing item */\n  rotateItem: (id: string, credentials: Record<string, string>) => Promise<void>\n  /** Delete a vault item */\n  deleteItem: (id: string) => Promise<void>\n  /** Get field configuration for an integration */\n  getIntegrationFields: (integrationId: string) => VaultField[]\n}\n\nconst VaultContext = createContext<VaultContextState | null>(null)\n\n/**\n * Props for VaultProvider\n */\nexport interface VaultProviderProps {\n  /** Children to render */\n  children: ReactNode\n  /** Optional vault client implementation */\n  client?: VaultClient\n  /** Initial items to display (for SSR or static rendering) */\n  initialItems?: VaultItem[]\n}\n\n/**\n * Default fields for unknown integrations\n */\nconst defaultFields: VaultField[] = [\n  { key: 'api_key', label: 'API Key', type: 'password', required: true }\n]\n\n/**\n * Provider for vault state and operations\n *\n * Provides context for vault components to access the vault client\n * and perform CRUD operations on credentials.\n *\n * The actual vault.do SDK integration will be done in vault.do/react.\n * This provider is designed to be a generic wrapper that can work\n * with any vault backend implementation.\n *\n * @example\n * ```tsx\n * import { VaultProvider } from '@mdxui/auth'\n *\n * // Basic usage with a custom client\n * function App() {\n *   return (\n *     <VaultProvider client={myVaultClient}>\n *       <VaultDashboard />\n *     </VaultProvider>\n *   )\n * }\n *\n * // Static/SSR usage with initial items\n * function App() {\n *   return (\n *     <VaultProvider initialItems={serverSideItems}>\n *       <VaultDashboard />\n *     </VaultProvider>\n *   )\n * }\n * ```\n */\nexport function VaultProvider({\n  children,\n  client,\n  initialItems = [],\n}: VaultProviderProps) {\n  // Note: In a real implementation, this would use useState and useEffect\n  // to manage state and load items from the client. For now, we provide\n  // a basic structure that the vault.do SDK can extend.\n\n  const contextValue = useMemo<VaultContextState>(() => {\n    const getIntegrationFields = (integrationId: string): VaultField[] => {\n      if (client?.getIntegrationFields) {\n        return client.getIntegrationFields(integrationId)\n      }\n      return defaultFields\n    }\n\n    return {\n      client: client ?? null,\n      items: initialItems,\n      loading: false,\n      error: null,\n      reload: async () => {\n        if (!client) {\n          console.warn('VaultProvider: No client provided, cannot reload')\n          return\n        }\n        // Implementation would update state here\n        await client.list()\n      },\n      createItem: async (integrationId, credentials) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.create(integrationId, credentials)\n      },\n      rotateItem: async (id, credentials) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.rotate(id, credentials)\n      },\n      deleteItem: async (id) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.delete(id)\n      },\n      getIntegrationFields,\n    }\n  }, [client, initialItems])\n\n  return (\n    <VaultContext.Provider value={contextValue}>\n      {children}\n    </VaultContext.Provider>\n  )\n}\n\n/**\n * Hook to access vault context\n *\n * Must be used within a VaultProvider.\n *\n * @throws Error if used outside of VaultProvider\n */\nexport function useVaultContext(): VaultContextState {\n  const context = useContext(VaultContext)\n  if (!context) {\n    throw new Error('useVaultContext must be used within a VaultProvider')\n  }\n  return context\n}\n\n/**\n * Hook to optionally access vault context\n *\n * Returns null if not within a VaultProvider.\n */\nexport function useVaultContextOptional(): VaultContextState | null {\n  return useContext(VaultContext)\n}\n"],"mappings":"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","names":["useCallback","useMemo","useCallback","useMemo"]}

package/dist/{index-Bl4BwORF.d.ts → index-BOMpMKyG.d.ts}

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { I as IdentityProviderProps, A as AuthGateProps, W as WidgetsProviderProps } from './auth-Ba2f778e.js';
+import { I as IdentityProviderProps, A as AuthGateProps, W as WidgetsProviderProps } from './auth-maeYSYU_.js';
+import { ReactNode } from 'react';
+import { V as VaultItem, a as VaultField } from './types-8tixck1H.js';
 
 /**
  * Identity provider that wraps your app with WorkOS AuthKit authentication.
@@ -156,4 +158,105 @@ declare function useThemeDetection(): {
  */
 declare function WidgetsProvider({ children, appearance, radius, scaling, }: WidgetsProviderProps): react_jsx_runtime.JSX.Element;
 
-export { AuthGate as A, IdentityProvider as I, WidgetsProvider as W, IdentityProviderMinimal as a, useThemeDetection as u };
+/**
+ * Vault client interface
+ *
+ * Defines the contract for a vault backend. The actual implementation
+ * can be provided by vault.do SDK or any other vault service.
+ */
+interface VaultClient {
+    /** List all vault items */
+    list: () => Promise<VaultItem[]>;
+    /** Create a new vault item */
+    create: (integrationId: string, credentials: Record<string, string>) => Promise<VaultItem>;
+    /** Rotate credentials for an existing vault item */
+    rotate: (id: string, credentials: Record<string, string>) => Promise<VaultItem>;
+    /** Delete a vault item */
+    delete: (id: string) => Promise<void>;
+    /** Get field configuration for an integration */
+    getIntegrationFields?: (integrationId: string) => VaultField[];
+}
+/**
+ * Vault context state
+ */
+interface VaultContextState {
+    /** The vault client instance */
+    client: VaultClient | null;
+    /** Vault items currently loaded */
+    items: VaultItem[];
+    /** Whether the vault is currently loading */
+    loading: boolean;
+    /** Error message if vault operations failed */
+    error: string | null;
+    /** Reload vault items */
+    reload: () => Promise<void>;
+    /** Create a new vault item */
+    createItem: (integrationId: string, credentials: Record<string, string>) => Promise<void>;
+    /** Rotate credentials for an existing item */
+    rotateItem: (id: string, credentials: Record<string, string>) => Promise<void>;
+    /** Delete a vault item */
+    deleteItem: (id: string) => Promise<void>;
+    /** Get field configuration for an integration */
+    getIntegrationFields: (integrationId: string) => VaultField[];
+}
+/**
+ * Props for VaultProvider
+ */
+interface VaultProviderProps {
+    /** Children to render */
+    children: ReactNode;
+    /** Optional vault client implementation */
+    client?: VaultClient;
+    /** Initial items to display (for SSR or static rendering) */
+    initialItems?: VaultItem[];
+}
+/**
+ * Provider for vault state and operations
+ *
+ * Provides context for vault components to access the vault client
+ * and perform CRUD operations on credentials.
+ *
+ * The actual vault.do SDK integration will be done in vault.do/react.
+ * This provider is designed to be a generic wrapper that can work
+ * with any vault backend implementation.
+ *
+ * @example
+ * ```tsx
+ * import { VaultProvider } from '@mdxui/auth'
+ *
+ * // Basic usage with a custom client
+ * function App() {
+ *   return (
+ *     <VaultProvider client={myVaultClient}>
+ *       <VaultDashboard />
+ *     </VaultProvider>
+ *   )
+ * }
+ *
+ * // Static/SSR usage with initial items
+ * function App() {
+ *   return (
+ *     <VaultProvider initialItems={serverSideItems}>
+ *       <VaultDashboard />
+ *     </VaultProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function VaultProvider({ children, client, initialItems, }: VaultProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access vault context
+ *
+ * Must be used within a VaultProvider.
+ *
+ * @throws Error if used outside of VaultProvider
+ */
+declare function useVaultContext(): VaultContextState;
+/**
+ * Hook to optionally access vault context
+ *
+ * Returns null if not within a VaultProvider.
+ */
+declare function useVaultContextOptional(): VaultContextState | null;
+
+export { AuthGate as A, IdentityProvider as I, VaultProvider as V, WidgetsProvider as W, IdentityProviderMinimal as a, useVaultContext as b, useVaultContextOptional as c, type VaultClient as d, type VaultContextState as e, type VaultProviderProps as f, useThemeDetection as u };

package/dist/index.d.ts

@@ -1,12 +1,17 @@
-export { A as AuthGate, I as IdentityProvider, a as IdentityProviderMinimal, W as WidgetsProvider, u as useThemeDetection } from './index-Bl4BwORF.js';
+export { A as AuthGate, I as IdentityProvider, a as IdentityProviderMinimal, d as VaultClient, e as VaultContextState, V as VaultProvider, f as VaultProviderProps, W as WidgetsProvider, u as useThemeDetection, b as useVaultContext, c as useVaultContextOptional } from './index-BOMpMKyG.js';
 export { ApiKeys, OrganizationSwitcher, Pipes, UserProfile, UserSecurity, UserSessions, UsersManagement } from './widgets/index.js';
+export { Secret, SecretForm, SecretsManager, SecretsManagerProps, VaultDeleteDialog, VaultEmptyState, VaultInputModal, VaultItemCard, VaultList } from './vault/index.js';
+export { f as VaultDeleteDialogProps, g as VaultEmptyStateProps, a as VaultField, e as VaultInputModalProps, b as VaultIntegration, V as VaultItem, d as VaultItemCardProps, c as VaultListProps } from './types-8tixck1H.js';
 export { SignInButton, SignOutButton, TeamSwitcher, UserMenu } from './components/index.js';
 export { useAuth } from '@workos-inc/authkit-react';
-export { useWidgetToken } from './hooks/index.js';
-export { A as AuthGateProps, a as AuthToken, B as BaseWidgetProps, I as IdentityProviderProps, O as OrganizationWidgetProps, U as UseWidgetTokenOptions, b as UseWidgetTokenResult, W as WidgetsProviderProps } from './auth-Ba2f778e.js';
+export { UseVaultResult, useVault, useVaultOptional, useWidgetToken } from './hooks/index.js';
+export { A as AuthGateProps, a as AuthToken, B as BaseWidgetProps, I as IdentityProviderProps, O as OrganizationWidgetProps, U as UseWidgetTokenOptions, b as UseWidgetTokenResult, W as WidgetsProviderProps } from './auth-maeYSYU_.js';
 export { a as AuthOrganization, e as AuthOrganizationSchema, b as AuthSession, d as AuthSessionSchema, A as AuthUser, c as AuthUserSchema, I as Impersonator, f as ImpersonatorSchema } from './auth-organization-CN1WpGnL.js';
 export { AppearanceSchema, AuthGatePropsSchema, AuthTokenSchema, BaseWidgetPropsSchema, IdentityProviderPropsSchema, OrganizationWidgetPropsSchema, RadiusSchema, ScalingSchema, UnauthenticatedActionSchema, UseWidgetTokenOptionsSchema, UseWidgetTokenResultSchema, WidgetsProviderPropsSchema } from './schemas/index.js';
+export { ApiKeysPage, AuthApp, AuthAppConfig, AuthAppProps, AuthAppProvider, AuthAppRoute, AuthAppWithChildren, AuthShell, AuthShellBranding, AuthShellConfigProvider, AuthShellIdentity, AuthShellNav, AuthShellNavProps, AuthShellProps, BreadcrumbItemConfig, BreadcrumbLinkProps, Breadcrumbs, BreadcrumbsProps, IntegrationsPage, ProfilePage, SecurityPage, SessionsPage, SidebarOrgSwitcher, TeamPage, WidgetErrorBoundary, accountRoutes, adminRoutes, defaultGroups, defaultRoutes, developerRoutes, getEnvConfig, integrationRoutes, mergeWithEnvConfig, useAuthShellBranding, useAuthShellConfig, useAuthShellFullPath, useAuthShellRoutes, useAuthShellRoutesByGroup } from './shell/index.js';
+export { AuthShellConfig, ProtectedRoute, RouteGroup, ThemeMode } from 'mdxui';
 import 'react/jsx-runtime';
 import 'react';
 import 'zod/v4/core';
 import 'zod';
+import 'lucide-react';