@authowl/react 0.22.0 → 0.23.0

package/dist/{TeamsSection-ZQDNMWV3.js → TeamsSection-NV64O5I4.js}

@@ -9,7 +9,7 @@ import {
   useServerError,
   useSubmitAction,
   useT
-} from "./chunk-PUJV7S6G.js";
+} from "./chunk-E5ZOQHXY.js";
 
 // src/components/organization/TeamsSection.tsx
 import * as React4 from "react";

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

@@ -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>");
   }
@@ -501,7 +545,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 +575,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 +608,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 +623,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 +660,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 +694,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 +716,7 @@ function useOrganizationInvitation() {
     } else setStatus("error");
     return false;
   }, []);
-  const dismiss = React5.useCallback(() => {
+  const dismiss = React6.useCallback(() => {
     clearInvitationClaim();
     setClaim(null);
     setInvitation(null);
@@ -733,10 +777,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 +793,7 @@ function useConsent() {
     setStatus(next);
     setIsLoading(false);
   }, [client]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     reqRef.current += 1;
     setStatus(null);
     if (!isLoaded) {
@@ -759,7 +803,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);
@@ -783,12 +827,12 @@ function useSignOut() {
 }
 
 // src/components/use-submit-action.ts
-import * as React6 from "react";
+import * as React7 from "react";
 function useSubmitAction() {
-  const [pending, setPending] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
+  const [pending, setPending] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
   const toMessage = useServerError();
-  const run = React6.useCallback(
+  const run = React7.useCallback(
     async (action, { failure, onSuccess, mapError, keepPendingOnSuccess }) => {
       setError(null);
       setPending(true);
@@ -882,15 +926,15 @@ function teamManagementCapabilities(member, dynamicRoles) {
 }
 
 // src/components/organization/use-organization-roles.ts
-import * as React7 from "react";
+import * as React8 from "react";
 var BUILTIN_ROLES = ["owner", "admin", "member"];
 function useOrganizationRoles(organizationId) {
   const api = useAuthClient().organization;
-  const apiRef = React7.useRef(api);
+  const apiRef = React8.useRef(api);
   apiRef.current = api;
-  const [dynamicRoles, setDynamicRoles] = React7.useState([]);
-  const requestRef = React7.useRef(0);
-  React7.useEffect(() => {
+  const [dynamicRoles, setDynamicRoles] = React8.useState([]);
+  const requestRef = React8.useRef(0);
+  React8.useEffect(() => {
     const token = ++requestRef.current;
     setDynamicRoles([]);
     if (!organizationId) return;
@@ -906,7 +950,7 @@ function useOrganizationRoles(organizationId) {
       requestRef.current += 1;
     };
   }, [organizationId]);
-  const roles = React7.useMemo(() => {
+  const roles = React8.useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     const out = [];
     for (const candidate of [...BUILTIN_ROLES, ...dynamicRoles.map((entry) => entry.role)]) {
@@ -947,6 +991,8 @@ export {
   useServerError,
   ModalSurface,
   InvitationPrompt,
+  useLastUsedSignInMethod,
+  useSignInMethodRecorder,
   AuthOwlProvider,
   useAuthOwlContext,
   useSubmitAction,