@mdxui/auth 1.1.0

package/dist/index.js

@@ -0,0 +1,592 @@
+// src/providers/identity-provider.tsx
+import { AuthKitProvider } from "@workos-inc/authkit-react";
+
+// src/providers/widgets-provider.tsx
+import { WorkOsWidgets } from "@workos-inc/widgets";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function useThemeDetection() {
+  const [mounted, setMounted] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const checkDarkMode = () => {
+      const isDarkClass = document.documentElement.classList.contains("dark");
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      setIsDark(
+        isDarkClass || !document.documentElement.classList.contains("light") && prefersDark
+      );
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", checkDarkMode);
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", checkDarkMode);
+    };
+  }, []);
+  return { isDark, mounted };
+}
+function WidgetsProvider({
+  children,
+  appearance,
+  radius = "medium",
+  scaling = "100%"
+}) {
+  const { isDark, mounted } = useThemeDetection();
+  const resolvedAppearance = appearance ?? (mounted ? isDark ? "dark" : "light" : "inherit");
+  return /* @__PURE__ */ jsx(
+    WorkOsWidgets,
+    {
+      theme: {
+        appearance: resolvedAppearance,
+        radius,
+        scaling
+      },
+      elements: {
+        primaryButton: {
+          variant: "solid"
+        },
+        secondaryButton: {
+          variant: "outline"
+        }
+      },
+      children
+    }
+  );
+}
+
+// src/providers/identity-provider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function IdentityProvider({
+  clientId,
+  apiHostname,
+  devMode,
+  redirectUri,
+  onRedirectCallback,
+  children
+}) {
+  const resolvedRedirectUri = redirectUri ?? (typeof window !== "undefined" ? window.location.origin : void 0);
+  const handleRedirectCallback = onRedirectCallback ?? (() => {
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("code");
+      url.searchParams.delete("state");
+      window.history.replaceState({}, "", url.pathname);
+    }
+  });
+  return /* @__PURE__ */ jsx2(
+    AuthKitProvider,
+    {
+      clientId,
+      apiHostname,
+      devMode,
+      redirectUri: resolvedRedirectUri,
+      onRedirectCallback: handleRedirectCallback,
+      children: /* @__PURE__ */ jsx2(WidgetsProvider, { children })
+    }
+  );
+}
+function IdentityProviderMinimal({
+  clientId,
+  apiHostname,
+  devMode,
+  redirectUri,
+  onRedirectCallback,
+  children
+}) {
+  const resolvedRedirectUri = redirectUri ?? (typeof window !== "undefined" ? window.location.origin : void 0);
+  const handleRedirectCallback = onRedirectCallback ?? (() => {
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("code");
+      url.searchParams.delete("state");
+      window.history.replaceState({}, "", url.pathname);
+    }
+  });
+  return /* @__PURE__ */ jsx2(
+    AuthKitProvider,
+    {
+      clientId,
+      apiHostname,
+      devMode,
+      redirectUri: resolvedRedirectUri,
+      onRedirectCallback: handleRedirectCallback,
+      children
+    }
+  );
+}
+
+// src/providers/auth-gate.tsx
+import { useAuth } from "@workos-inc/authkit-react";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function DefaultLoadingComponent() {
+  return /* @__PURE__ */ jsx3("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx3("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
+    /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: "Loading..." })
+  ] }) });
+}
+function DefaultLandingPage() {
+  const { signIn } = useAuth();
+  return /* @__PURE__ */ jsx3("div", { className: "min-h-screen bg-background flex flex-col items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+    /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold tracking-tight mb-4", children: "Welcome" }),
+    /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground mb-8", children: "Sign in to access your dashboard." }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => signIn(),
+        className: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6",
+        children: "Sign In"
+      }
+    )
+  ] }) });
+}
+function AuthGate({
+  children,
+  required = true,
+  loadingComponent,
+  landingComponent,
+  onUnauthenticated = "landing",
+  redirectUrl
+}) {
+  const { user, isLoading } = useAuth();
+  if (!required) {
+    return /* @__PURE__ */ jsx3(Fragment, { children });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx3(Fragment, { children: loadingComponent ?? /* @__PURE__ */ jsx3(DefaultLoadingComponent, {}) });
+  }
+  if (user) {
+    return /* @__PURE__ */ jsx3(Fragment, { children });
+  }
+  switch (onUnauthenticated) {
+    case "redirect":
+      if (redirectUrl && typeof window !== "undefined") {
+        window.location.href = redirectUrl;
+        return /* @__PURE__ */ jsx3("div", { className: "min-h-screen bg-background flex items-center justify-center", children: /* @__PURE__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: "Redirecting..." }) });
+      }
+      return /* @__PURE__ */ jsx3(Fragment, { children: landingComponent ?? /* @__PURE__ */ jsx3(DefaultLandingPage, {}) });
+    case "allow":
+      return /* @__PURE__ */ jsx3(Fragment, { children });
+    case "landing":
+    default:
+      return /* @__PURE__ */ jsx3(Fragment, { children: landingComponent ?? /* @__PURE__ */ jsx3(DefaultLandingPage, {}) });
+  }
+}
+
+// src/widgets/user-profile.tsx
+import { UserProfile as WorkOSUserProfile } from "@workos-inc/widgets";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function UserProfile({ authToken, className }) {
+  return /* @__PURE__ */ jsx4("div", { className, children: /* @__PURE__ */ jsx4(WorkOSUserProfile, { authToken }) });
+}
+
+// src/widgets/user-security.tsx
+import { UserSecurity as WorkOSUserSecurity } from "@workos-inc/widgets";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function UserSecurity({ authToken, className }) {
+  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUserSecurity, { authToken }) });
+}
+
+// src/widgets/user-sessions.tsx
+import { UserSessions as WorkOSUserSessions } from "@workos-inc/widgets";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function UserSessions(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSUserSessions, { ...rest }) });
+}
+
+// src/widgets/api-keys.tsx
+import { ApiKeys as WorkOSApiKeys } from "@workos-inc/widgets";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ApiKeys({ authToken, className }) {
+  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(WorkOSApiKeys, { authToken }) });
+}
+
+// src/widgets/users-management.tsx
+import { UsersManagement as WorkOSUsersManagement } from "@workos-inc/widgets";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function UsersManagement({
+  authToken,
+  organizationId: _organizationId,
+  className
+}) {
+  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(WorkOSUsersManagement, { authToken }) });
+}
+
+// src/widgets/pipes.tsx
+import { Pipes as WorkOSPipes } from "@workos-inc/widgets";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Pipes({ authToken, className }) {
+  return /* @__PURE__ */ jsx9("div", { className, children: /* @__PURE__ */ jsx9(WorkOSPipes, { authToken }) });
+}
+
+// src/widgets/organization-switcher.tsx
+import { OrganizationSwitcher as WorkOSOrganizationSwitcher } from "@workos-inc/widgets";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function OrganizationSwitcher({
+  authToken,
+  switchToOrganization,
+  variant,
+  organizationLabel,
+  truncateBehavior,
+  className
+}) {
+  return /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(
+    WorkOSOrganizationSwitcher,
+    {
+      authToken,
+      switchToOrganization,
+      variant,
+      organizationLabel,
+      truncateBehavior
+    }
+  ) });
+}
+
+// src/components/sign-in-button.tsx
+import { useAuth as useAuth2 } from "@workos-inc/authkit-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function SignInButton({
+  children = "Sign In",
+  onSignIn,
+  className,
+  disabled,
+  ...props
+}) {
+  const { signIn, isLoading } = useAuth2();
+  const handleClick = () => {
+    onSignIn?.();
+    signIn();
+  };
+  return /* @__PURE__ */ jsx11(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      className: className ?? "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none",
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/sign-out-button.tsx
+import { useAuth as useAuth3 } from "@workos-inc/authkit-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function SignOutButton({
+  children = "Sign Out",
+  onSignOut,
+  className,
+  disabled,
+  ...props
+}) {
+  const { signOut, isLoading } = useAuth3();
+  const handleClick = () => {
+    onSignOut?.();
+    signOut();
+  };
+  return /* @__PURE__ */ jsx12(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      className: className ?? "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none",
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/user-menu.tsx
+import { useAuth as useAuth4 } from "@workos-inc/authkit-react";
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+function getInitials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function UserMenu({ renderTrigger, renderMenu, className }) {
+  const { user, signOut, isLoading } = useAuth4();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
+  }
+  if (!user) {
+    return null;
+  }
+  const displayName = user.firstName ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ""}` : user.email;
+  const initials = getInitials(
+    user.firstName ? `${user.firstName} ${user.lastName ?? ""}` : user.email
+  );
+  const triggerProps = { user, displayName, initials };
+  const menuProps = { user, displayName, initials, signOut };
+  if (!renderTrigger && !renderMenu) {
+    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 p-2", children: [
+      /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx13(
+        "img",
+        {
+          src: user.profilePictureUrl,
+          alt: displayName,
+          className: "h-full w-full rounded-full object-cover"
+        }
+      ) : initials }),
+      /* @__PURE__ */ jsxs2("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx13("p", { className: "font-medium", children: displayName }),
+        /* @__PURE__ */ jsx13("p", { className: "text-muted-foreground text-xs", children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          onClick: () => signOut(),
+          className: "ml-auto text-sm text-muted-foreground hover:text-foreground",
+          children: "Sign out"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    renderTrigger?.(triggerProps),
+    renderMenu?.(menuProps)
+  ] });
+}
+
+// src/components/team-switcher.tsx
+import { useAuth as useAuth5 } from "@workos-inc/authkit-react";
+import { OrganizationSwitcher as OrganizationSwitcher2 } from "@workos-inc/widgets";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function TeamSwitcher({
+  renderWrapper,
+  renderNoOrganization,
+  className
+}) {
+  const { getAccessToken, switchToOrganization, organizationId } = useAuth5();
+  if (!organizationId) {
+    return renderNoOrganization?.() ?? null;
+  }
+  const handleSwitchOrganization = ({
+    organizationId: organizationId2
+  }) => {
+    return switchToOrganization({ organizationId: organizationId2 });
+  };
+  const widget = /* @__PURE__ */ jsx14("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx14(
+    OrganizationSwitcher2,
+    {
+      authToken: getAccessToken,
+      switchToOrganization: handleSwitchOrganization
+    }
+  ) });
+  return renderWrapper ? renderWrapper(widget) : widget;
+}
+
+// src/hooks/use-auth.ts
+import { useAuth as useAuth6 } from "@workos-inc/authkit-react";
+
+// src/hooks/use-widget-token.ts
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+function useWidgetToken({
+  widget,
+  organizationId,
+  endpoint = "/api/workos/widget-token"
+}) {
+  const [token, setToken] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const fetchToken = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const params = new URLSearchParams({ widget });
+      if (organizationId) {
+        params.set("organizationId", organizationId);
+      }
+      const response = await fetch(`${endpoint}?${params}`);
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to fetch token");
+      }
+      setToken(data.token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Token fetch failed");
+    } finally {
+      setLoading(false);
+    }
+  }, [widget, organizationId, endpoint]);
+  useEffect2(() => {
+    fetchToken();
+  }, [fetchToken]);
+  return { token, loading, error, refetch: fetchToken };
+}
+
+// src/schemas/auth-user.ts
+import { z } from "zod";
+import { UserIdentitySchema } from "mdxui/zod";
+var AuthUserSchema = UserIdentitySchema.extend({
+  // Override to be more specific (WorkOS guarantees string ID)
+  id: z.string().describe("User ID from WorkOS"),
+  // WorkOS requires email (not optional like UserIdentity)
+  email: z.string().email().describe("Email address"),
+  // WorkOS-specific fields not in UserIdentity
+  emailVerified: z.boolean().describe("Email verification status"),
+  // Timestamps
+  createdAt: z.string().datetime().describe("Account creation timestamp"),
+  updatedAt: z.string().datetime().describe("Last update timestamp"),
+  lastSignInAt: z.string().datetime().nullable().optional().describe("Last sign-in timestamp")
+});
+
+// src/schemas/auth-session.ts
+import { z as z2 } from "zod";
+import { SessionSchema } from "mdxui/zod";
+var ImpersonatorSchema = z2.object({
+  /** Impersonator's email address */
+  email: z2.string().email().describe("Impersonator's email address"),
+  /** Reason for impersonation */
+  reason: z2.string().optional().describe("Reason for impersonation")
+});
+var AuthSessionSchema = SessionSchema.extend({
+  // Override userId to be string (WorkOS uses string IDs)
+  userId: z2.string().describe("User ID"),
+  // WorkOS-specific: impersonation support
+  impersonator: ImpersonatorSchema.optional().describe(
+    "Impersonator info (if being impersonated)"
+  )
+});
+
+// src/schemas/auth-organization.ts
+import { z as z3 } from "zod";
+var AuthOrganizationSchema = z3.object({
+  /** Organization ID */
+  id: z3.string().describe("Organization ID"),
+  /** Organization display name */
+  name: z3.string().describe("Organization name"),
+  /** Organization slug (URL-friendly identifier) */
+  slug: z3.string().optional().describe("Organization slug"),
+  /** Organization logo URL */
+  logoUrl: z3.string().url().optional().describe("Organization logo URL"),
+  /** Whether the organization is active */
+  active: z3.boolean().optional().describe("Whether organization is active"),
+  /** Custom domains for the organization */
+  domains: z3.array(z3.string()).optional().describe("Custom domains for the organization"),
+  /** Additional metadata */
+  metadata: z3.record(z3.string(), z3.unknown()).optional().describe("Additional metadata")
+});
+
+// src/schemas/provider-props.ts
+import { z as z4 } from "zod";
+var IdentityProviderPropsSchema = z4.object({
+  /** WorkOS client ID */
+  clientId: z4.string().describe("WorkOS client ID"),
+  /** Optional API hostname override */
+  apiHostname: z4.string().optional().describe("Optional API hostname override"),
+  /** Enable dev mode for local development */
+  devMode: z4.boolean().optional().describe("Enable dev mode for local development"),
+  /** Redirect URI after authentication */
+  redirectUri: z4.string().url().optional().describe("Redirect URI after authentication")
+  /** Note: onRedirectCallback and children are React-specific, not in schema */
+});
+var UnauthenticatedActionSchema = z4.enum(["landing", "redirect", "allow"]);
+var AuthGatePropsSchema = z4.object({
+  /** Whether authentication is required (default: true) */
+  required: z4.boolean().optional().describe("Whether authentication is required"),
+  /** What to do when unauthenticated */
+  onUnauthenticated: UnauthenticatedActionSchema.optional().describe(
+    "What to do when unauthenticated"
+  ),
+  /** URL to redirect to when unauthenticated (if onUnauthenticated is "redirect") */
+  redirectUrl: z4.string().url().optional().describe("URL to redirect to when unauthenticated")
+  /** Note: children, loadingComponent, landingComponent are React-specific */
+});
+var AppearanceSchema = z4.enum(["light", "dark", "inherit"]);
+var RadiusSchema = z4.enum(["none", "small", "medium", "large", "full"]);
+var ScalingSchema = z4.enum(["90%", "95%", "100%", "105%", "110%"]);
+var WidgetsProviderPropsSchema = z4.object({
+  /** Theme appearance mode */
+  appearance: AppearanceSchema.optional().describe("Theme appearance mode"),
+  /** Border radius style */
+  radius: RadiusSchema.optional().describe("Border radius style"),
+  /** Scaling factor */
+  scaling: ScalingSchema.optional().describe("Scaling factor")
+  /** Note: children is React-specific, not in schema */
+});
+
+// src/schemas/widget-props.ts
+import { z as z5 } from "zod";
+var AuthTokenSchema = z5.union([
+  z5.string().describe("Static auth token"),
+  z5.literal("function").describe("Token getter function")
+]);
+var BaseWidgetPropsSchema = z5.object({
+  /** Auth token for the widget (string or getter function) */
+  authToken: z5.string().describe("Auth token for the widget"),
+  /** CSS class name */
+  className: z5.string().optional().describe("CSS class name")
+});
+var OrganizationWidgetPropsSchema = BaseWidgetPropsSchema.extend({
+  /** Organization ID for org-scoped widgets */
+  organizationId: z5.string().optional().describe("Organization ID for org-scoped widgets")
+});
+var UseWidgetTokenOptionsSchema = z5.object({
+  /** Widget type to fetch token for */
+  widget: z5.string().describe("Widget type to fetch token for"),
+  /** Organization ID for org-scoped widgets */
+  organizationId: z5.string().optional().describe("Organization ID for org-scoped widgets"),
+  /** Custom endpoint for fetching widget token */
+  endpoint: z5.string().url().optional().describe("Custom endpoint for fetching widget token")
+});
+var UseWidgetTokenResultSchema = z5.object({
+  /** The fetched token */
+  token: z5.string().nullable().describe("The fetched token"),
+  /** Whether token is being fetched */
+  loading: z5.boolean().describe("Whether token is being fetched"),
+  /** Error message if fetch failed */
+  error: z5.string().nullable().describe("Error message if fetch failed")
+  /** Note: refetch function is React-specific, not in schema */
+});
+export {
+  ApiKeys,
+  AppearanceSchema,
+  AuthGate,
+  AuthGatePropsSchema,
+  AuthOrganizationSchema,
+  AuthSessionSchema,
+  AuthTokenSchema,
+  AuthUserSchema,
+  BaseWidgetPropsSchema,
+  IdentityProvider,
+  IdentityProviderMinimal,
+  IdentityProviderPropsSchema,
+  ImpersonatorSchema,
+  OrganizationSwitcher,
+  OrganizationWidgetPropsSchema,
+  Pipes,
+  RadiusSchema,
+  ScalingSchema,
+  SignInButton,
+  SignOutButton,
+  TeamSwitcher,
+  UnauthenticatedActionSchema,
+  UseWidgetTokenOptionsSchema,
+  UseWidgetTokenResultSchema,
+  UserMenu,
+  UserProfile,
+  UserSecurity,
+  UserSessions,
+  UsersManagement,
+  WidgetsProvider,
+  WidgetsProviderPropsSchema,
+  useAuth6 as useAuth,
+  useThemeDetection,
+  useWidgetToken
+};
+//# sourceMappingURL=index.js.map