@authowl/react 0.22.0 → 0.24.0

package/dist/{chunk-PUJV7S6G.js → chunk-TOVDZ2ZE.js}

@@ -115,7 +115,7 @@ function readableAccent(brandHex, surfaceHex, dir) {
   }
   return dir === 1 ? WHITE : NEAR_BLACK;
 }
-var LIGHT_SURFACE = "#ffffff";
+var LIGHT_SURFACE = "#f4f4f5";
 var DARK_SURFACE = "#18181b";
 function deriveBrandRamp(primaryHex) {
   const solid = normalizeHex(primaryHex) ?? DEFAULT_BRAND_COLOR.toLowerCase();
@@ -151,7 +151,7 @@ function brandRampVars(set) {
 }
 
 // src/hooks.ts
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   clearInvitationClaim,
   createMembershipHas,
@@ -159,10 +159,11 @@ import {
 } from "@authowl/core";
 
 // src/provider.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import {
   captureInvitationClaim,
   createAuthOwlClient,
+  setActiveLocale,
   directionFor,
   getPublicConfig,
   isLocale,
@@ -367,6 +368,39 @@ function InvitationPrompt() {
   );
 }
 
+// src/last-used-method.ts
+import * as React4 from "react";
+import {
+  readLastUsedSignInMethod,
+  recordLastUsedSignInMethod,
+  rememberPendingSignInMethod,
+  settlePendingSignInMethod
+} from "@authowl/core";
+function useLastUsedSignInMethod() {
+  const { config } = usePublicConfig();
+  const projectId = config?.environmentId ?? null;
+  return React4.useMemo(
+    () => projectId ? readLastUsedSignInMethod(projectId) : null,
+    [projectId]
+  );
+}
+function useSignInMethodRecorder() {
+  const { config } = usePublicConfig();
+  const projectId = config?.environmentId ?? null;
+  return React4.useCallback(
+    (method, pending) => {
+      if (!projectId) return;
+      (pending ? rememberPendingSignInMethod : recordLastUsedSignInMethod)(projectId, method);
+    },
+    [projectId]
+  );
+}
+function useConfirmPendingSignInMethod(loaded, signedIn, projectId) {
+  React4.useEffect(() => {
+    if (loaded && projectId) settlePendingSignInMethod(projectId, signedIn);
+  }, [loaded, projectId, signedIn]);
+}
+
 // src/provider.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var warnedConfigProjects = /* @__PURE__ */ new Set();
@@ -384,7 +418,13 @@ function warnPublicConfigFailed(resolved, error) {
     `[AuthOwl] Could not load this project's public config from ${origin} (${reason}). Authentication UI is unavailable until the request succeeds. Likely causes: the API is unreachable, \`apiUrl\` is wrong, or the publishable key points at a missing/mismatched project. Check \`apiUrl\` and \`publishableKey\` on <AuthOwlProvider>. (This warning is dev-only.)`
   );
 }
-var Context = React4.createContext(null);
+function LastUsedMethodSync() {
+  const { config } = usePublicConfig();
+  const { isLoaded, isSignedIn } = useUser();
+  useConfirmPendingSignInMethod(isLoaded, isSignedIn, config?.environmentId ?? null);
+  return null;
+}
+var Context = React5.createContext(null);
 function detectLocale() {
   if (typeof document !== "undefined") {
     const root = document.documentElement;
@@ -409,18 +449,18 @@ function AuthOwlProvider({
   invitationPrompt = true,
   children
 }) {
-  const fetchRef = React4.useRef(fetch);
+  const fetchRef = React5.useRef(fetch);
   fetchRef.current = fetch;
-  const resolved = React4.useMemo(
+  const resolved = React5.useMemo(
     () => resolveConfig({ publishableKey, apiUrl, fetch: fetchRef.current }),
     [publishableKey, apiUrl]
   );
-  const client = React4.useMemo(() => createAuthOwlClient(resolved), [resolved]);
-  const [config, setConfig] = React4.useState(null);
-  const [configState, setConfigState] = React4.useState("loading");
-  const [configAttempt, setConfigAttempt] = React4.useState(0);
-  const retryPublicConfig = React4.useCallback(() => setConfigAttempt((attempt) => attempt + 1), []);
-  React4.useEffect(() => {
+  const client = React5.useMemo(() => createAuthOwlClient(resolved), [resolved]);
+  const [config, setConfig] = React5.useState(null);
+  const [configState, setConfigState] = React5.useState("loading");
+  const [configAttempt, setConfigAttempt] = React5.useState(0);
+  const retryPublicConfig = React5.useCallback(() => setConfigAttempt((attempt) => attempt + 1), []);
+  React5.useEffect(() => {
     let active = true;
     setConfigState("loading");
     getPublicConfig(resolved).then((c) => {
@@ -438,15 +478,18 @@ function AuthOwlProvider({
     };
   }, [resolved, configAttempt]);
   const merged = resolveAppearance(appearance, config);
-  const [autoLocale, setAutoLocale] = React4.useState(null);
-  React4.useEffect(() => {
+  const [autoLocale, setAutoLocale] = React5.useState(null);
+  React5.useEffect(() => {
     if (localeProp === "auto") setAutoLocale(detectLocale());
   }, [localeProp]);
   const locale = resolveLocale(localeProp, autoLocale, config?.locale);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
+    return setActiveLocale(resolved.decoded.projectId, locale);
+  }, [locale, resolved.decoded.projectId]);
+  React5.useEffect(() => {
     captureInvitationClaim();
   }, []);
-  const ctxValue = React4.useMemo(
+  const ctxValue = React5.useMemo(
     () => ({ client, appearance, config, configState, retryPublicConfig, locale }),
     [client, appearance, config, configState, retryPublicConfig, locale]
   );
@@ -460,13 +503,14 @@ function AuthOwlProvider({
       style: { display: "contents", ...merged.style },
       children: [
         children,
+        /* @__PURE__ */ jsx4(LastUsedMethodSync, {}),
         invitationPrompt ? /* @__PURE__ */ jsx4(InvitationPrompt, {}) : null
       ]
     }
   ) });
 }
 function useAuthOwlContext() {
-  const v = React4.useContext(Context);
+  const v = React5.useContext(Context);
   if (!v) {
     throw new Error("AuthOwl hooks must be used inside <AuthOwlProvider>");
   }
@@ -490,6 +534,9 @@ function useAuthClient() {
 function useAccount() {
   return useAuthClient().account;
 }
+function usePrivacy() {
+  return useAuthClient().privacy;
+}
 function usePublicConfig() {
   const { config, configState, retryPublicConfig } = useAuthOwlContext();
   return {
@@ -501,7 +548,7 @@ function usePublicConfig() {
 }
 function useSession() {
   const client = useAuthClient();
-  return React5.useSyncExternalStore(
+  return React6.useSyncExternalStore(
     client.sessionStore.subscribe,
     client.sessionStore.getSnapshot,
     client.sessionStore.getSnapshot
@@ -531,16 +578,16 @@ function useAuth() {
 }
 function useOrganization() {
   const client = useAuthClient();
-  const apiRef = React5.useRef(client.organization);
+  const apiRef = React6.useRef(client.organization);
   apiRef.current = client.organization;
   const { data, isPending } = useSession();
   const membership = data?.session?.membership ?? null;
   const activeOrganizationId = data?.session?.activeOrganizationId ?? null;
   const identity = data?.user?.id ?? null;
-  const [organization, setOrganization] = React5.useState(null);
-  const [orgLoaded, setOrgLoaded] = React5.useState(false);
-  const requestRef = React5.useRef(0);
-  React5.useEffect(() => {
+  const [organization, setOrganization] = React6.useState(null);
+  const [orgLoaded, setOrgLoaded] = React6.useState(false);
+  const requestRef = React6.useRef(0);
+  React6.useEffect(() => {
     const token = ++requestRef.current;
     setOrganization(null);
     setOrgLoaded(false);
@@ -564,7 +611,7 @@ function useOrganization() {
       requestRef.current += 1;
     };
   }, [identity, activeOrganizationId, isPending]);
-  const bound = React5.useMemo(() => createMembershipHas(membership), [membership]);
+  const bound = React6.useMemo(() => createMembershipHas(membership), [membership]);
   return {
     organization,
     membership,
@@ -579,13 +626,13 @@ function useOrganization() {
 }
 function useInvitationRecipientHint() {
   const client = useAuthClient();
-  const apiRef = React5.useRef(client.organization);
+  const apiRef = React6.useRef(client.organization);
   apiRef.current = client.organization;
-  const [result, setResult] = React5.useState({
+  const [result, setResult] = React6.useState({
     recipientHint: null,
     isLoaded: false
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let active = true;
     const claim = readInvitationClaim();
     if (!claim) {
@@ -616,18 +663,18 @@ function useInvitationRecipientHint() {
 }
 function useOrganizationInvitation() {
   const client = useAuthClient();
-  const apiRef = React5.useRef(client.organization);
+  const apiRef = React6.useRef(client.organization);
   apiRef.current = client.organization;
   const { data, isPending } = useSession();
   const identity = data?.user?.id ?? null;
-  const [claim, setClaim] = React5.useState(null);
-  const [invitation, setInvitation] = React5.useState(null);
-  const [status, setStatus] = React5.useState("idle");
-  const requestRef = React5.useRef(0);
-  React5.useEffect(() => {
+  const [claim, setClaim] = React6.useState(null);
+  const [invitation, setInvitation] = React6.useState(null);
+  const [status, setStatus] = React6.useState("idle");
+  const requestRef = React6.useRef(0);
+  React6.useEffect(() => {
     setClaim(readInvitationClaim());
   }, [identity]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const token = ++requestRef.current;
     if (isPending || !claim) return;
     if (!identity) {
@@ -650,7 +697,7 @@ function useOrganizationInvitation() {
       requestRef.current += 1;
     };
   }, [claim, identity, isPending]);
-  const accept = React5.useCallback(async () => {
+  const accept = React6.useCallback(async () => {
     const current = readInvitationClaim();
     if (!current) return false;
     setStatus("joining");
@@ -672,7 +719,7 @@ function useOrganizationInvitation() {
     } else setStatus("error");
     return false;
   }, []);
-  const dismiss = React5.useCallback(() => {
+  const dismiss = React6.useCallback(() => {
     clearInvitationClaim();
     setClaim(null);
     setInvitation(null);
@@ -733,10 +780,10 @@ function useConsent() {
   const client = useAuthClient();
   const { user, isLoaded } = useUser();
   const userId = user?.id ?? null;
-  const [status, setStatus] = React5.useState(null);
-  const [isLoading, setIsLoading] = React5.useState(true);
-  const reqRef = React5.useRef(0);
-  const load = React5.useCallback(async () => {
+  const [status, setStatus] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(true);
+  const reqRef = React6.useRef(0);
+  const load = React6.useCallback(async () => {
     const reqId = ++reqRef.current;
     setIsLoading(true);
     let next;
@@ -749,7 +796,7 @@ function useConsent() {
     setStatus(next);
     setIsLoading(false);
   }, [client]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     reqRef.current += 1;
     setStatus(null);
     if (!isLoaded) {
@@ -759,7 +806,7 @@ function useConsent() {
     void load();
   }, [load, isLoaded, userId]);
   const version = typeof status?.version === "number" && Number.isFinite(status.version) ? status.version : null;
-  const accept = React5.useCallback(async () => {
+  const accept = React6.useCallback(async () => {
     if (version == null) return;
     try {
       await client.acceptConsent(version);
@@ -782,35 +829,6 @@ function useSignOut() {
   return { signOut: client.signOut };
 }
 
-// src/components/use-submit-action.ts
-import * as React6 from "react";
-function useSubmitAction() {
-  const [pending, setPending] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
-  const toMessage = useServerError();
-  const run = React6.useCallback(
-    async (action, { failure, onSuccess, mapError, keepPendingOnSuccess }) => {
-      setError(null);
-      setPending(true);
-      try {
-        const res = await action();
-        if (res?.error) {
-          setError(mapError?.(res.error) ?? toMessage(res.error, failure));
-          setPending(false);
-          return;
-        }
-        await onSuccess?.(res ?? { data: null, error: null });
-        if (!keepPendingOnSuccess) setPending(false);
-      } catch {
-        setError(failure);
-        setPending(false);
-      }
-    },
-    [toMessage]
-  );
-  return { pending, error, setError, run };
-}
-
 // src/components/Spinner.tsx
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Spinner() {
@@ -839,91 +857,11 @@ function FormError({ children, className, "data-testid": testId }) {
   );
 }
 
-// src/components/organization/model.ts
-function organizationSlugFromName(name) {
-  return name.normalize("NFKD").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63);
-}
-function organizationRoles(role) {
-  return role.split(",").map((value) => value.trim()).filter(Boolean);
-}
-function hasOrganizationRole(member, role) {
-  return member ? organizationRoles(member.role).includes(role) : false;
-}
-function canManageOrganization(member) {
-  return hasOrganizationRole(member, "owner") || hasOrganizationRole(member, "admin");
-}
-function roleHasStatement(roles, heldRoles, resource, action) {
-  return roles.some((role) => {
-    if (!heldRoles.has(role.role) || typeof role.permission !== "object" || role.permission === null) {
-      return false;
-    }
-    const actions = role.permission[resource];
-    return Array.isArray(actions) && actions.includes(action);
-  });
-}
-function teamManagementCapabilities(member, dynamicRoles) {
-  const heldRoles = new Set(organizationRoles(member.role));
-  if (heldRoles.has("owner") || heldRoles.has("admin")) {
-    return {
-      createTeam: true,
-      updateTeam: true,
-      deleteTeam: true,
-      addTeamMember: true,
-      removeTeamMember: true
-    };
-  }
-  return {
-    createTeam: roleHasStatement(dynamicRoles, heldRoles, "team", "create"),
-    updateTeam: roleHasStatement(dynamicRoles, heldRoles, "team", "update"),
-    deleteTeam: roleHasStatement(dynamicRoles, heldRoles, "team", "delete"),
-    addTeamMember: roleHasStatement(dynamicRoles, heldRoles, "member", "update"),
-    removeTeamMember: roleHasStatement(dynamicRoles, heldRoles, "member", "delete")
-  };
-}
-
-// src/components/organization/use-organization-roles.ts
-import * as React7 from "react";
-var BUILTIN_ROLES = ["owner", "admin", "member"];
-function useOrganizationRoles(organizationId) {
-  const api = useAuthClient().organization;
-  const apiRef = React7.useRef(api);
-  apiRef.current = api;
-  const [dynamicRoles, setDynamicRoles] = React7.useState([]);
-  const requestRef = React7.useRef(0);
-  React7.useEffect(() => {
-    const token = ++requestRef.current;
-    setDynamicRoles([]);
-    if (!organizationId) return;
-    void (async () => {
-      try {
-        const result = await apiRef.current.listRoles({ organizationId });
-        if (token !== requestRef.current) return;
-        setDynamicRoles((result.data ?? []).filter((entry) => entry.role.trim().length > 0));
-      } catch {
-      }
-    })();
-    return () => {
-      requestRef.current += 1;
-    };
-  }, [organizationId]);
-  const roles = React7.useMemo(() => {
-    const seen = /* @__PURE__ */ new Set();
-    const out = [];
-    for (const candidate of [...BUILTIN_ROLES, ...dynamicRoles.map((entry) => entry.role)]) {
-      const key = candidate.trim();
-      if (!key || seen.has(key)) continue;
-      seen.add(key);
-      out.push(key);
-    }
-    return out;
-  }, [dynamicRoles]);
-  return { roles, dynamicRoles };
-}
-
 export {
   DEFAULT_BRAND_COLOR,
   useAuthClient,
   useAccount,
+  usePrivacy,
   usePublicConfig,
   useSession,
   useUser,
@@ -947,16 +885,11 @@ export {
   useServerError,
   ModalSurface,
   InvitationPrompt,
+  useLastUsedSignInMethod,
+  useSignInMethodRecorder,
   AuthOwlProvider,
   useAuthOwlContext,
-  useSubmitAction,
   Spinner,
   Busy,
-  FormError,
-  organizationSlugFromName,
-  organizationRoles,
-  hasOrganizationRole,
-  canManageOrganization,
-  teamManagementCapabilities,
-  useOrganizationRoles
+  FormError
 };

package/dist/chunk-ZYCPC5DH.js

@@ -0,0 +1,46 @@
+import {
+  useAuthClient
+} from "./chunk-TOVDZ2ZE.js";
+
+// src/components/organization/use-organization-roles.ts
+import * as React from "react";
+var BUILTIN_ROLES = ["owner", "admin", "member"];
+function useOrganizationRoles(organizationId) {
+  const api = useAuthClient().organization;
+  const apiRef = React.useRef(api);
+  apiRef.current = api;
+  const [dynamicRoles, setDynamicRoles] = React.useState([]);
+  const requestRef = React.useRef(0);
+  React.useEffect(() => {
+    const token = ++requestRef.current;
+    setDynamicRoles([]);
+    if (!organizationId) return;
+    void (async () => {
+      try {
+        const result = await apiRef.current.listRoles({ organizationId });
+        if (token !== requestRef.current) return;
+        setDynamicRoles((result.data ?? []).filter((entry) => entry.role.trim().length > 0));
+      } catch {
+      }
+    })();
+    return () => {
+      requestRef.current += 1;
+    };
+  }, [organizationId]);
+  const roles = React.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const candidate of [...BUILTIN_ROLES, ...dynamicRoles.map((entry) => entry.role)]) {
+      const key = candidate.trim();
+      if (!key || seen.has(key)) continue;
+      seen.add(key);
+      out.push(key);
+    }
+    return out;
+  }, [dynamicRoles]);
+  return { roles, dynamicRoles };
+}
+
+export {
+  useOrganizationRoles
+};