@hanzo/iam 0.4.1 → 0.5.0

package/src/react.ts

@@ -46,7 +46,7 @@ import type { ReactNode } from "react";
 import { BrowserIamSdk } from "./browser.js";
 import type { BrowserIamConfig } from "./browser.js";
 import { IamClient } from "./client.js";
-import type { IamUser, IamOrganization, IamProject, TokenResponse } from "./types.js";
+import type { IamUser, IamOrganization, IamInvitation, IamProject, TokenResponse } from "./types.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -589,6 +589,200 @@ export function useIamToken(): {
   };
 }
 
+// ---------------------------------------------------------------------------
+// useOrgManagement
+// ---------------------------------------------------------------------------
+
+export interface OrgManagementState {
+  /** Create a new organization. */
+  createOrg: (org: Partial<IamOrganization>) => Promise<void>;
+  /** Update an existing organization. */
+  updateOrg: (org: Partial<IamOrganization>) => Promise<void>;
+  /** Delete an organization by owner and name. */
+  deleteOrg: (org: { owner: string; name: string }) => Promise<void>;
+  /** Whether a mutation is in progress. */
+  isLoading: boolean;
+}
+
+/**
+ * Manage organization CRUD operations.
+ *
+ * Provides create, update, and delete methods that call the IAM API
+ * using the current user's access token.
+ */
+export function useOrgManagement(): OrgManagementState {
+  const { config, accessToken } = useIam();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const client = useMemo(
+    () =>
+      new IamClient({
+        serverUrl: config.serverUrl,
+        clientId: config.clientId,
+      }),
+    [config.serverUrl, config.clientId],
+  );
+
+  const createOrg = useCallback(
+    async (org: Partial<IamOrganization>) => {
+      setIsLoading(true);
+      try {
+        await client.createOrganization(org, accessToken ?? undefined);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken],
+  );
+
+  const updateOrg = useCallback(
+    async (org: Partial<IamOrganization>) => {
+      setIsLoading(true);
+      try {
+        await client.updateOrganization(org, accessToken ?? undefined);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken],
+  );
+
+  const deleteOrg = useCallback(
+    async (org: { owner: string; name: string }) => {
+      setIsLoading(true);
+      try {
+        await client.deleteOrganization(org, accessToken ?? undefined);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken],
+  );
+
+  return { createOrg, updateOrg, deleteOrg, isLoading };
+}
+
+// ---------------------------------------------------------------------------
+// useInvitations
+// ---------------------------------------------------------------------------
+
+export interface InvitationsState {
+  /** All invitations for the organization. */
+  invitations: IamInvitation[];
+  /** Create a new invitation. */
+  createInvite: (invitation: Partial<IamInvitation>) => Promise<void>;
+  /** Send an existing invitation. */
+  sendInvite: (invitation: { owner: string; name: string }) => Promise<void>;
+  /** Verify an invitation code. */
+  verifyInvite: (code: string) => Promise<IamInvitation | null>;
+  /** Whether invitations are loading. */
+  isLoading: boolean;
+  /** Re-fetch the invitations list. */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Manage invitations for an organization.
+ *
+ * Fetches the invitation list on mount and provides create, send,
+ * and verify methods using the current user's access token.
+ */
+export function useInvitations(orgName: string): InvitationsState {
+  const { config, accessToken, isAuthenticated } = useIam();
+  const [invitations, setInvitations] = useState<IamInvitation[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const client = useMemo(
+    () =>
+      new IamClient({
+        serverUrl: config.serverUrl,
+        clientId: config.clientId,
+      }),
+    [config.serverUrl, config.clientId],
+  );
+
+  const fetchInvitations = useCallback(async () => {
+    if (!isAuthenticated || !accessToken || !orgName) return;
+    setIsLoading(true);
+    try {
+      const data = await client.getInvitations(orgName, accessToken);
+      setInvitations(data);
+    } catch {
+      setInvitations([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, orgName, accessToken, isAuthenticated]);
+
+  // Fetch invitations on mount and when orgName changes
+  useEffect(() => {
+    if (!isAuthenticated || !accessToken || !orgName) {
+      setInvitations([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
+      setIsLoading(true);
+      try {
+        const data = await client.getInvitations(orgName, accessToken);
+        if (!cancelled) setInvitations(data);
+      } catch {
+        if (!cancelled) setInvitations([]);
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated, accessToken, orgName, config.serverUrl, config.clientId]);
+
+  const createInvite = useCallback(
+    async (invitation: Partial<IamInvitation>) => {
+      setIsLoading(true);
+      try {
+        await client.createInvitation(invitation, accessToken ?? undefined);
+        await fetchInvitations();
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken, fetchInvitations],
+  );
+
+  const sendInvite = useCallback(
+    async (invitation: { owner: string; name: string }) => {
+      setIsLoading(true);
+      try {
+        await client.sendInvitation(invitation, accessToken ?? undefined);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken],
+  );
+
+  const verifyInvite = useCallback(
+    async (code: string): Promise<IamInvitation | null> => {
+      setIsLoading(true);
+      try {
+        const resp = await client.verifyInvitation(code, accessToken ?? undefined);
+        return resp.data ?? null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, accessToken],
+  );
+
+  return { invitations, createInvite, sendInvite, verifyInvite, isLoading, refresh: fetchInvitations };
+}
+
 // Re-export context for advanced use
 export { IamContext };
 
@@ -717,3 +911,403 @@ export function OrgProjectSwitcher({
       : null,
   );
 }
+
+// ---------------------------------------------------------------------------
+// UserOrgMenu — shared org switcher + user menu for all Hanzo apps
+// ---------------------------------------------------------------------------
+
+export interface UserOrgMenuProps {
+  /** Additional CSS class for the outer container. */
+  className?: string;
+  /** Called when org changes. Use to sync external state (e.g., tenantStore). */
+  onOrgChange?: (orgId: string) => void;
+  /** Called when user clicks logout. */
+  onLogout?: () => void;
+  /** Whether to show the "Create Organization" option. Defaults to true. */
+  showCreateOrg?: boolean;
+  /** Optional endpoint for org creation (defaults to IAM's /api/add-organization). */
+  createOrgEndpoint?: string;
+}
+
+/**
+ * Shared user menu + organization switcher for all Hanzo apps.
+ *
+ * Shows current user info (name, email, avatar), a dropdown with org list,
+ * "Create Organization" option, and logout button. Uses only `@hanzo/iam`
+ * hooks — no external UI library required.
+ *
+ * @example
+ * ```tsx
+ * import { UserOrgMenu } from '@hanzo/iam/react'
+ *
+ * function TopBar() {
+ *   return (
+ *     <nav>
+ *       <UserOrgMenu
+ *         onOrgChange={(orgId) => myStore.setOrg(orgId)}
+ *         onLogout={() => router.push('/login')}
+ *       />
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export function UserOrgMenu({
+  className = "",
+  onOrgChange,
+  onLogout,
+  showCreateOrg = true,
+  createOrgEndpoint,
+}: UserOrgMenuProps) {
+  const { config, isAuthenticated, accessToken, user, logout } = useIam();
+  const orgState = useOrganizations();
+  const [open, setOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newOrgName, setNewOrgName] = useState("");
+  const [newOrgDisplay, setNewOrgDisplay] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const handleSwitchOrg = useCallback(
+    (orgId: string) => {
+      orgState.switchOrg(orgId);
+      onOrgChange?.(orgId);
+      setOpen(false);
+    },
+    [orgState, onOrgChange],
+  );
+
+  const handleLogout = useCallback(() => {
+    setOpen(false);
+    if (onLogout) {
+      onLogout();
+    } else {
+      logout?.();
+    }
+  }, [onLogout, logout]);
+
+  const handleCreateOrg = useCallback(async () => {
+    const name = newOrgName.trim();
+    if (!name) return;
+
+    setCreating(true);
+    setError(null);
+
+    try {
+      const client = new IamClient({
+        serverUrl: config.serverUrl,
+        clientId: config.clientId,
+      });
+
+      if (createOrgEndpoint) {
+        // Use custom endpoint (e.g., playground's /v1/orgs)
+        const res = await fetch(createOrgEndpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+          },
+          body: JSON.stringify({
+            name,
+            displayName: newOrgDisplay.trim() || name,
+          }),
+        });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          throw new Error(body.error || body.msg || `HTTP ${res.status}`);
+        }
+      } else {
+        // Use IAM directly
+        await client.createOrganization(
+          { owner: "admin", name, displayName: newOrgDisplay.trim() || name },
+          accessToken ?? undefined,
+        );
+      }
+
+      // Switch to new org
+      orgState.switchOrg(name);
+      onOrgChange?.(name);
+      setNewOrgName("");
+      setNewOrgDisplay("");
+      setCreateOpen(false);
+      setOpen(false);
+
+      // Reload to refresh org list
+      window.location.reload();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setCreating(false);
+    }
+  }, [newOrgName, newOrgDisplay, config, accessToken, createOrgEndpoint, orgState, onOrgChange]);
+
+  if (!isAuthenticated) return null;
+
+  const orgs = orgState.organizations ?? [];
+  const currentLabel =
+    orgs.find((o) => o.name === orgState.currentOrgId)?.displayName ??
+    orgState.currentOrgId ??
+    "Select org";
+
+  const userName = user?.displayName || user?.name || user?.email || "User";
+  const userEmail = user?.email || "";
+  const userAvatar = user?.avatar || "";
+
+  // Inline styles (no external CSS dependencies)
+  const menuStyle: React.CSSProperties = {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: 4,
+    minWidth: 240,
+    borderRadius: 8,
+    border: "1px solid var(--border, #333)",
+    background: "var(--popover, #1a1a1a)",
+    color: "var(--popover-foreground, #fff)",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
+    zIndex: 50,
+    overflow: "hidden",
+  };
+
+  const itemStyle: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 12px",
+    fontSize: 13,
+    cursor: "pointer",
+    transition: "background 0.1s",
+    width: "100%",
+    border: "none",
+    background: "transparent",
+    color: "inherit",
+    textAlign: "left",
+  };
+
+  const activeItemStyle: React.CSSProperties = {
+    ...itemStyle,
+    background: "var(--accent, #2a2a2a)",
+  };
+
+  const separatorStyle: React.CSSProperties = {
+    height: 1,
+    background: "var(--border, #333)",
+    margin: "4px 0",
+  };
+
+  const labelStyle: React.CSSProperties = {
+    padding: "6px 12px",
+    fontSize: 11,
+    fontWeight: 600,
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.05em",
+    color: "var(--muted-foreground, #888)",
+  };
+
+  return createElement(
+    "div",
+    { ref: menuRef, className: `relative ${className}`, style: { position: "relative" } },
+
+    // Trigger button
+    createElement(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "6px 10px",
+          borderRadius: 6,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "inherit",
+          fontSize: 13,
+          fontWeight: 500,
+        },
+        "aria-label": "User menu",
+      },
+      userAvatar
+        ? createElement("img", {
+            src: userAvatar,
+            alt: userName,
+            style: { width: 24, height: 24, borderRadius: "50%", objectFit: "cover" as const },
+          })
+        : createElement(
+            "div",
+            {
+              style: {
+                width: 24,
+                height: 24,
+                borderRadius: "50%",
+                background: "var(--primary, #3b82f6)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 11,
+                fontWeight: 600,
+                color: "#fff",
+              },
+            },
+            userName.charAt(0).toUpperCase(),
+          ),
+      createElement("span", { style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" as const } }, currentLabel),
+      createElement("span", { style: { fontSize: 10, opacity: 0.5 } }, open ? "\u25B2" : "\u25BC"),
+    ),
+
+    // Dropdown menu
+    open &&
+      createElement(
+        "div",
+        { style: menuStyle },
+
+        // User info section
+        createElement(
+          "div",
+          { style: { padding: "10px 12px", borderBottom: "1px solid var(--border, #333)" } },
+          createElement("div", { style: { fontSize: 13, fontWeight: 600 } }, userName),
+          userEmail && createElement("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 2 } }, userEmail),
+        ),
+
+        // Organization section
+        createElement("div", { style: labelStyle }, "Organization"),
+        ...orgs.map((org) =>
+          createElement(
+            "button",
+            {
+              key: org.name,
+              onClick: () => handleSwitchOrg(org.name),
+              style: org.name === orgState.currentOrgId ? activeItemStyle : itemStyle,
+              onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
+              onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { if (org.name !== orgState.currentOrgId) (e.target as HTMLElement).style.background = "transparent"; },
+            },
+            org.name === orgState.currentOrgId ? "\u2713 " : "  ",
+            org.displayName || org.name,
+          ),
+        ),
+
+        // Create org option
+        showCreateOrg &&
+          createElement(
+            "div",
+            null,
+            createElement("div", { style: separatorStyle }),
+            !createOpen
+              ? createElement(
+                  "button",
+                  {
+                    onClick: () => setCreateOpen(true),
+                    style: itemStyle,
+                    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
+                    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "transparent"; },
+                  },
+                  "+ Create Organization",
+                )
+              : createElement(
+                  "div",
+                  { style: { padding: "8px 12px" } },
+                  createElement("input", {
+                    type: "text",
+                    placeholder: "org-name",
+                    value: newOrgName,
+                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => setNewOrgName(e.target.value),
+                    style: {
+                      width: "100%",
+                      padding: "6px 8px",
+                      fontSize: 12,
+                      borderRadius: 4,
+                      border: "1px solid var(--border, #333)",
+                      background: "var(--background, #111)",
+                      color: "inherit",
+                      marginBottom: 4,
+                    },
+                    disabled: creating,
+                  }),
+                  createElement("input", {
+                    type: "text",
+                    placeholder: "Display Name",
+                    value: newOrgDisplay,
+                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => setNewOrgDisplay(e.target.value),
+                    style: {
+                      width: "100%",
+                      padding: "6px 8px",
+                      fontSize: 12,
+                      borderRadius: 4,
+                      border: "1px solid var(--border, #333)",
+                      background: "var(--background, #111)",
+                      color: "inherit",
+                      marginBottom: 4,
+                    },
+                    disabled: creating,
+                  }),
+                  error && createElement("div", { style: { fontSize: 11, color: "#ef4444", marginBottom: 4 } }, error),
+                  createElement(
+                    "div",
+                    { style: { display: "flex", gap: 4 } },
+                    createElement(
+                      "button",
+                      {
+                        onClick: handleCreateOrg,
+                        disabled: creating || !newOrgName.trim(),
+                        style: {
+                          flex: 1,
+                          padding: "5px 8px",
+                          fontSize: 12,
+                          borderRadius: 4,
+                          border: "none",
+                          background: "var(--primary, #3b82f6)",
+                          color: "#fff",
+                          cursor: creating ? "wait" : "pointer",
+                          opacity: creating || !newOrgName.trim() ? 0.5 : 1,
+                        },
+                      },
+                      creating ? "Creating..." : "Create",
+                    ),
+                    createElement(
+                      "button",
+                      {
+                        onClick: () => { setCreateOpen(false); setError(null); },
+                        style: {
+                          padding: "5px 8px",
+                          fontSize: 12,
+                          borderRadius: 4,
+                          border: "1px solid var(--border, #333)",
+                          background: "transparent",
+                          color: "inherit",
+                          cursor: "pointer",
+                        },
+                      },
+                      "Cancel",
+                    ),
+                  ),
+                ),
+          ),
+
+        // Logout
+        createElement("div", { style: separatorStyle }),
+        createElement(
+          "button",
+          {
+            onClick: handleLogout,
+            style: { ...itemStyle, color: "var(--destructive, #ef4444)" },
+            onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
+            onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "transparent"; },
+          },
+          "Sign out",
+        ),
+      ),
+  );
+}

package/src/types.ts

@@ -226,6 +226,26 @@ export type IamOrder = Order;
 export type IamUsageRecord = UsageRecord;
 export type IamUsageSummary = UsageSummary;
 
+// ---------------------------------------------------------------------------
+// Invitation
+// ---------------------------------------------------------------------------
+
+export type IamInvitation = {
+  owner: string;
+  name: string;
+  displayName?: string;
+  code: string;
+  quota: number;
+  usedCount: number;
+  application?: string;
+  email?: string;
+  phone?: string;
+  signupGroup?: string;
+  state?: string;
+  createdTime?: string;
+  updatedTime?: string;
+};
+
 // ---------------------------------------------------------------------------
 // Project
 // ---------------------------------------------------------------------------

package/dist/betterauth.d.ts

@@ -1,67 +0,0 @@
-/**
- * BetterAuth SSO provider configuration for IAM.
- *
- * Returns a provider config object compatible with BetterAuth's
- * `socialProviders` or generic OAuth plugin.
- *
- * @example
- * ```ts
- * import { betterAuth } from "better-auth";
- * import { iamProvider } from "@hanzo/iam/betterauth";
- *
- * export const auth = betterAuth({
- *   socialProviders: [
- *     iamProvider({
- *       serverUrl: process.env.IAM_SERVER_URL!,
- *       clientId: process.env.IAM_CLIENT_ID!,
- *       clientSecret: process.env.IAM_CLIENT_SECRET!,
- *     }),
- *   ],
- * });
- * ```
- *
- * @packageDocumentation
- */
-import type { IamConfig } from "./types.js";
-export interface IamSocialProvider {
-    id: string;
-    name: string;
-    type: "oidc";
-    issuer: string;
-    clientId: string;
-    clientSecret?: string;
-    authorization: {
-        url: string;
-        params: {
-            scope: string;
-        };
-    };
-    token: {
-        url: string;
-    };
-    userinfo: {
-        url: string;
-    };
-    profile: (profile: Record<string, unknown>) => {
-        id: string;
-        name: string;
-        email: string;
-        image: string | null;
-    };
-}
-/**
- * Create a BetterAuth-compatible social provider for IAM.
- *
- * Works with BetterAuth's SSO plugin or generic OAuth integration.
- * Uses standard OIDC endpoints.
- */
-export declare function iamProvider(config: IamConfig & {
-    redirectUri?: string;
-}): IamSocialProvider;
-/** @deprecated Use iamProvider instead */
-export { iamProvider as hanzoIamProvider };
-/** @deprecated Use iamProvider instead */
-export { iamProvider as hanzoIamSocialProvider };
-/** @deprecated Use IamSocialProvider instead */
-export type { IamSocialProvider as HanzoIamSocialProvider };
-//# sourceMappingURL=betterauth.d.ts.map

package/dist/betterauth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"betterauth.d.ts","sourceRoot":"","sources":["../src/betterauth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAC1D,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvB,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK;QAC7C,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;CACH;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,SAAS,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3C,iBAAiB,CA6BnB;AAGD,0CAA0C;AAC1C,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,CAAC;AAC3C,0CAA0C;AAC1C,OAAO,EAAE,WAAW,IAAI,sBAAsB,EAAE,CAAC;AACjD,gDAAgD;AAChD,YAAY,EAAE,iBAAiB,IAAI,sBAAsB,EAAE,CAAC"}