@zoreal/oauth2-react 0.2.8 → 0.2.9

package/README.md

@@ -239,6 +239,14 @@ What the modal does:
 | **Language** | Ships its own copy in 39 locales (listed below). Pass `locale` and the modal matches the page it opened on; omit it and it follows the browser's preference list, English as the floor. Arabic, Hebrew and Urdu flip the dialog to RTL. |
 | **Accessibility** | `role="dialog"`, `aria-modal`, labelled by its title, focus moved in on open, scroll locked, visible focus rings, and a `prefers-reduced-motion` fallback. |
 
+The code on screen is not static. A QR sign-in shows one frame of a sequence
+the provider rotates every few seconds, and it refuses a frame the sequence has
+already moved past. That is what stops a code being relayed: a screenshot of a
+sign-in code, sent to someone else to scan and approve, is spent before it
+arrives, so the picture buys an attacker nothing. The SDK re-fetches the frame
+on the provider's cadence and the modal loads the next one before it swaps, so
+the code never blinks out while a camera is aimed at it.
+
 ### Languages
 
 Arabic · Bengali · Bosnian · Bulgarian · Chinese (Simplified) · Chinese (Traditional) ·
@@ -266,9 +274,12 @@ If you already have a design system you want the QR to live inside, opt out:
 ```
 
 `onPairingStateChange` then carries everything you need on every state:
-`qrUrl`, `pairUrl`, `status`, `expiresIn` and `cancel`. Render `qrUrl` in an
-`<img>`; do not draw your own. `PairingModal` is also exported if you want the
-real dialog but on your own terms.
+`qrUrl`, `pairUrl`, `status`, `expiresIn`, `qrRefreshSeconds` and `cancel`.
+Render `qrUrl` in an `<img>`; do not draw your own. Render it **on every state
+you are given**, never the first one you saw: `qrUrl` is a moving frame, the
+SDK hands you a new one every few seconds, and a UI that caches the first
+value shows a code that stops working. `PairingModal` is also exported if you
+want the real dialog but on your own terms.
 
 ## Scopes and claims
 

package/dist/index.cjs

@@ -39,10 +39,11 @@ var import_react2 = require("react");
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.8";
+var SDK_VERSION = "0.2.9";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
+var DEFAULT_QR_REFRESH_SECONDS = 3;
 
 // src/PairingModal.tsx
 var import_react = require("react");
@@ -1147,6 +1148,23 @@ function PairingModal({
   const deadlineRef = (0, import_react.useRef)(0);
   const [remaining, setRemaining] = (0, import_react.useState)(Math.round(timeoutMs / 1e3));
   const settled = state.status === "claimed" || state.status === "enrolling";
+  const [frameUrl, setFrameUrl] = (0, import_react.useState)(qrUrl);
+  (0, import_react.useEffect)(() => {
+    if (settled || frameUrl === qrUrl) return;
+    let abandoned = false;
+    const next = new Image();
+    next.onload = () => {
+      if (!abandoned) setFrameUrl(qrUrl);
+    };
+    next.onerror = () => {
+    };
+    next.src = qrUrl;
+    return () => {
+      abandoned = true;
+      next.onload = null;
+      next.onerror = null;
+    };
+  }, [qrUrl, settled, frameUrl]);
   const onCancelRef = (0, import_react.useRef)(onCancel);
   onCancelRef.current = onCancel;
   (0, import_react.useEffect)(() => {
@@ -1198,7 +1216,7 @@ function PairingModal({
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: titleId, className: cx("title"), children: settled ? t.titleApprove : t.title }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("body-text"), children: body }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("qr-well"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: cx("qr"), "data-spent": settled, src: qrUrl, alt: t.qrAlt, width: 180, height: 180 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: cx("qr"), "data-spent": settled, src: frameUrl, alt: t.qrAlt, width: 180, height: 180 }),
               settled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-badge"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPhone, {}) }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("status"), children: [
@@ -1336,55 +1354,99 @@ async function startPairing(issuer, params) {
   }
   return body;
 }
+function qrRefreshSecondsOf(started) {
+  const seconds = started.qr_refresh_seconds;
+  return typeof seconds === "number" && seconds > 0 ? seconds : DEFAULT_QR_REFRESH_SECONDS;
+}
+function qrFrameUrl(issuer, requestId) {
+  return `${issuer}/pair/${encodeURIComponent(requestId)}/qr.svg?t=${Date.now()}`;
+}
 var sleep = (ms, signal) => new Promise((resolve, reject) => {
   if (signal?.aborted) {
     reject(new DOMException("aborted", "AbortError"));
     return;
   }
-  const t = setTimeout(resolve, ms);
-  signal?.addEventListener("abort", () => {
-    clearTimeout(t);
+  const onAbort = () => {
+    clearTimeout(timer);
     reject(new DOMException("aborted", "AbortError"));
-  });
+  };
+  const timer = setTimeout(() => {
+    signal?.removeEventListener("abort", onAbort);
+    resolve();
+  }, ms);
+  signal?.addEventListener("abort", onAbort, { once: true });
 });
-async function pollUntilApproved(issuer, requestId, onState, signal) {
-  for (; ; ) {
-    const response = await fetch(`${issuer}/pair/${encodeURIComponent(requestId)}/status`, {
-      signal
-    });
-    const body = await parseJson(response);
-    if (!response.ok) {
-      throw new OAuthFlowError(
-        body.error ?? "server_error",
-        body.error_description ?? `Pairing status failed (${response.status})`
-      );
-    }
-    onState?.({
-      status: body.status,
-      expiresIn: body.expires_in,
-      enrolmentDeadline: body.enrolment_deadline
+async function pollUntilApproved(issuer, requestId, onState, signal, options = {}) {
+  let last = { status: "pending" };
+  const emit = (state) => {
+    last = state;
+    onState?.(state);
+  };
+  let frames = null;
+  const stopFrames = () => {
+    frames?.abort();
+    frames = null;
+  };
+  const startFrames = () => {
+    const seconds = options.qrRefreshSeconds;
+    if (frames || signal?.aborted || typeof seconds !== "number" || !(seconds > 0)) return;
+    const period = seconds * 1e3;
+    const controller = new AbortController();
+    frames = controller;
+    signal?.addEventListener("abort", stopFrames, { signal: controller.signal });
+    void (async () => {
+      let due = Date.now() + period;
+      for (; ; ) {
+        await sleep(Math.max(0, due - Date.now()), controller.signal);
+        emit({ ...last, qrUrl: qrFrameUrl(issuer, requestId) });
+        due = Date.now() + period;
+      }
+    })().catch(() => {
     });
-    switch (body.status) {
-      case "approved":
-        if (!body.code) {
-          throw new OAuthFlowError("server_error", "approved with no authorization code");
-        }
-        return body.code;
-      case "denied":
-        throw new FlowAbandonedError({ type: "request_denied", description: body.error_description });
-      case "expired":
-        throw new FlowAbandonedError({ type: "request_expired", description: body.error_description });
-      case "cancelled":
-        throw new FlowAbandonedError({
-          type: "request_expired",
-          description: body.error_description ?? "the provider cancelled the pairing request"
-        });
-      case "enrolling":
-        await sleep(POLL_INTERVAL_ENROLLING_MS, signal);
-        break;
-      default:
-        await sleep(POLL_INTERVAL_MS, signal);
+  };
+  try {
+    for (; ; ) {
+      const response = await fetch(`${issuer}/pair/${encodeURIComponent(requestId)}/status`, {
+        signal
+      });
+      const body = await parseJson(response);
+      if (!response.ok) {
+        throw new OAuthFlowError(
+          body.error ?? "server_error",
+          body.error_description ?? `Pairing status failed (${response.status})`
+        );
+      }
+      emit({
+        status: body.status,
+        expiresIn: body.expires_in,
+        enrolmentDeadline: body.enrolment_deadline
+      });
+      if (body.status === "pending") startFrames();
+      else stopFrames();
+      switch (body.status) {
+        case "approved":
+          if (!body.code) {
+            throw new OAuthFlowError("server_error", "approved with no authorization code");
+          }
+          return body.code;
+        case "denied":
+          throw new FlowAbandonedError({ type: "request_denied", description: body.error_description });
+        case "expired":
+          throw new FlowAbandonedError({ type: "request_expired", description: body.error_description });
+        case "cancelled":
+          throw new FlowAbandonedError({
+            type: "request_expired",
+            description: body.error_description ?? "the provider cancelled the pairing request"
+          });
+        case "enrolling":
+          await sleep(POLL_INTERVAL_ENROLLING_MS, signal);
+          break;
+        default:
+          await sleep(POLL_INTERVAL_MS, signal);
+      }
     }
+  } finally {
+    stopFrames();
   }
 }
 async function exchangeCode(issuer, input) {
@@ -1411,6 +1473,11 @@ function isMobileUserAgent() {
   if (typeof navigator === "undefined") return false;
   return /android|iphone|ipad|ipod/i.test(navigator.userAgent);
 }
+function resolveDisplay(display) {
+  if (display === "link") return "link";
+  if (display === "qr") return "qr";
+  return isMobileUserAgent() ? "link" : "qr";
+}
 
 // src/pkce.ts
 var VERIFIER_BYTES = 32;
@@ -1457,6 +1524,8 @@ function useZorealFlow(options) {
       const verifier = generateVerifier();
       const state = generateState();
       const nonce = generateState();
+      const display = resolveDisplay(opts.display);
+      const useAppLink = display === "link";
       try {
         const started = await startPairing(issuer, {
           client_id: clientId,
@@ -1468,7 +1537,8 @@ function useZorealFlow(options) {
           acr_values: Array.isArray(opts.acr_values) ? opts.acr_values.join(" ") : opts.acr_values,
           max_age: opts.max_age,
           prompt: opts.prompt,
-          locale
+          locale,
+          display
         });
         let code;
         let selectBy = "device";
@@ -1476,8 +1546,8 @@ function useZorealFlow(options) {
           code = started.code;
           selectBy = "session";
         } else {
-          const useAppLink = opts.display === "link" || opts.display !== "qr" && isMobileUserAgent();
           selectBy = useAppLink ? "app_link" : "qr";
+          const qrRefreshSeconds = qrRefreshSecondsOf(started);
           const cancel = () => {
             controller.abort();
             setPairing(null);
@@ -1485,21 +1555,23 @@ function useZorealFlow(options) {
           };
           const surface = {
             pairUrl: started.pair_url,
-            qrUrl: `${issuer}/pair/${encodeURIComponent(started.request_id)}/qr.svg`,
             appLink: useAppLink,
-            cancel
+            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 active = {
             requestId: started.request_id,
             pairUrl: surface.pairUrl,
-            qrUrl: surface.qrUrl,
-            state: { status: "pending", expiresIn: started.expires_in, ...surface },
+            qrUrl,
+            state: { status: "pending", expiresIn: started.expires_in, qrUrl, ...surface },
             appLink: useAppLink,
             cancel
           };
           setPairing(active);
           if (!useAppLink) {
-            publishRef.current?.({ state: active.state, qrUrl: surface.qrUrl, cancel });
+            publishRef.current?.({ state: active.state, qrUrl, cancel });
           }
           opts.onPairingStateChange?.(active.state);
           if (useAppLink) {
@@ -1509,16 +1581,20 @@ function useZorealFlow(options) {
             issuer,
             started.request_id,
             (s) => {
-              const enriched = { ...s, ...surface };
+              if (s.qrUrl) qrUrl = s.qrUrl;
+              const enriched = { ...s, ...surface, qrUrl };
               setPairing(
-                (p) => p && p.requestId === started.request_id ? { ...p, state: enriched } : p
+                (p) => p && p.requestId === started.request_id ? { ...p, qrUrl, state: enriched } : p
               );
               if (!useAppLink) {
-                publishRef.current?.({ state: enriched, qrUrl: surface.qrUrl, cancel });
+                publishRef.current?.({ state: enriched, qrUrl, cancel });
               }
               opts.onPairingStateChange?.(enriched);
             },
-            controller.signal
+            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 }
           );
         }
         setPairing(null);