@zoreal/oauth2-react 0.2.16 → 0.2.18

package/README.md

@@ -251,7 +251,7 @@ What the modal does:
 
 | | |
 | --- | --- |
-| **Mobile** | No QR and no modal. The SDK creates the pairing and sends the tab to the pairing link, which the ZOREAL ID app claims; with no app installed the same link is the page that installs it. That is one round trip after the tap: `ZorealLogin` disables itself and runs a light round its edge for that gap; a site with its own button keeps that button and draws its own busy state from the tap until `onSuccess` or `onError` fires, or wraps it in `ZorealBusyRing` to get the same light (a wrapper: pass `block` for a full-width button, keep `overflow: hidden` off its ancestors, and expect `.parent > button` selectors to stop matching). Force one or the other with `display: 'qr'` / `'link'`. |
+| **Mobile** | No QR and no modal. The tap itself is a navigation: the SDK sends the tab to the provider's `/pair/start` with the pairing's parameters, synchronously from the click, and the provider answers with a redirect to the pairing's universal link, which the ZOREAL ID app claims while the page stays put and polls. A browser hands a link to an app only inside a navigation the person began, which is why nothing is fetched first. With no app installed the same redirect lands on the page that installs it. Call `login()` from the click handler itself: `ZorealLogin` does, disables itself and runs a light round its edge until the flow ends; a site with its own button keeps that button and draws its own busy state from the tap until `onSuccess` or `onError` fires, or wraps it in `ZorealBusyRing` to get the same light (a wrapper: pass `block` for a full-width button, keep `overflow: hidden` off its ancestors, and expect `.parent > button` selectors to stop matching). Force one or the other with `display: 'qr'` / `'link'`. |
 | **Live status** | The copy and the title follow the pairing: waiting for a scan, then waiting for approval once the holder has claimed the code (the spent QR blurs out behind a phone glyph). |
 | **Title** | Says what the scan is for, inferred from the request: "Scan to sign in" for `openid`, `email` and `profile.name`; "Scan to verify your identity" once a document attribute such as `zoreal.age` or `profile.birthdate` is requested; "Scan to prove you are a real human" for `openid` alone with `acr_values: 'zoreal.live'`. Override with `intent`, one of `'sign-in'`, `'identify'`, `'presence'`, when the scope does not say. |
 | **Countdown** | Counts down to expiry, turning amber under 20s. Reads the clock each tick rather than decrementing, so a backgrounded tab comes back honest. |

package/dist/index.cjs

@@ -41,7 +41,7 @@ var import_react2 = require("react");
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.16";
+var SDK_VERSION = "0.2.18";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1691,6 +1691,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;
@@ -1713,6 +1727,8 @@ var sleep = (ms, signal) => new Promise((resolve, reject) => {
   }, ms);
   signal?.addEventListener("abort", onAbort, { once: true });
 });
+var SETTLE_MS = 1500;
+var NETWORK_FAILURES_TOLERATED = 4;
 async function pollUntilApproved(issuer, requestId, onState, signal, options = {}) {
   let last = { status: "pending" };
   const emit = (state) => {
@@ -1741,12 +1757,33 @@ async function pollUntilApproved(issuer, requestId, onState, signal, options = {
     })().catch(() => {
     });
   };
+  const settlingUntil = options.tolerateUnknownUntil ?? 0;
+  let networkFailures = 0;
   try {
+    if (settlingUntil > Date.now()) await sleep(SETTLE_MS, signal);
     for (; ; ) {
-      const response = await fetch(`${issuer}/pair/${encodeURIComponent(requestId)}/status`, {
-        signal
-      });
+      let response;
+      try {
+        response = await fetch(`${issuer}/pair/${encodeURIComponent(requestId)}/status`, {
+          signal
+        });
+        networkFailures = 0;
+      } catch (e) {
+        if (e instanceof DOMException && e.name === "AbortError") throw e;
+        networkFailures += 1;
+        if (settlingUntil > Date.now() || networkFailures <= NETWORK_FAILURES_TOLERATED) {
+          emit({ ...last, status: last.status });
+          await sleep(POLL_INTERVAL_MS, signal);
+          continue;
+        }
+        throw e;
+      }
       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",
@@ -1828,11 +1865,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) {
@@ -1865,76 +2045,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);