@orangecheck/auth-client 2.26.0 → 2.28.0

package/dist/index.mjs

@@ -10,7 +10,8 @@ var DEFAULT_CONFIG = {
   authOrigin: "https://ochk.io",
   signInPath: "/signin",
   mePath: "/api/auth/me",
-  logoutPath: "/api/auth/logout"
+  logoutPath: "/api/auth/logout",
+  multiAccount: true
 };
 function resolveConfig(cfg) {
   return { ...DEFAULT_CONFIG, ...cfg ?? {} };
@@ -266,7 +267,7 @@ function OcSessionProvider({
   const pinInFlightRef = React4.useRef(false);
   const pinThisTab = React4.useCallback(
     async (didOc) => {
-      if (pinInFlightRef.current || readTabSession()) return;
+      if (!cfg.multiAccount || pinInFlightRef.current || readTabSession()) return;
       pinInFlightRef.current = true;
       try {
         const res = await fetch(`${cfg.authOrigin}/api/auth/tab`, {
@@ -285,7 +286,7 @@ function OcSessionProvider({
         pinInFlightRef.current = false;
       }
     },
-    [cfg.authOrigin]
+    [cfg.authOrigin, cfg.multiAccount]
   );
   const refresh = React4.useCallback(async () => {
     if (typeof window === "undefined") return;
@@ -332,7 +333,7 @@ function OcSessionProvider({
       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)) {
+      if (cfg.multiAccount && acct && rosterEntries.length === 0 && currentOrigin !== null && !cfg.authOrigin.startsWith(currentOrigin)) {
         const peers = await fetchHostRoster(cfg);
         if (peers.length > 0) setRoster(peers);
       }
@@ -345,15 +346,21 @@ function OcSessionProvider({
     let cancelled = false;
     consumeTabAdoptMarker();
     void (async () => {
-      await consumeTabAccountHint(cfg.authOrigin);
+      if (cfg.multiAccount) await consumeTabAccountHint(cfg.authOrigin);
       if (!cancelled) void refresh();
     })();
     return () => {
       cancelled = true;
     };
-  }, [refresh, cfg.authOrigin]);
-  React4.useEffect(() => installTabFetchInterceptor(cfg.authOrigin), [cfg.authOrigin]);
-  React4.useEffect(() => installTabLinkDecorator(cfg.authOrigin), [cfg.authOrigin]);
+  }, [refresh, cfg.authOrigin, cfg.multiAccount]);
+  React4.useEffect(
+    () => cfg.multiAccount ? installTabFetchInterceptor(cfg.authOrigin) : void 0,
+    [cfg.authOrigin, cfg.multiAccount]
+  );
+  React4.useEffect(
+    () => cfg.multiAccount ? installTabLinkDecorator(cfg.authOrigin) : void 0,
+    [cfg.authOrigin, cfg.multiAccount]
+  );
   const signOut = React4.useCallback(
     async (opts) => {
       const scope = opts?.scope ?? "all";
@@ -1158,6 +1165,15 @@ var SUDO_ACCOUNT_MISMATCH_MESSAGE = "Switch this tab to that account first \u201
 function isSudoAccountMismatch(body) {
   return body?.reason === "sudo_account_mismatch";
 }
+
+// src/appearance.ts
+var SIGNIN_FONT = "var(--oc-signin-font, ui-monospace, SFMono-Regular, monospace)";
+var SIGNIN_CASE = "var(--oc-signin-case, uppercase)";
+var signinTracking = (em) => `var(--oc-signin-tracking, ${em})`;
+var signinSize = (px) => `calc(${px}px * var(--oc-signin-scale, 1))`;
+var signinRadius = (px) => `var(--oc-signin-radius, ${px}px)`;
+var SIGNIN_BUTTON_RADIUS = "var(--oc-signin-button-radius, 6px)";
+var SIGNIN_STRONG = "var(--oc-signin-strong, 600)";
 var DEFAULT_AUTH_ORIGIN = "https://ochk.io";
 async function fetchOcLinkedIdentities(opts) {
   const authOrigin = opts?.authOrigin ?? DEFAULT_AUTH_ORIGIN;
@@ -1372,8 +1388,8 @@ function IdentityRow({
           style: {
             marginTop: 4,
             color: V.foreground,
-            fontFamily: MONO,
-            fontSize: 12,
+            fontFamily: SIGNIN_FONT,
+            fontSize: signinSize(12),
             wordBreak: "break-all"
           },
           children: display
@@ -1451,8 +1467,8 @@ function ConsolidationPanel({ entries }) {
           gap: 8,
           padding: "8px 0",
           borderTop: `1px solid ${V.border}`,
-          fontFamily: MONO,
-          fontSize: 11
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11)
         },
         children: [
           /* @__PURE__ */ jsx("code", { style: { color: V.foreground, wordBreak: "break-all" }, children: e.did_oc }),
@@ -1755,7 +1771,7 @@ function BtcLinkForm({
           placeholder: "bc1q\u2026",
           autoCapitalize: "none",
           spellCheck: false,
-          style: { ...inputStyle, fontFamily: MONO }
+          style: { ...inputStyle, fontFamily: SIGNIN_FONT }
         }
       ),
       err && /* @__PURE__ */ jsx(ErrorLine, { children: err }),
@@ -1785,7 +1801,7 @@ function BtcLinkForm({
       /* @__PURE__ */ jsxs("p", { style: bodyStyle, children: [
         "Sign the challenge with the wallet that controls",
         " ",
-        /* @__PURE__ */ jsx("span", { style: { fontFamily: MONO, wordBreak: "break-all" }, children: addr }),
+        /* @__PURE__ */ jsx("span", { style: { fontFamily: SIGNIN_FONT, wordBreak: "break-all" }, children: addr }),
         "."
       ] }),
       /* @__PURE__ */ jsx(
@@ -1893,10 +1909,10 @@ function SectionLabel({
     {
       style: {
         color,
-        fontFamily: MONO,
-        fontSize: 10,
-        letterSpacing: "0.18em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(10),
+        letterSpacing: signinTracking("0.18em"),
+        textTransform: SIGNIN_CASE,
         marginBottom: 8
       },
       children
@@ -1911,8 +1927,8 @@ function ErrorLine({ children }) {
       style: {
         margin: "8px 0 0",
         color: V.destructive,
-        fontFamily: MONO,
-        fontSize: 11
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11)
       },
       children
     }
@@ -1921,7 +1937,6 @@ function ErrorLine({ children }) {
 function FormButtons({ children }) {
   return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }, children });
 }
-var MONO = "ui-monospace, SFMono-Regular, monospace";
 var V = {
   primary: "var(--primary, #f97316)",
   foreground: "var(--foreground, #fafafa)",
@@ -1953,8 +1968,8 @@ var bodyStyle = {
 };
 var hintStyle = {
   color: V.muted,
-  fontFamily: MONO,
-  fontSize: 10.5,
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(10.5),
   opacity: 0.8
 };
 var rowStyle = {
@@ -1967,10 +1982,10 @@ var rowStyle = {
 };
 var rowLabelStyle = {
   color: V.foreground,
-  fontFamily: MONO,
-  fontSize: 10.5,
-  letterSpacing: "0.12em",
-  textTransform: "uppercase",
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(10.5),
+  letterSpacing: signinTracking("0.12em"),
+  textTransform: SIGNIN_CASE,
   opacity: 0.8
 };
 var inputStyle = {
@@ -1979,8 +1994,8 @@ var inputStyle = {
   background: V.background,
   color: V.foreground,
   border: `1px solid ${V.border}`,
-  borderRadius: 6,
-  fontFamily: MONO,
+  borderRadius: signinRadius(6),
+  fontFamily: SIGNIN_FONT,
   // 16px — never lower · suppresses iOS Safari focus auto-zoom.
   fontSize: 16,
   outline: "none",
@@ -1989,11 +2004,11 @@ var inputStyle = {
 function btnBase(disabled) {
   return {
     padding: "0.5rem 0.875rem",
-    borderRadius: 6,
-    fontFamily: MONO,
-    fontSize: 10.5,
-    letterSpacing: "0.12em",
-    textTransform: "uppercase",
+    borderRadius: SIGNIN_BUTTON_RADIUS,
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(10.5),
+    letterSpacing: signinTracking("0.12em"),
+    textTransform: SIGNIN_CASE,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1
   };
@@ -2112,16 +2127,21 @@ function OcSignIn({
   returnTo,
   onSuccess,
   resolveReturnTo,
-  linkPrompt = true,
+  linkPrompt: linkPromptProp = true,
   add: addProp,
   authOrigin = "https://ochk.io",
   initialPath,
   providersFirst = true,
   paths,
-  className
+  className,
+  mode,
+  providerHref
 }) {
   const walletEnabled = paths?.wallet ?? true;
   const emailEnabled = paths?.email ?? true;
+  const firstParty = mode === "first-party";
+  const credentials = firstParty ? "omit" : "include";
+  const linkPrompt = linkPromptProp && !firstParty;
   const [resolvedReturn, setResolvedReturn] = React4.useState(
     () => familyReturnTarget(returnTo) ?? safeReturnTo(returnTo)
   );
@@ -2136,15 +2156,19 @@ function OcSignIn({
     const fromQuery = familyReturnTarget(q.get("return_to")) ?? familyReturnTarget(q.get("next"));
     setResolvedReturn(fromQuery ?? "/");
   }, [returnTo]);
-  const [addMode, setAddMode] = React4.useState(Boolean(addProp));
+  const [addMode, setAddMode] = React4.useState(Boolean(addProp) && !firstParty);
   React4.useEffect(() => {
     if (typeof window === "undefined") return;
+    if (firstParty) {
+      setAddMode(false);
+      return;
+    }
     if (addProp !== void 0) {
       setAddMode(Boolean(addProp));
       return;
     }
     setAddMode(new URLSearchParams(window.location.search).get("add") === "1");
-  }, [addProp]);
+  }, [addProp, firstParty]);
   const [path, setPath] = React4.useState(
     initialPath ?? (providersFirst ? "email" : "wallet")
   );
@@ -2213,8 +2237,8 @@ function OcSignIn({
           padding: "1rem",
           border: "1px solid var(--border, #27272a)",
           color: "var(--foreground, #fafafa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 12
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(12)
         },
         children: [
           "no signin paths enabled \u2014 set ",
@@ -2252,10 +2276,10 @@ function OcSignIn({
           marginBottom: 14,
           padding: "0.6rem 0.75rem",
           border: "1px solid var(--destructive, #ef4444)",
-          borderRadius: 6,
+          borderRadius: signinRadius(6),
           color: "var(--destructive, #ef4444)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 11
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11)
         },
         children: "That sign-in didn't finish. Try again, or use another way below."
       }
@@ -2269,11 +2293,11 @@ function OcSignIn({
           padding: "0.6rem 0.75rem",
           border: "1px solid var(--primary, #f97316)",
           borderLeftWidth: 3,
-          borderRadius: 4,
+          borderRadius: signinRadius(4),
           background: "color-mix(in srgb, var(--primary, #f97316) 8%, transparent)",
           color: "var(--foreground, #fafafa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 11,
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11),
           lineHeight: 1.6
         },
         children: [
@@ -2282,9 +2306,9 @@ function OcSignIn({
             {
               style: {
                 color: "var(--primary, #f97316)",
-                letterSpacing: "0.12em",
-                textTransform: "uppercase",
-                fontSize: 10,
+                letterSpacing: signinTracking("0.12em"),
+                textTransform: SIGNIN_CASE,
+                fontSize: signinSize(10),
                 display: "block",
                 marginBottom: 3
               },
@@ -2301,6 +2325,9 @@ function OcSignIn({
         authOrigin,
         returnTo: resolvedReturn,
         add: addMode,
+        credentials,
+        firstParty,
+        providerHref,
         first: true
       }
     ),
@@ -2360,6 +2387,7 @@ function OcSignIn({
           authOrigin,
           audience,
           add: addMode,
+          credentials,
           onSuccess: (a, t) => void handleSuccess(a, t, "wallet")
         }
       ),
@@ -2368,11 +2396,22 @@ function OcSignIn({
         {
           authOrigin,
           add: addMode,
+          credentials,
           onSuccess: (a, t) => void handleSuccess(a, t, "email")
         }
       )
     ] }),
-    !providersFirst && /* @__PURE__ */ jsx(ProviderSignIn, { authOrigin, returnTo: resolvedReturn, add: addMode }),
+    !providersFirst && /* @__PURE__ */ jsx(
+      ProviderSignIn,
+      {
+        authOrigin,
+        returnTo: resolvedReturn,
+        add: addMode,
+        credentials,
+        firstParty,
+        providerHref
+      }
+    ),
     linkPrompt && /* @__PURE__ */ jsxs("label", { "data-oc-signin-linkalso": "", style: linkAlsoStyle, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -2413,10 +2452,10 @@ function SigninTab({
         border: "none",
         borderBottom: active ? "2px solid var(--primary, #f97316)" : "2px solid transparent",
         color: active ? "var(--foreground, #fafafa)" : "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
-        letterSpacing: "0.12em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
+        letterSpacing: signinTracking("0.12em"),
+        textTransform: SIGNIN_CASE,
         cursor: "pointer",
         marginBottom: -1
       },
@@ -2445,14 +2484,19 @@ function ProviderSignIn({
   authOrigin,
   returnTo,
   add,
+  credentials,
+  firstParty,
+  providerHref,
   first = false
 }) {
   const [providers, setProviders] = React4.useState(null);
   const [origin, setOrigin] = React4.useState("");
+  const hidden = firstParty && !providerHref;
   React4.useEffect(() => {
     setOrigin(window.location.origin);
+    if (hidden) return;
     let cancelled = false;
-    fetch(`${authOrigin}/api/auth/providers`, { credentials: "include" }).then((r) => r.ok ? r.json() : null).then((body) => {
+    fetch(`${authOrigin}/api/auth/providers`, { credentials }).then((r) => r.ok ? r.json() : null).then((body) => {
       if (!cancelled) setProviders(body?.providers ?? []);
     }).catch(() => {
       if (!cancelled) setProviders([]);
@@ -2460,7 +2504,8 @@ function ProviderSignIn({
     return () => {
       cancelled = true;
     };
-  }, [authOrigin]);
+  }, [authOrigin, credentials, hidden]);
+  if (hidden) return null;
   if (providers !== null && providers.length === 0) return null;
   const providerReturnTo = returnTo.startsWith("/") ? origin ? `${origin}${returnTo}` : returnTo : returnTo;
   const line = { flex: 1, height: 1, background: "var(--border, #27272a)" };
@@ -2478,10 +2523,10 @@ function ProviderSignIn({
         // marginTop owns the gap above, so the divider only pads below.
         margin: first ? `${BLOCK_GAP}px 0` : `0 0 ${BLOCK_GAP}px`,
         color: "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 10,
-        letterSpacing: "0.16em",
-        textTransform: "uppercase"
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(10),
+        letterSpacing: signinTracking("0.16em"),
+        textTransform: SIGNIN_CASE
       },
       children: [
         /* @__PURE__ */ jsx("span", { style: line }),
@@ -2501,11 +2546,11 @@ function ProviderSignIn({
     marginTop: i === 0 ? 0 : BUTTON_GAP,
     padding: "0.6rem 0.875rem",
     border: "1px solid var(--border, #27272a)",
-    borderRadius: 6,
+    borderRadius: SIGNIN_BUTTON_RADIUS,
     background: "transparent",
     color: "var(--muted-foreground, #a1a1aa)",
-    fontFamily: "ui-monospace, SFMono-Regular, monospace",
-    fontSize: 12,
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(12),
     textDecoration: "none"
   });
   if (providers === null) {
@@ -2518,7 +2563,7 @@ function ProviderSignIn({
   const buttons = providers.map((p, i) => /* @__PURE__ */ jsxs(
     "a",
     {
-      href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
+      href: providerHref ? providerHref(p.id) : `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
         providerReturnTo
       )}${add ? "&add=1" : ""}`,
       "data-oc-signin-provider": p.id,
@@ -2551,7 +2596,13 @@ async function loadAdapter() {
 async function detectBrowserWallets() {
   return (await loadAdapter()).detectWallets().filter((w) => w.detected && w.id !== "manual").map((w) => ({ id: w.id, name: w.name }));
 }
-function WalletFlow({ authOrigin, audience, add, onSuccess }) {
+function WalletFlow({
+  authOrigin,
+  audience,
+  add,
+  credentials,
+  onSuccess
+}) {
   const uid = React4.useId();
   const ids = {
     address: `${uid}-address`,
@@ -2593,7 +2644,7 @@ function WalletFlow({ authOrigin, audience, add, onSuccess }) {
   async function submitSignature(message, nonce, signature, scheme) {
     const res = await fetch(`${authOrigin}/api/auth/signin`, {
       method: "POST",
-      credentials: "include",
+      credentials,
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         message,
@@ -2794,7 +2845,7 @@ function WalletFlow({ authOrigin, audience, add, onSuccess }) {
     noBrowserWallet && /* @__PURE__ */ jsx(Hint, { children: "No browser wallet found here. You can sign with any wallet and paste." })
   ] });
 }
-function EmailFlow({ authOrigin, add, onSuccess }) {
+function EmailFlow({ authOrigin, add, credentials, onSuccess }) {
   const uid = React4.useId();
   const [stage, setStage] = React4.useState("enter");
   const [email, setEmail] = React4.useState("");
@@ -2808,7 +2859,7 @@ function EmailFlow({ authOrigin, add, onSuccess }) {
     try {
       const res = await fetch(`${authOrigin}/api/auth/email-otp/start`, {
         method: "POST",
-        credentials: "include",
+        credentials,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ email: address })
       });
@@ -2860,7 +2911,7 @@ function EmailFlow({ authOrigin, add, onSuccess }) {
     try {
       const res = await fetch(`${authOrigin}/api/auth/email-otp/verify`, {
         method: "POST",
-        credentials: "include",
+        credentials,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           email,
@@ -2984,10 +3035,10 @@ function FlowHeader({
       {
         style: {
           color: "var(--primary, #f97316)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 10,
-          letterSpacing: "0.18em",
-          textTransform: "uppercase",
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(10),
+          letterSpacing: signinTracking("0.18em"),
+          textTransform: SIGNIN_CASE,
           marginBottom: 6
         },
         children: label
@@ -3016,10 +3067,10 @@ var linkButtonStyle = {
   background: "transparent",
   border: "none",
   color: "var(--muted-foreground, #a1a1aa)",
-  fontFamily: "ui-monospace, SFMono-Regular, monospace",
-  fontSize: 11,
-  letterSpacing: "0.12em",
-  textTransform: "uppercase",
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(11),
+  letterSpacing: signinTracking("0.12em"),
+  textTransform: SIGNIN_CASE,
   cursor: "pointer",
   padding: 0
 };
@@ -3034,10 +3085,10 @@ function Label({
       style: {
         display: "block",
         color: "var(--foreground, #fafafa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
-        letterSpacing: "0.12em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
+        letterSpacing: signinTracking("0.12em"),
+        textTransform: SIGNIN_CASE,
         marginBottom: 6
       },
       children
@@ -3050,8 +3101,8 @@ var inputStyle2 = {
   background: "var(--background, #0a0a0a)",
   color: "var(--foreground, #fafafa)",
   border: "1px solid var(--input, #27272a)",
-  borderRadius: 6,
-  fontFamily: "ui-monospace, SFMono-Regular, monospace",
+  borderRadius: signinRadius(6),
+  fontFamily: SIGNIN_FONT,
   // 16px — never below it. A sub-16px font-size makes iOS Safari
   // auto-zoom the viewport on focus; the family rule is >=16px on
   // every form field. Desktop reads fine at 16 too.
@@ -3068,8 +3119,8 @@ var linkAlsoStyle = {
   paddingTop: 14,
   borderTop: "1px solid var(--border, #27272a)",
   color: "var(--muted-foreground, #a1a1aa)",
-  fontFamily: "ui-monospace, SFMono-Regular, monospace",
-  fontSize: 12,
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(12),
   lineHeight: 1.5,
   cursor: "pointer"
 };
@@ -3080,12 +3131,12 @@ function submitStyle(disabled) {
     background: "var(--primary, #f97316)",
     color: "var(--primary-foreground, #0a0a0a)",
     border: "none",
-    borderRadius: 6,
-    fontFamily: "ui-monospace, SFMono-Regular, monospace",
-    fontSize: 11,
-    letterSpacing: "0.14em",
-    textTransform: "uppercase",
-    fontWeight: 600,
+    borderRadius: SIGNIN_BUTTON_RADIUS,
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(11),
+    letterSpacing: signinTracking("0.14em"),
+    textTransform: SIGNIN_CASE,
+    fontWeight: SIGNIN_STRONG,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1,
     width: "100%"
@@ -3100,8 +3151,8 @@ function ErrorLine2({ children }) {
         marginTop: 6,
         marginBottom: 0,
         color: "var(--destructive, #ef4444)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
         letterSpacing: "0.04em"
       },
       children
@@ -3116,7 +3167,7 @@ function Hint({ children }) {
         marginTop: 12,
         marginBottom: 0,
         color: "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontFamily: SIGNIN_FONT,
         fontSize: 10.5,
         lineHeight: 1.55
       },