@drmhse/authos-react 0.1.0

package/dist/index.js

@@ -0,0 +1,555 @@
+'use strict';
+
+var react = require('react');
+var ssoSdk = require('@drmhse/sso-sdk');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/context.tsx
+var AuthOSContext = react.createContext(null);
+function AuthOSProvider({ config, children, client: externalClient }) {
+  const clientRef = react.useRef(null);
+  if (!clientRef.current) {
+    clientRef.current = externalClient ?? new ssoSdk.SsoClient(config);
+  }
+  const client = clientRef.current;
+  const [user, setUser] = react.useState(null);
+  const [organization, setOrganization] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const refreshUser = react.useCallback(async () => {
+    try {
+      const profile = await client.user.getProfile();
+      setUser(profile);
+    } catch {
+      setUser(null);
+    }
+  }, [client]);
+  react.useEffect(() => {
+    const unsubscribe = client.onAuthStateChange(async (isAuthenticated) => {
+      if (isAuthenticated) {
+        try {
+          const profile = await client.user.getProfile();
+          setUser(profile);
+        } catch {
+          setUser(null);
+        }
+      } else {
+        setUser(null);
+        setOrganization(null);
+      }
+      setIsLoading(false);
+    });
+    return unsubscribe;
+  }, [client]);
+  const contextValue = react.useMemo(
+    () => ({
+      client,
+      user,
+      isAuthenticated: !!user,
+      isLoading,
+      organization,
+      setUser,
+      setOrganization,
+      refreshUser
+    }),
+    [client, user, isLoading, organization, refreshUser]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthOSContext.Provider, { value: contextValue, children });
+}
+function useAuthOSContext() {
+  const context = react.useContext(AuthOSContext);
+  if (!context) {
+    throw new Error("useAuthOSContext must be used within an AuthOSProvider");
+  }
+  return context;
+}
+
+// src/hooks/useAuthOS.ts
+function useAuthOS() {
+  const { client, isLoading, isAuthenticated } = useAuthOSContext();
+  return { client, isLoading, isAuthenticated };
+}
+
+// src/hooks/useUser.ts
+function useUser() {
+  const { user } = useAuthOSContext();
+  return user;
+}
+function useOrganization() {
+  const { client, organization, setOrganization, refreshUser } = useAuthOSContext();
+  const switchOrganization = react.useCallback(
+    async (slug) => {
+      const orgResponse = await client.organizations.get(slug);
+      setOrganization(orgResponse.organization);
+      await refreshUser();
+    },
+    [client, setOrganization, refreshUser]
+  );
+  return { organization, switchOrganization };
+}
+function usePermission(permission) {
+  const { user } = useAuthOSContext();
+  return react.useMemo(() => {
+    if (!user?.permissions) return false;
+    return user.permissions.includes(permission);
+  }, [user?.permissions, permission]);
+}
+function useAnyPermission(permissions) {
+  const { user } = useAuthOSContext();
+  return react.useMemo(() => {
+    if (!user?.permissions) return false;
+    return permissions.some((perm) => user.permissions.includes(perm));
+  }, [user?.permissions, permissions]);
+}
+function useAllPermissions(permissions) {
+  const { user } = useAuthOSContext();
+  return react.useMemo(() => {
+    if (!user?.permissions) return false;
+    return permissions.every((perm) => user.permissions.includes(perm));
+  }, [user?.permissions, permissions]);
+}
+var MFA_PREAUTH_EXPIRY = 300;
+function SignIn({
+  onSuccess,
+  onError,
+  showForgotPassword = true,
+  showSignUp = true,
+  className
+}) {
+  const { client, setUser } = useAuthOSContext();
+  const [state, setState] = react.useState("credentials");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [mfaCode, setMfaCode] = react.useState("");
+  const [preauthToken, setPreauthToken] = react.useState("");
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const handleCredentialsSubmit = react.useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      setIsLoading(true);
+      try {
+        const result = await client.auth.login({ email, password });
+        if (result.expires_in === MFA_PREAUTH_EXPIRY) {
+          setPreauthToken(result.access_token);
+          setState("mfa");
+        } else {
+          const profile = await client.user.getProfile();
+          setUser(profile);
+          onSuccess?.(profile);
+        }
+      } catch (err) {
+        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Login failed";
+        setError(message);
+        onError?.(err instanceof Error ? err : new Error(message));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, email, password, setUser, onSuccess, onError]
+  );
+  const handleMfaSubmit = react.useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      setIsLoading(true);
+      try {
+        await client.auth.verifyMfa(preauthToken, mfaCode);
+        const profile = await client.user.getProfile();
+        setUser(profile);
+        onSuccess?.(profile);
+      } catch (err) {
+        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Invalid MFA code";
+        setError(message);
+        onError?.(err instanceof Error ? err : new Error(message));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, preauthToken, mfaCode, setUser, onSuccess, onError]
+  );
+  const handleBackToCredentials = react.useCallback(() => {
+    setState("credentials");
+    setMfaCode("");
+    setPreauthToken("");
+    setError(null);
+  }, []);
+  if (state === "mfa") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signin": "", "data-state": "mfa", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleMfaSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "mfa-code", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-mfa-code", children: "Verification Code" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-mfa-code",
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            value: mfaCode,
+            onChange: (e) => setMfaCode(e.target.value),
+            placeholder: "Enter 6-digit code",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Verifying..." : "Verify" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleBackToCredentials, "data-authos-back": "", children: "Back to login" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signin": "", "data-state": "credentials", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleCredentialsSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-email", children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-email",
+          type: "email",
+          autoComplete: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: "Enter your email",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-password", children: "Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-password",
+          type: "password",
+          autoComplete: "current-password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: "Enter your password",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Signing in..." : "Sign In" }),
+    showForgotPassword && /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/forgot-password", "data-authos-link": "forgot-password", children: "Forgot password?" }),
+    showSignUp && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signup-prompt": true, children: [
+      "Don't have an account? ",
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signup", "data-authos-link": "signup", children: "Sign up" })
+    ] })
+  ] }) });
+}
+function SignUp({ onSuccess, onError, orgSlug, showSignIn = true, className }) {
+  const { client } = useAuthOSContext();
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [confirmPassword, setConfirmPassword] = react.useState("");
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [isSuccess, setIsSuccess] = react.useState(false);
+  const handleSubmit = react.useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      if (password !== confirmPassword) {
+        setError("Passwords do not match");
+        return;
+      }
+      if (password.length < 8) {
+        setError("Password must be at least 8 characters");
+        return;
+      }
+      setIsLoading(true);
+      try {
+        await client.auth.register({
+          email,
+          password,
+          org_slug: orgSlug
+        });
+        setIsSuccess(true);
+        onSuccess?.();
+      } catch (err) {
+        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Registration failed";
+        setError(message);
+        onError?.(err instanceof Error ? err : new Error(message));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, email, password, confirmPassword, orgSlug, onSuccess, onError]
+  );
+  if (isSuccess) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signup": true, "data-state": "success", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-success": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Check your email" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        "We've sent a verification link to ",
+        email,
+        ". Please click the link to verify your account."
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signup": true, "data-state": "form", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-email", children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-signup-email",
+          type: "email",
+          autoComplete: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: "Enter your email",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-password", children: "Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-signup-password",
+          type: "password",
+          autoComplete: "new-password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: "Create a password",
+          required: true,
+          minLength: 8,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "confirm-password", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-confirm", children: "Confirm Password" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-signup-confirm",
+          type: "password",
+          autoComplete: "new-password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          placeholder: "Confirm your password",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": true, children: isLoading ? "Creating account..." : "Create Account" }),
+    showSignIn && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signin-prompt": true, children: [
+      "Already have an account? ",
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in" })
+    ] })
+  ] }) });
+}
+function OrganizationSwitcher({ onSwitch, className, renderItem }) {
+  const { client, isAuthenticated } = useAuthOSContext();
+  const { organization: currentOrg, switchOrganization } = useOrganization();
+  const [organizations, setOrganizations] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [isSwitching, setIsSwitching] = react.useState(false);
+  react.useEffect(() => {
+    if (!isAuthenticated) {
+      setOrganizations([]);
+      setIsLoading(false);
+      return;
+    }
+    const fetchOrganizations = async () => {
+      try {
+        const orgResponses = await client.organizations.list();
+        setOrganizations(orgResponses.map((r) => r.organization));
+      } catch {
+        setOrganizations([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchOrganizations();
+  }, [client, isAuthenticated]);
+  const handleSwitch = react.useCallback(
+    async (org) => {
+      if (org.slug === currentOrg?.slug) {
+        setIsOpen(false);
+        return;
+      }
+      setIsSwitching(true);
+      try {
+        await switchOrganization(org.slug);
+        onSwitch?.(org);
+        setIsOpen(false);
+      } catch (err) {
+        console.error("Failed to switch organization:", err);
+      } finally {
+        setIsSwitching(false);
+      }
+    },
+    [currentOrg, switchOrganization, onSwitch]
+  );
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-orgswitcher": true, "data-state": "signed-out", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-org-placeholder": true, children: "Not signed in" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-orgswitcher": true, "data-state": "loading", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." }) });
+  }
+  if (organizations.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-orgswitcher": true, "data-state": isOpen ? "open" : "closed", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        disabled: isSwitching,
+        "data-authos-org-trigger": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-org-name": true, children: currentOrg?.name ?? "Select Organization" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-org-chevron": true, "aria-hidden": "true", children: isOpen ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-authos-org-list": true, role: "listbox", children: organizations.map((org) => {
+      const isActive = org.slug === currentOrg?.slug;
+      if (renderItem) {
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isActive, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSwitch(org),
+            disabled: isSwitching,
+            children: renderItem(org, isActive)
+          }
+        ) }, org.id);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "option", "aria-selected": isActive, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSwitch(org),
+          disabled: isSwitching,
+          "data-authos-org-item": true,
+          "data-active": isActive,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-org-item-name": true, children: org.name }),
+            isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-org-item-check": true, children: "\u2713" })
+          ]
+        }
+      ) }, org.id);
+    }) })
+  ] });
+}
+function UserButton({ className, showEmail = false, onLogout }) {
+  const { client, user, setUser, setOrganization } = useAuthOSContext();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [isLoggingOut, setIsLoggingOut] = react.useState(false);
+  const handleLogout = react.useCallback(async () => {
+    setIsLoggingOut(true);
+    try {
+      await client.auth.logout();
+    } catch {
+    } finally {
+      setUser(null);
+      setOrganization(null);
+      setIsLoggingOut(false);
+      setIsOpen(false);
+      onLogout?.();
+    }
+  }, [client, setUser, setOrganization, onLogout]);
+  if (!user) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-userbutton": true, "data-state": "signed-out", children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-user-placeholder": true, children: "Not signed in" }) });
+  }
+  const initials = user.email.split("@")[0].split(".").map((part) => part[0]?.toUpperCase() ?? "").slice(0, 2).join("");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-userbutton": true, "data-state": isOpen ? "open" : "closed", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        disabled: isLoggingOut,
+        "data-authos-user-trigger": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-user-avatar": true, "aria-hidden": "true", children: initials }),
+          showEmail && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-user-email": true, children: user.email })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-user-menu": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-user-info": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-user-email": true, children: user.email }),
+        user.is_platform_owner && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-authos-user-badge": true, children: "Platform Owner" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { "data-authos-divider": true }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleLogout,
+          disabled: isLoggingOut,
+          "data-authos-logout": true,
+          children: isLoggingOut ? "Signing out..." : "Sign out"
+        }
+      )
+    ] })
+  ] });
+}
+function Protect({ permission, role, fallback = null, children }) {
+  const { user, isLoading } = useAuthOSContext();
+  const hasPermission = usePermission(permission ?? "");
+  const renderContent = () => {
+    if (isLoading) {
+      return null;
+    }
+    if (!user) {
+      return fallback;
+    }
+    if (permission && !hasPermission) {
+      return fallback;
+    }
+    if (role) {
+      const userRoles = user.permissions.filter((p) => p.startsWith("role:")).map((p) => p.replace("role:", ""));
+      const roleHierarchy = ["member", "admin", "owner"];
+      const requiredRoleIndex = roleHierarchy.indexOf(role);
+      const hasRole = userRoles.some((userRole) => {
+        const userRoleIndex = roleHierarchy.indexOf(userRole);
+        return userRoleIndex >= requiredRoleIndex;
+      });
+      if (!hasRole) {
+        return fallback;
+      }
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-protect": true, children: renderContent() });
+}
+
+Object.defineProperty(exports, "AuthErrorCodes", {
+  enumerable: true,
+  get: function () { return ssoSdk.AuthErrorCodes; }
+});
+Object.defineProperty(exports, "SsoApiError", {
+  enumerable: true,
+  get: function () { return ssoSdk.SsoApiError; }
+});
+Object.defineProperty(exports, "SsoClient", {
+  enumerable: true,
+  get: function () { return ssoSdk.SsoClient; }
+});
+exports.AuthOSProvider = AuthOSProvider;
+exports.OrganizationSwitcher = OrganizationSwitcher;
+exports.Protect = Protect;
+exports.SignIn = SignIn;
+exports.SignUp = SignUp;
+exports.UserButton = UserButton;
+exports.useAllPermissions = useAllPermissions;
+exports.useAnyPermission = useAnyPermission;
+exports.useAuthOS = useAuthOS;
+exports.useAuthOSContext = useAuthOSContext;
+exports.useOrganization = useOrganization;
+exports.usePermission = usePermission;
+exports.useUser = useUser;