@orangecheck/auth-client 2.17.2 → 2.19.0

package/dist/index.mjs

@@ -27,6 +27,91 @@ function buildAddAccountUrl(cfg, returnTo) {
   u.searchParams.set("add", "1");
   return u.toString();
 }
+
+// src/tab-session.ts
+var TAB_SESSION_HEADER = "x-oc-tab-session";
+var TAB_SESSION_STORAGE_KEY = "oc_tab_session";
+var TAB_ADOPT_HASH = "#oc-adopt";
+function readTabSession() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(TAB_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.token !== "string" || parsed.token.length === 0) return null;
+    if (typeof parsed.didOc !== "string" || parsed.didOc.length === 0) return null;
+    return { token: parsed.token, didOc: parsed.didOc };
+  } catch {
+    return null;
+  }
+}
+function writeTabSession(session) {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(TAB_SESSION_STORAGE_KEY, JSON.stringify(session));
+  } catch {
+  }
+}
+function clearTabSession() {
+  if (typeof window === "undefined") return;
+  try {
+    window.sessionStorage.removeItem(TAB_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+function tabSessionHeader() {
+  const pin = readTabSession();
+  return pin ? { [TAB_SESSION_HEADER]: pin.token } : {};
+}
+function isPinnableUrl(url, authOrigin) {
+  if (typeof window === "undefined") return false;
+  try {
+    const u = new URL(url, window.location.href);
+    return u.origin === window.location.origin || u.origin === authOrigin;
+  } catch {
+    return false;
+  }
+}
+function installTabFetchInterceptor(authOrigin) {
+  if (typeof window === "undefined") return () => {
+  };
+  const original = window.fetch;
+  const wrapped = (input, init) => {
+    try {
+      const pin = readTabSession();
+      if (pin) {
+        const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+        if (isPinnableUrl(url, authOrigin)) {
+          const headers = new Headers(
+            init?.headers ?? (input instanceof Request ? input.headers : void 0)
+          );
+          if (!headers.has("authorization") && !headers.has(TAB_SESSION_HEADER)) {
+            headers.set(TAB_SESSION_HEADER, pin.token);
+            init = { ...init, headers };
+          }
+        }
+      }
+    } catch {
+    }
+    return original.call(window, input, init);
+  };
+  window.fetch = wrapped;
+  return () => {
+    if (window.fetch === wrapped) window.fetch = original;
+  };
+}
+function consumeTabAdoptMarker() {
+  if (typeof window === "undefined") return false;
+  if (!window.location.hash.includes(TAB_ADOPT_HASH.slice(1))) return false;
+  clearTabSession();
+  try {
+    const url = new URL(window.location.href);
+    url.hash = "";
+    window.history.replaceState(window.history.state, "", url.toString());
+  } catch {
+  }
+  return true;
+}
 var SessionContext = React3.createContext(null);
 function normalizeDisplayIdentity(raw, didOc) {
   const di = raw.display_identity ?? raw.displayIdentity;
@@ -53,7 +138,7 @@ async function fetchHostRoster(cfg) {
     const res = await fetch(`${cfg.authOrigin}${cfg.mePath}`, {
       method: "GET",
       credentials: "include",
-      headers: { Accept: "application/json" }
+      headers: { Accept: "application/json", ...tabSessionHeader() }
     });
     if (!res.ok) return [];
     const body = await res.json();
@@ -90,14 +175,50 @@ function OcSessionProvider({
   const [roster, setRoster] = React3.useState([]);
   const [status, setStatus] = React3.useState("loading");
   const [error, setError] = React3.useState(null);
+  const [tabPinned, setTabPinned] = React3.useState(false);
+  const pinInFlightRef = React3.useRef(false);
+  const pinThisTab = React3.useCallback(
+    async (didOc) => {
+      if (pinInFlightRef.current || readTabSession()) return;
+      pinInFlightRef.current = true;
+      try {
+        const res = await fetch(`${cfg.authOrigin}/api/auth/tab`, {
+          method: "POST",
+          credentials: "include",
+          headers: { Accept: "application/json" }
+        });
+        if (!res.ok) return;
+        const body = await res.json();
+        if (body.ok && typeof body.token === "string" && body.account?.did_oc === didOc) {
+          writeTabSession({ token: body.token, didOc });
+          setTabPinned(true);
+        }
+      } catch {
+      } finally {
+        pinInFlightRef.current = false;
+      }
+    },
+    [cfg.authOrigin]
+  );
   const refresh = React3.useCallback(async () => {
     if (typeof window === "undefined") return;
     try {
-      const res = await fetch(cfg.mePath, {
+      let pin = readTabSession();
+      let res = await fetch(cfg.mePath, {
         method: "GET",
         credentials: "include",
-        headers: { Accept: "application/json" }
+        headers: { Accept: "application/json", ...tabSessionHeader() }
       });
+      if (res.status === 401 && pin) {
+        clearTabSession();
+        pin = null;
+        setTabPinned(false);
+        res = await fetch(cfg.mePath, {
+          method: "GET",
+          credentials: "include",
+          headers: { Accept: "application/json" }
+        });
+      }
       if (res.status === 401) {
         setAccount(null);
         setRoster([]);
@@ -112,11 +233,17 @@ function OcSessionProvider({
       }
       const body = await res.json();
       const acct = normalizeAccount(body.account);
+      if (acct && pin && acct.didOc !== pin.didOc) {
+        clearTabSession();
+        pin = null;
+      }
+      setTabPinned(pin !== null);
       const rosterEntries = Array.isArray(body.roster) ? body.roster.map(normalizeRosterEntry).filter((r) => r !== null) : [];
       setAccount(acct);
       setRoster(rosterEntries);
       setStatus(acct ? "authenticated" : "anonymous");
       setError(null);
+      if (acct && !pin) void pinThisTab(acct.didOc);
       const currentOrigin = typeof window !== "undefined" ? window.location.origin : null;
       if (acct && rosterEntries.length === 0 && currentOrigin !== null && !cfg.authOrigin.startsWith(currentOrigin)) {
         const peers = await fetchHostRoster(cfg);
@@ -126,10 +253,12 @@ function OcSessionProvider({
       setStatus("error");
       setError(err instanceof Error ? err : new Error(String(err)));
     }
-  }, [cfg]);
+  }, [cfg, pinThisTab]);
   React3.useEffect(() => {
+    consumeTabAdoptMarker();
     void refresh();
   }, [refresh]);
+  React3.useEffect(() => installTabFetchInterceptor(cfg.authOrigin), [cfg.authOrigin]);
   const signOut = React3.useCallback(
     async (opts) => {
       const scope = opts?.scope ?? "all";
@@ -139,6 +268,10 @@ function OcSessionProvider({
         const res = await fetch(url.toString(), {
           method: "POST",
           credentials: "include",
+          // Per-tab · carry the pin so scope='current' signs out
+          // the account THIS tab is operating as, not whichever
+          // account the shared cookie happens to point at.
+          headers: { ...tabSessionHeader() },
           // `keepalive` lets the logout round-trip complete even if
           // the caller hard-navigates away in the same tick (e.g.
           // `<OcAccountMenu>` redirects home immediately on sign-out).
@@ -146,11 +279,15 @@ function OcSessionProvider({
           // and the `.ochk.io` cookie may never get cleared.
           keepalive: true
         });
+        clearTabSession();
+        setTabPinned(false);
         if (scope === "current" && res.ok) {
           await refresh();
           return;
         }
       } catch {
+        clearTabSession();
+        setTabPinned(false);
       }
       setAccount(null);
       setRoster([]);
@@ -164,7 +301,7 @@ function OcSessionProvider({
       const res = await fetch(`${cfg.authOrigin}/api/auth/switch`, {
         method: "POST",
         credentials: "include",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...tabSessionHeader() },
         body: JSON.stringify({ did_oc: didOc })
       });
       if (!res.ok) {
@@ -176,6 +313,14 @@ function OcSessionProvider({
         }
         throw new Error(`[@orangecheck/auth-client] switchAccount failed: ${reason}`);
       }
+      try {
+        const body = await res.json();
+        if (typeof body.token === "string" && body.account?.did_oc) {
+          writeTabSession({ token: body.token, didOc: body.account.did_oc });
+          setTabPinned(true);
+        }
+      } catch {
+      }
       await refresh();
     },
     [cfg.authOrigin, refresh]
@@ -193,7 +338,7 @@ function OcSessionProvider({
       const res = await fetch(`${cfg.authOrigin}/api/auth/account`, {
         method: "PATCH",
         credentials: "include",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...tabSessionHeader() },
         body: JSON.stringify({ display_identity: kind })
       });
       if (!res.ok) {
@@ -205,6 +350,14 @@ function OcSessionProvider({
         }
         throw new Error(`[@orangecheck/auth-client] setDisplayIdentity failed: ${reason}`);
       }
+      try {
+        const body = await res.json();
+        const pin = readTabSession();
+        if (pin && typeof body.token === "string" && body.account?.did_oc === pin.didOc) {
+          writeTabSession({ token: body.token, didOc: pin.didOc });
+        }
+      } catch {
+      }
       await refresh();
     },
     [cfg.authOrigin, refresh]
@@ -215,6 +368,7 @@ function OcSessionProvider({
       status,
       account,
       roster,
+      tabPinned,
       error,
       refresh,
       signOut,
@@ -227,6 +381,7 @@ function OcSessionProvider({
     status,
     account,
     roster,
+    tabPinned,
     error,
     refresh,
     signOut,
@@ -1752,6 +1907,18 @@ function safeReturnTo(input) {
   if (!candidate.startsWith("/") || candidate.startsWith("//")) return "/";
   return candidate;
 }
+function familyReturnTarget(input) {
+  if (typeof input !== "string" || input.length === 0) return void 0;
+  if (input.startsWith("/") && !input.startsWith("//")) return input;
+  try {
+    const u = new URL(input);
+    if (u.protocol !== "https:") return void 0;
+    const host = u.hostname.toLowerCase();
+    if (host === "ochk.io" || host.endsWith(".ochk.io")) return u.toString();
+  } catch {
+  }
+  return void 0;
+}
 function hardNavigate(target) {
   if (typeof window === "undefined") return;
   window.location.assign(target);
@@ -1764,13 +1931,27 @@ function OcSignIn({
   linkPrompt = true,
   add: addProp,
   authOrigin = "https://ochk.io",
-  initialPath = "wallet",
+  initialPath,
+  providersFirst = false,
   paths,
   className
 }) {
   const walletEnabled = paths?.wallet ?? true;
   const emailEnabled = paths?.email ?? true;
-  const safeReturn = safeReturnTo(returnTo);
+  const [resolvedReturn, setResolvedReturn] = React3.useState(
+    () => familyReturnTarget(returnTo) ?? safeReturnTo(returnTo)
+  );
+  React3.useEffect(() => {
+    const fromProp = familyReturnTarget(returnTo);
+    if (fromProp) {
+      setResolvedReturn(fromProp);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const q = new URLSearchParams(window.location.search);
+    const fromQuery = familyReturnTarget(q.get("return_to")) ?? familyReturnTarget(q.get("next"));
+    setResolvedReturn(fromQuery ?? "/");
+  }, [returnTo]);
   const [addMode, setAddMode] = React3.useState(Boolean(addProp));
   React3.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -1780,7 +1961,9 @@ function OcSignIn({
     }
     setAddMode(new URLSearchParams(window.location.search).get("add") === "1");
   }, [addProp]);
-  const [path, setPath] = React3.useState(initialPath);
+  const [path, setPath] = React3.useState(
+    initialPath ?? (providersFirst ? "email" : "wallet")
+  );
   const [signedIn, setSignedIn] = React3.useState(null);
   const [linkAlso, setLinkAlso] = React3.useState(false);
   const [oauthError, setOauthError] = React3.useState(false);
@@ -1794,18 +1977,20 @@ function OcSignIn({
     async (account) => {
       if (resolveReturnTo) {
         try {
-          hardNavigate(safeReturnTo(await resolveReturnTo(account)));
+          const resolved = familyReturnTarget(await resolveReturnTo(account));
+          hardNavigate(resolved ?? resolvedReturn);
           return;
         } catch {
         }
       }
-      hardNavigate(safeReturn);
+      hardNavigate(resolvedReturn);
     },
-    [resolveReturnTo, safeReturn]
+    [resolveReturnTo, resolvedReturn]
   );
   const handleSuccess = React3.useCallback(
     async (account, token, via) => {
       const proceed = () => {
+        clearTabSession();
         if (onSuccess) onSuccess(account, token);
         else void navigate(account);
       };
@@ -1926,7 +2111,16 @@ function OcSignIn({
         ]
       }
     ),
-    bothEnabled && /* @__PURE__ */ jsxs(
+    providersFirst && /* @__PURE__ */ jsx(
+      ProviderSignIn,
+      {
+        authOrigin,
+        returnTo: resolvedReturn,
+        add: addMode,
+        first: true
+      }
+    ),
+    bothEnabled && /* @__PURE__ */ jsx(
       "div",
       {
         role: "tablist",
@@ -1938,7 +2132,24 @@ function OcSignIn({
           marginBottom: 16,
           borderBottom: "1px solid var(--border, #27272a)"
         },
-        children: [
+        children: providersFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SigninTab,
+            {
+              active: path === "email",
+              onClick: () => setPath("email"),
+              children: "email + otp"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SigninTab,
+            {
+              active: path === "wallet",
+              onClick: () => setPath("wallet"),
+              children: "bitcoin \xB7 self-custody"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             SigninTab,
             {
@@ -1947,8 +2158,15 @@ function OcSignIn({
               children: "bitcoin wallet"
             }
           ),
-          /* @__PURE__ */ jsx(SigninTab, { active: path === "email", onClick: () => setPath("email"), children: "email + otp" })
-        ]
+          /* @__PURE__ */ jsx(
+            SigninTab,
+            {
+              active: path === "email",
+              onClick: () => setPath("email"),
+              children: "email + otp"
+            }
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ jsxs("div", { "data-oc-signin-panel": "", role: "tabpanel", children: [
@@ -1970,7 +2188,7 @@ function OcSignIn({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(ProviderSignIn, { authOrigin, returnTo: safeReturn }),
+    !providersFirst && /* @__PURE__ */ jsx(ProviderSignIn, { authOrigin, returnTo: resolvedReturn, add: addMode }),
     linkPrompt && /* @__PURE__ */ jsxs("label", { "data-oc-signin-linkalso": "", style: linkAlsoStyle, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -2040,7 +2258,9 @@ function ProviderIcon({ id }) {
 }
 function ProviderSignIn({
   authOrigin,
-  returnTo
+  returnTo,
+  add,
+  first = false
 }) {
   const [providers, setProviders] = React3.useState([]);
   const [origin, setOrigin] = React3.useState("");
@@ -2056,62 +2276,67 @@ function ProviderSignIn({
     };
   }, [authOrigin]);
   if (providers.length === 0) return null;
-  const providerReturnTo = origin ? `${origin}${returnTo}` : returnTo;
+  const providerReturnTo = returnTo.startsWith("/") ? origin ? `${origin}${returnTo}` : returnTo : returnTo;
   const line = { flex: 1, height: 1, background: "var(--border, #27272a)" };
-  return /* @__PURE__ */ jsxs("div", { "data-oc-signin-providers": "", style: { marginTop: 20 }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          margin: "4px 0 12px",
-          color: "var(--muted-foreground, #a1a1aa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 10,
-          letterSpacing: "0.16em",
-          textTransform: "uppercase"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: line }),
-          "or",
-          /* @__PURE__ */ jsx("span", { style: line })
-        ]
-      }
-    ),
-    providers.map((p, i) => /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
-          providerReturnTo
-        )}`,
-        "data-oc-signin-provider": p.id,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 10,
-          boxSizing: "border-box",
-          width: "100%",
-          marginTop: i === 0 ? 0 : 8,
-          padding: "0.6rem 0.875rem",
-          border: "1px solid var(--border, #27272a)",
-          borderRadius: 6,
-          background: "transparent",
-          color: "var(--muted-foreground, #a1a1aa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 12,
-          textDecoration: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsx(ProviderIcon, { id: p.id }),
-          /* @__PURE__ */ jsx("span", { children: p.label })
-        ]
+  const divider = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        margin: first ? "14px 0 4px" : "4px 0 12px",
+        color: "var(--muted-foreground, #a1a1aa)",
+        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontSize: 10,
+        letterSpacing: "0.16em",
+        textTransform: "uppercase"
       },
-      p.id
-    ))
-  ] });
+      children: [
+        /* @__PURE__ */ jsx("span", { style: line }),
+        "or",
+        /* @__PURE__ */ jsx("span", { style: line })
+      ]
+    }
+  );
+  const buttons = providers.map((p, i) => /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
+        providerReturnTo
+      )}${add ? "&add=1" : ""}`,
+      "data-oc-signin-provider": p.id,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        boxSizing: "border-box",
+        width: "100%",
+        marginTop: i === 0 ? 0 : 8,
+        padding: "0.6rem 0.875rem",
+        border: "1px solid var(--border, #27272a)",
+        borderRadius: 6,
+        background: "transparent",
+        color: "var(--muted-foreground, #a1a1aa)",
+        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontSize: 12,
+        textDecoration: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx(ProviderIcon, { id: p.id }),
+        /* @__PURE__ */ jsx("span", { children: p.label })
+      ]
+    },
+    p.id
+  ));
+  return /* @__PURE__ */ jsx("div", { "data-oc-signin-providers": "", style: first ? { marginBottom: 4 } : { marginTop: 20 }, children: first ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    buttons,
+    divider
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    divider,
+    buttons
+  ] }) });
 }
 function WalletFlow({ authOrigin, audience, add, onSuccess }) {
   const [address, setAddress] = React3.useState("");
@@ -2766,6 +2991,6 @@ function handleSudoRequired(body, args = {}) {
   return false;
 }
 
-export { DEFAULT_CONFIG, DISPLAY_IDENTITY_KINDS, OcAccountChip, OcAccountPill, OcAddressInput, OcLinkedIdentities, OcSessionProvider, OcSignIn, OcSignInButton, buildAddAccountUrl, buildSignInUrl, fetchOcLinkedIdentities, handleSudoRequired, redirectToSudo, useOcAddressSuggestion, useOcSession, useOptionalOcSession, useStepUpAuth, useWebAuthnList, useWebAuthnRegister };
+export { DEFAULT_CONFIG, DISPLAY_IDENTITY_KINDS, OcAccountChip, OcAccountPill, OcAddressInput, OcLinkedIdentities, OcSessionProvider, OcSignIn, OcSignInButton, TAB_ADOPT_HASH, TAB_SESSION_HEADER, TAB_SESSION_STORAGE_KEY, buildAddAccountUrl, buildSignInUrl, clearTabSession, consumeTabAdoptMarker, fetchOcLinkedIdentities, handleSudoRequired, installTabFetchInterceptor, readTabSession, redirectToSudo, tabSessionHeader, useOcAddressSuggestion, useOcSession, useOptionalOcSession, useStepUpAuth, useWebAuthnList, useWebAuthnRegister, writeTabSession };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map