@zoreal/oauth2-react 0.2.15 → 0.2.17

package/dist/index.d.cts

@@ -243,25 +243,6 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
-/**
- * The light of the pairing dialog's QR well, run around whatever this wraps
- * while `busy` is true: the well's colours, line, halo and lap, on a dash
- * that travels the outline at one speed whatever the shape.
- *
- * The SDK's own button uses it for the gap on a phone between the tap and the
- * hand-over to the app. A site with its own sign-in button MAY wrap that
- * button the same way: set your busy state on the tap, clear it when
- * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
- * radius in pixels, so the light follows its shape; `theme` picks the light
- * and dark strengths the dialog uses, following the OS by default.
- *
- * It is a wrapper, and a wrapper is a change to your markup, so know what it
- * does before you use it: it is inline by default and shrinks to the button,
- * so a full-width button needs `block`; the light sits outside the button,
- * so an ancestor with `overflow: hidden` clips it; and a selector that relies
- * on the button's parent (`.card > button`) no longer matches. A site that
- * would rather draw its own busy state needs nothing from here.
- */
 declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
     busy: boolean;
     radius?: number;

package/dist/index.d.ts

@@ -243,25 +243,6 @@ declare function useZorealOAuth(): ZorealOAuthContextProps;
 
 declare function ZorealLogin(props: ZorealLoginProps): react.JSX.Element;
 
-/**
- * The light of the pairing dialog's QR well, run around whatever this wraps
- * while `busy` is true: the well's colours, line, halo and lap, on a dash
- * that travels the outline at one speed whatever the shape.
- *
- * The SDK's own button uses it for the gap on a phone between the tap and the
- * hand-over to the app. A site with its own sign-in button MAY wrap that
- * button the same way: set your busy state on the tap, clear it when
- * `onSuccess` or `onError` fires. `radius` is the wrapped control's corner
- * radius in pixels, so the light follows its shape; `theme` picks the light
- * and dark strengths the dialog uses, following the OS by default.
- *
- * It is a wrapper, and a wrapper is a change to your markup, so know what it
- * does before you use it: it is inline by default and shrinks to the button,
- * so a full-width button needs `block`; the light sits outside the button,
- * so an ancestor with `overflow: hidden` clips it; and a selector that relies
- * on the button's parent (`.card > button`) no longer matches. A site that
- * would rather draw its own busy state needs nothing from here.
- */
 declare function ZorealBusyRing({ busy, radius, theme, block, className, style, children, }: {
     busy: boolean;
     radius?: number;

package/dist/index.js

@@ -5,7 +5,7 @@ import { createContext, useContext, useMemo, useState as useState2 } from "react
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.15";
+var SDK_VERSION = "0.2.17";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1334,10 +1334,15 @@ var CSS = `
    sides and lights two edges at once near the ends. So here the light is a
    dash on an SVG outline, which moves at one speed the whole way round
    whatever the shape, drawn with the well's tokens: its colour and head
-   tint, its line width, its halo, its four second lap. pathLength makes the
-   outline 100 units long, so every dash and offset is a percentage of the
-   way round; the three layers share one head at 30 and differ in length
-   and brightness, which is the comet's tail. Shown only while busy. */
+   tint, its line width, its halo, its four second lap. The outline's length
+   is measured by the component and set as --zrl-ring-len, and every dash
+   and offset is a fraction of it, because pathLength does not scale dash
+   values given from CSS. A stroke cannot fade along its length, so the tail
+   is a stack of dashes sharing one head, each shorter and more opaque than
+   the one under it, with opacities chosen so the stack composes to a
+   straight fade from the head to nothing three tenths of the way back; the
+   component sets each layer's length, offset and opacity. Shown only while
+   busy. */
 .${PREFIX}-ring {
   position: relative;
   display: inline-flex;
@@ -1356,6 +1361,7 @@ var CSS = `
 }
 .${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
 .${PREFIX}-ring-svg rect {
+  --zrl-l: var(--zrl-ring-len, 600px);
   x: 2px;
   y: 2px;
   width: calc(100% - 4px);
@@ -1364,23 +1370,18 @@ var CSS = `
   stroke: var(--zrl-beam);
   stroke-width: var(--zrl-beam-line);
   stroke-linecap: round;
+  stroke-dashoffset: var(--zrl-s, 0px);
   animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
 }
-.${PREFIX}-ring-tail { stroke-dasharray: 30 70; stroke-dashoffset: 0; opacity: 0.35; }
-.${PREFIX}-ring-body { stroke-dasharray: 16 84; stroke-dashoffset: -14; opacity: 0.8; }
-.${PREFIX}-ring-head { stroke-dasharray: 5 95; stroke-dashoffset: -25; stroke: var(--zrl-beam-head); }
+.${PREFIX}-ring-head { stroke: var(--zrl-beam-head); }
 .${PREFIX}-ring-halo {
-  stroke-dasharray: 30 70;
-  stroke-dashoffset: 0;
   stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
-  opacity: calc(var(--zrl-glow-opacity) * 0.5);
   filter: blur(var(--zrl-glow-blur));
 }
 @keyframes ${PREFIX}-dash {
-  to { stroke-dashoffset: calc(var(--zrl-dash-start, 0) - 100); }
+  from { stroke-dashoffset: var(--zrl-s, 0px); }
+  to { stroke-dashoffset: calc(var(--zrl-s, 0px) - var(--zrl-l)); }
 }
-.${PREFIX}-ring-body { --zrl-dash-start: -14; }
-.${PREFIX}-ring-head { --zrl-dash-start: -25; }
 @media (prefers-reduced-motion: reduce) {
   .${PREFIX}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
   .${PREFIX}-ring-halo, .${PREFIX}-ring-head { display: none; }
@@ -1654,6 +1655,20 @@ async function startPairing(issuer, params) {
   }
   return body;
 }
+function sameDeviceStartUrl(issuer, params) {
+  const query = new URLSearchParams();
+  const all = {
+    ...params,
+    code_challenge_method: "S256",
+    wire_version: WIRE_VERSION,
+    sdk: `@zoreal/oauth2-react/${SDK_VERSION}`
+  };
+  for (const [key, value] of Object.entries(all)) {
+    if (value === void 0 || value === null || value === "") continue;
+    query.set(key, String(value));
+  }
+  return `${issuer}/pair/start?${query.toString()}`;
+}
 function qrRefreshSecondsOf(started) {
   const seconds = started.qr_refresh_seconds;
   return typeof seconds === "number" && seconds > 0 ? seconds : DEFAULT_QR_REFRESH_SECONDS;
@@ -1710,6 +1725,11 @@ async function pollUntilApproved(issuer, requestId, onState, signal, options = {
         signal
       });
       const body = await parseJson(response);
+      if (response.status === 404 && (options.tolerateUnknownUntil ?? 0) > Date.now()) {
+        emit({ status: "pending" });
+        await sleep(POLL_INTERVAL_MS, signal);
+        continue;
+      }
       if (!response.ok) {
         throw new OAuthFlowError(
           body.error ?? "server_error",
@@ -1791,11 +1811,154 @@ async function challengeS256(verifier) {
   const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));
   return base64url(new Uint8Array(digest));
 }
+function challengeS256Sync(verifier) {
+  return base64url(sha256(new TextEncoder().encode(verifier)));
+}
+var K = new Uint32Array([
+  1116352408,
+  1899447441,
+  3049323471,
+  3921009573,
+  961987163,
+  1508970993,
+  2453635748,
+  2870763221,
+  3624381080,
+  310598401,
+  607225278,
+  1426881987,
+  1925078388,
+  2162078206,
+  2614888103,
+  3248222580,
+  3835390401,
+  4022224774,
+  264347078,
+  604807628,
+  770255983,
+  1249150122,
+  1555081692,
+  1996064986,
+  2554220882,
+  2821834349,
+  2952996808,
+  3210313671,
+  3336571891,
+  3584528711,
+  113926993,
+  338241895,
+  666307205,
+  773529912,
+  1294757372,
+  1396182291,
+  1695183700,
+  1986661051,
+  2177026350,
+  2456956037,
+  2730485921,
+  2820302411,
+  3259730800,
+  3345764771,
+  3516065817,
+  3600352804,
+  4094571909,
+  275423344,
+  430227734,
+  506948616,
+  659060556,
+  883997877,
+  958139571,
+  1322822218,
+  1537002063,
+  1747873779,
+  1955562222,
+  2024104815,
+  2227730452,
+  2361852424,
+  2428436474,
+  2756734187,
+  3204031479,
+  3329325298
+]);
+var rotr = (x, n) => x >>> n | x << 32 - n;
+function sha256(message) {
+  const H = new Uint32Array([
+    1779033703,
+    3144134277,
+    1013904242,
+    2773480762,
+    1359893119,
+    2600822924,
+    528734635,
+    1541459225
+  ]);
+  const length = message.length;
+  const padded = new Uint8Array(length + 9 + 63 >> 6 << 6);
+  padded.set(message);
+  padded[length] = 128;
+  const view = new DataView(padded.buffer);
+  const bits = length * 8;
+  view.setUint32(padded.length - 8, Math.floor(bits / 4294967296));
+  view.setUint32(padded.length - 4, bits >>> 0);
+  const W = new Uint32Array(64);
+  for (let offset = 0; offset < padded.length; offset += 64) {
+    for (let i = 0; i < 16; i++) W[i] = view.getUint32(offset + i * 4);
+    for (let i = 16; i < 64; i++) {
+      const w15 = W[i - 15];
+      const w2 = W[i - 2];
+      const s0 = rotr(w15, 7) ^ rotr(w15, 18) ^ w15 >>> 3;
+      const s1 = rotr(w2, 17) ^ rotr(w2, 19) ^ w2 >>> 10;
+      W[i] = W[i - 16] + s0 + W[i - 7] + s1 >>> 0;
+    }
+    let [a, b, c, d, e, f, g, h] = H;
+    for (let i = 0; i < 64; i++) {
+      const S1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
+      const ch = e & f ^ ~e & g;
+      const t1 = h + S1 + ch + K[i] + W[i] >>> 0;
+      const S0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
+      const maj = a & b ^ a & c ^ b & c;
+      const t2 = S0 + maj >>> 0;
+      h = g;
+      g = f;
+      f = e;
+      e = d + t1 >>> 0;
+      d = c;
+      c = b;
+      b = a;
+      a = t1 + t2 >>> 0;
+    }
+    H[0] = H[0] + a >>> 0;
+    H[1] = H[1] + b >>> 0;
+    H[2] = H[2] + c >>> 0;
+    H[3] = H[3] + d >>> 0;
+    H[4] = H[4] + e >>> 0;
+    H[5] = H[5] + f >>> 0;
+    H[6] = H[6] + g >>> 0;
+    H[7] = H[7] + h >>> 0;
+  }
+  const out = new Uint8Array(32);
+  const outView = new DataView(out.buffer);
+  for (let i = 0; i < 8; i++) outView.setUint32(i * 4, H[i]);
+  return out;
+}
 function generateState() {
   const bytes = new Uint8Array(16);
   crypto.getRandomValues(bytes);
   return base64url(bytes);
 }
+var TOKEN_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+function generateRequestId() {
+  let out = "";
+  const bytes = new Uint8Array(64);
+  while (out.length < 32) {
+    crypto.getRandomValues(bytes);
+    for (const byte of bytes) {
+      if (byte >= 248 || out.length === 32) continue;
+      out += TOKEN_ALPHABET[byte % 62];
+    }
+  }
+  return out;
+}
 
 // src/useZorealLogin.ts
 function useZorealFlow(options) {
@@ -1828,76 +1991,119 @@ function useZorealFlow(options) {
       const useAppLink = display === "link";
       const intent = resolveIntent(opts.intent, opts.scope, opts.acr_values);
       try {
-        const started = await startPairing(issuer, {
-          client_id: clientId,
-          scope: opts.scope ?? "openid",
-          state,
-          nonce,
-          code_challenge: await challengeS256(verifier),
-          redirect_uri: flow === "auth-code" ? opts.redirect_uri : void 0,
-          acr_values: Array.isArray(opts.acr_values) ? opts.acr_values.join(" ") : opts.acr_values,
-          max_age: opts.max_age,
-          prompt: opts.prompt,
-          locale,
-          display
-        });
         let code;
         let selectBy = "device";
-        if ("code" in started) {
-          code = started.code;
-          selectBy = "session";
-        } else {
-          selectBy = useAppLink ? "app_link" : "qr";
-          const qrRefreshSeconds = qrRefreshSecondsOf(started);
+        if (useAppLink) {
+          const requestId = generateRequestId();
+          const startUrl = sameDeviceStartUrl(issuer, {
+            client_id: clientId,
+            scope: opts.scope ?? "openid",
+            state,
+            nonce,
+            code_challenge: challengeS256Sync(verifier),
+            redirect_uri: flow === "auth-code" ? opts.redirect_uri : void 0,
+            acr_values: Array.isArray(opts.acr_values) ? opts.acr_values.join(" ") : opts.acr_values,
+            max_age: opts.max_age,
+            prompt: opts.prompt,
+            locale,
+            request_id: requestId,
+            origin: window.location.origin
+          });
+          selectBy = "app_link";
           const cancel = () => {
             controller.abort();
             setPairing(null);
-            publishRef.current?.(null);
           };
-          const surface = {
-            pairUrl: started.pair_url,
-            appLink: useAppLink,
-            intent,
-            cancel,
-            // The app link has no QR and therefore no cadence to report.
-            ...useAppLink ? null : { qrRefreshSeconds }
-          };
-          let qrUrl = `${issuer}/pair/${encodeURIComponent(started.request_id)}/qr.svg`;
+          const surface = { pairUrl: startUrl, appLink: true, intent, cancel };
           const active = {
-            requestId: started.request_id,
-            pairUrl: surface.pairUrl,
-            qrUrl,
-            state: { status: "pending", expiresIn: started.expires_in, qrUrl, ...surface },
-            appLink: useAppLink,
+            requestId,
+            pairUrl: startUrl,
+            qrUrl: "",
+            state: { status: "pending", ...surface },
+            appLink: true,
             cancel
           };
           setPairing(active);
-          if (!useAppLink) {
-            publishRef.current?.({ state: active.state, qrUrl, intent, cancel });
-          }
           opts.onPairingStateChange?.(active.state);
-          if (useAppLink) {
-            window.location.assign(started.pair_url);
-          }
+          window.location.assign(startUrl);
           code = await pollUntilApproved(
             issuer,
-            started.request_id,
+            requestId,
             (s) => {
-              if (s.qrUrl) qrUrl = s.qrUrl;
-              const enriched = { ...s, ...surface, qrUrl };
-              setPairing(
-                (p) => p && p.requestId === started.request_id ? { ...p, qrUrl, state: enriched } : p
-              );
-              if (!useAppLink) {
-                publishRef.current?.({ state: enriched, qrUrl, intent, cancel });
-              }
+              const enriched = { ...s, ...surface };
+              setPairing((p) => p && p.requestId === requestId ? { ...p, state: enriched } : p);
               opts.onPairingStateChange?.(enriched);
             },
             controller.signal,
-            // The app link has no QR to animate, and the provider answers 404
-            // for one, so the frames are asked for only on the QR surface.
-            { qrRefreshSeconds: useAppLink ? void 0 : qrRefreshSeconds }
+            { tolerateUnknownUntil: Date.now() + 15e3 }
           );
+        } else {
+          const started = await startPairing(issuer, {
+            client_id: clientId,
+            scope: opts.scope ?? "openid",
+            state,
+            nonce,
+            code_challenge: await challengeS256(verifier),
+            redirect_uri: flow === "auth-code" ? opts.redirect_uri : void 0,
+            acr_values: Array.isArray(opts.acr_values) ? opts.acr_values.join(" ") : opts.acr_values,
+            max_age: opts.max_age,
+            prompt: opts.prompt,
+            locale,
+            display: "qr"
+          });
+          if ("code" in started) {
+            code = started.code;
+            selectBy = "session";
+          } else {
+            selectBy = "qr";
+            const qrRefreshSeconds = qrRefreshSecondsOf(started);
+            const cancel = () => {
+              controller.abort();
+              setPairing(null);
+              publishRef.current?.(null);
+            };
+            const surface = {
+              pairUrl: started.pair_url,
+              appLink: false,
+              intent,
+              cancel,
+              qrRefreshSeconds
+            };
+            let qrUrl = `${issuer}/pair/${encodeURIComponent(started.request_id)}/qr.svg`;
+            const active = {
+              requestId: started.request_id,
+              pairUrl: surface.pairUrl,
+              qrUrl,
+              state: { status: "pending", expiresIn: started.expires_in, qrUrl, ...surface },
+              appLink: false,
+              cancel
+            };
+            setPairing(active);
+            if (!useAppLink) {
+              publishRef.current?.({ state: active.state, qrUrl, intent, cancel });
+            }
+            opts.onPairingStateChange?.(active.state);
+            if (useAppLink) {
+              window.location.assign(started.pair_url);
+            }
+            code = await pollUntilApproved(
+              issuer,
+              started.request_id,
+              (s) => {
+                if (s.qrUrl) qrUrl = s.qrUrl;
+                const enriched = { ...s, ...surface, qrUrl };
+                setPairing(
+                  (p) => p && p.requestId === started.request_id ? { ...p, qrUrl, state: enriched } : p
+                );
+                if (!useAppLink) {
+                  publishRef.current?.({ state: enriched, qrUrl, intent, cancel });
+                }
+                opts.onPairingStateChange?.(enriched);
+              },
+              controller.signal,
+              { qrRefreshSeconds }
+            );
+          }
         }
         setPairing(null);
         publishRef.current?.(null);
@@ -1962,8 +2168,11 @@ function useZorealLogin(options) {
 }
 
 // src/ring.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TAIL = 0.3;
+var STACK = Array.from({ length: 12 }, (_, i) => 12 - i);
+var HALO = [3, 2, 1];
 function ZorealBusyRing({
   busy,
   radius = 8,
@@ -1976,11 +2185,42 @@ function ZorealBusyRing({
   useEffect3(() => {
     ensureStyles();
   }, []);
+  const wrapRef = useRef3(null);
+  const measureRef = useRef3(null);
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const rect = measureRef.current;
+    if (!wrap || !rect) return;
+    const measure = () => {
+      const length = rect.getTotalLength();
+      if (length > 0) wrap.style.setProperty("--zrl-ring-len", `${length}px`);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    return () => observer.disconnect();
+  }, [radius]);
   const rx = radius + 2;
-  const layer = (name) => /* @__PURE__ */ jsx5("rect", { className: cx(name), rx, ry: rx, pathLength: 100 });
+  const layer = (key, name, len, alpha, ref) => /* @__PURE__ */ jsx5(
+    "rect",
+    {
+      ref,
+      className: cx(name),
+      rx,
+      ry: rx,
+      style: {
+        strokeDasharray: `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`,
+        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL - len)})`,
+        opacity: alpha
+      }
+    },
+    key
+  );
   return /* @__PURE__ */ jsxs5(
     "span",
     {
+      ref: wrapRef,
       className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
       "data-theme": theme,
       "data-busy": busy,
@@ -1988,10 +2228,10 @@ function ZorealBusyRing({
       children: [
         children,
         /* @__PURE__ */ jsxs5("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
-          layer("ring-halo"),
-          layer("ring-tail"),
-          layer("ring-body"),
-          layer("ring-head")
+          HALO.map(
+            (n, i) => layer(`h${n}`, "ring-halo", TAIL * n / HALO.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`, i === 0 ? measureRef : void 0)
+          ),
+          STACK.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL * n / STACK.length, String(1 / n)))
         ] })
       ]
     }
@@ -2094,7 +2334,7 @@ function ZorealLogin(props) {
 }
 
 // src/useZorealAutoLogin.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function useZorealAutoLogin(options) {
   const { login } = useZorealFlow({
     flow: "browser-direct",
@@ -2111,7 +2351,7 @@ function useZorealAutoLogin(options) {
     },
     onNonOAuthError: (e) => options.onError?.(e)
   });
-  const fired = useRef3(false);
+  const fired = useRef4(false);
   useEffect4(() => {
     if (options.disabled || fired.current) return;
     fired.current = true;