@zoreal/oauth2-js 0.1.16 → 0.1.18

package/README.md

@@ -140,7 +140,7 @@ is nothing to configure and nothing to draw.
 
 | | |
 | --- | --- |
-| **Mobile** | No QR and no modal. `startLogin` 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, so disable the button you were tapped on and show it working until the promise settles. Force one or the other with `display: 'qr'` / `'link'`. The choice is made before the pairing is created, because the provider binds the surface there: a link-mode pairing is claimed only by the app that opened that exact link, and has no QR at all. |
+| **Mobile** | No QR and no modal. The tap itself is a navigation: `startLogin` sends the tab to the provider's `/pair/start` with the pairing's parameters, synchronously, 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 `startLogin` from the click handler itself, disable the button, and show it working until the promise settles. Force one or the other with `display: 'qr'` / `'link'`. The choice is made before the pairing is created, because the provider binds the surface there: a link-mode pairing is claimed only by the app that opened that exact link, and has no QR at all. |
 | **Live status** | Copy and title follow the pairing: waiting for a scan, then waiting for approval once the code is claimed (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

@@ -60,7 +60,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.16";
+var SDK_VERSION = "0.1.18";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -109,6 +109,20 @@ async function startPairing(issuer, params, signal) {
   }
   return body;
 }
+function sameDeviceStartUrl(issuer, params) {
+  const query = new URLSearchParams();
+  const all = {
+    ...params,
+    code_challenge_method: "S256",
+    wire_version: WIRE_VERSION,
+    sdk: `${SDK_NAME}/${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()}`;
+}
 var sleep = (ms, signal) => new Promise((resolve, reject) => {
   if (signal?.aborted) {
     reject(new DOMException("aborted", "AbortError"));
@@ -124,12 +138,17 @@ var sleep = (ms, signal) => new Promise((resolve, reject) => {
   }, ms);
   signal?.addEventListener("abort", onAbort, { once: true });
 });
-async function pollUntilApproved(issuer, requestId, onState, signal) {
+async function pollUntilApproved(issuer, requestId, onState, signal, options = {}) {
   for (; ; ) {
     const response = await fetch(`${issuer}/pair/${encodeURIComponent(requestId)}/status`, {
       signal
     });
     const body = await parseJson(response);
+    if (response.status === 404 && (options.tolerateUnknownUntil ?? 0) > Date.now()) {
+      onState?.({ status: "pending" });
+      await sleep(POLL_INTERVAL_MS, signal);
+      continue;
+    }
     if (!response.ok) {
       throw new OAuthFlowError(
         body.error ?? "server_error",
@@ -1441,10 +1460,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;
@@ -1463,6 +1487,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);
@@ -1471,23 +1496,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; }
@@ -1733,11 +1753,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/login.ts
 function startLogin(options) {
@@ -1767,109 +1930,144 @@ function startLogin(options) {
     const state = generateState();
     const nonce = generateState();
     try {
-      const started = await startPairing(
-        issuer,
-        {
+      let code;
+      let selectBy = "device";
+      if (useAppLink && typeof window !== "undefined") {
+        const requestId = generateRequestId();
+        const startUrl = sameDeviceStartUrl(issuer, {
           client_id: options.clientId,
           scope: options.scope ?? "openid",
           state,
           nonce,
-          code_challenge: await challengeS256(verifier),
+          code_challenge: challengeS256Sync(verifier),
           redirect_uri: flow === "auth-code" ? options.redirect_uri : void 0,
           acr_values: Array.isArray(options.acr_values) ? options.acr_values.join(" ") : options.acr_values,
           max_age: options.max_age,
           prompt: options.prompt,
           locale: options.locale,
-          display: useAppLink ? "link" : "qr"
-        },
-        controller.signal
-      );
-      let code;
-      let selectBy = "device";
-      if ("code" in started) {
-        code = started.code;
-        selectBy = "session";
-      } else {
-        selectBy = useAppLink ? "app_link" : "qr";
-        const requestId = started.request_id;
-        const qrBase = `${issuer}/pair/${encodeURIComponent(requestId)}/qr.svg`;
-        const animated = !useAppLink && started.display !== "legacy";
-        const qrRefreshSeconds = !animated ? void 0 : typeof started.qr_refresh_seconds === "number" && started.qr_refresh_seconds > 0 ? started.qr_refresh_seconds : DEFAULT_QR_REFRESH_SECONDS;
+          request_id: requestId,
+          origin: window.location.origin
+        });
+        selectBy = "app_link";
         surface.requestId = requestId;
-        surface.pairUrl = started.pair_url;
-        surface.qrUrl = qrBase;
-        surface.appLink = useAppLink;
+        surface.pairUrl = startUrl;
+        surface.appLink = true;
         const withSurface = (s) => ({
           ...s,
-          pairUrl: surface.pairUrl,
-          qrUrl: surface.qrUrl,
-          qrRefreshSeconds,
-          appLink: useAppLink,
+          pairUrl: startUrl,
+          appLink: true,
           intent,
           cancel
         });
-        let lastPolled = { status: "pending", expiresIn: started.expires_in };
-        const initial = withSurface(lastPolled);
-        options.onState?.(initial);
-        if ((options.pairingUI ?? "modal") === "modal" && !useAppLink) {
-          modal = mountPairingModal(initial, {
-            onCancel: cancel,
-            intent,
-            locale: options.locale,
-            theme: options.theme,
-            timeoutMs: options.pairingTimeoutMs
-          });
-        }
-        if (useAppLink && typeof window !== "undefined") {
-          window.location.assign(started.pair_url);
-        }
-        if (qrRefreshSeconds !== void 0) {
-          const periodMs = qrRefreshSeconds * 1e3;
-          let due = Date.now() + periodMs;
-          let timer;
-          let stopped = false;
-          const emit = () => {
-            timer = void 0;
-            surface.qrUrl = `${qrBase}?t=${Date.now()}`;
-            const next = withSurface(lastPolled);
-            modal?.update(next);
-            options.onState?.(next);
-            if (stopped) return;
-            due = Date.now() + periodMs;
-            timer = setTimeout(emit, periodMs);
-          };
-          const onVisible = () => {
-            if (document.visibilityState === "visible" && timer !== void 0 && Date.now() >= due) {
-              clearTimeout(timer);
-              emit();
-            }
-          };
-          const hasDocument = typeof document !== "undefined";
-          if (hasDocument) document.addEventListener("visibilitychange", onVisible);
-          stopRefresh = () => {
-            stopped = true;
-            if (timer !== void 0) clearTimeout(timer);
-            timer = void 0;
-            if (hasDocument) document.removeEventListener("visibilitychange", onVisible);
-            stopRefresh = () => {
-            };
-          };
-          timer = setTimeout(emit, Math.max(0, due - Date.now()));
-        }
+        options.onState?.(withSurface({ status: "pending" }));
+        window.location.assign(startUrl);
         code = await pollUntilApproved(
           issuer,
           requestId,
-          (s) => {
-            lastPolled = s;
-            if (s.status !== "pending") stopRefresh();
-            const next = withSurface(s);
-            modal?.update(next);
-            options.onState?.(next);
+          (s) => options.onState?.(withSurface(s)),
+          controller.signal,
+          { tolerateUnknownUntil: Date.now() + 15e3 }
+        );
+      } else {
+        const started = await startPairing(
+          issuer,
+          {
+            client_id: options.clientId,
+            scope: options.scope ?? "openid",
+            state,
+            nonce,
+            code_challenge: await challengeS256(verifier),
+            redirect_uri: flow === "auth-code" ? options.redirect_uri : void 0,
+            acr_values: Array.isArray(options.acr_values) ? options.acr_values.join(" ") : options.acr_values,
+            max_age: options.max_age,
+            prompt: options.prompt,
+            locale: options.locale,
+            display: "qr"
           },
           controller.signal
         );
+        if ("code" in started) {
+          code = started.code;
+          selectBy = "session";
+        } else {
+          selectBy = "qr";
+          const requestId = started.request_id;
+          const qrBase = `${issuer}/pair/${encodeURIComponent(requestId)}/qr.svg`;
+          const animated = started.display !== "legacy";
+          const qrRefreshSeconds = !animated ? void 0 : typeof started.qr_refresh_seconds === "number" && started.qr_refresh_seconds > 0 ? started.qr_refresh_seconds : DEFAULT_QR_REFRESH_SECONDS;
+          surface.requestId = requestId;
+          surface.pairUrl = started.pair_url;
+          surface.qrUrl = qrBase;
+          surface.appLink = false;
+          const withSurface = (s) => ({
+            ...s,
+            pairUrl: surface.pairUrl,
+            qrUrl: surface.qrUrl,
+            qrRefreshSeconds,
+            appLink: false,
+            intent,
+            cancel
+          });
+          let lastPolled = { status: "pending", expiresIn: started.expires_in };
+          const initial = withSurface(lastPolled);
+          options.onState?.(initial);
+          if ((options.pairingUI ?? "modal") === "modal") {
+            modal = mountPairingModal(initial, {
+              onCancel: cancel,
+              intent,
+              locale: options.locale,
+              theme: options.theme,
+              timeoutMs: options.pairingTimeoutMs
+            });
+          }
+          if (qrRefreshSeconds !== void 0) {
+            const periodMs = qrRefreshSeconds * 1e3;
+            let due = Date.now() + periodMs;
+            let timer;
+            let stopped = false;
+            const emit = () => {
+              timer = void 0;
+              surface.qrUrl = `${qrBase}?t=${Date.now()}`;
+              const next = withSurface(lastPolled);
+              modal?.update(next);
+              options.onState?.(next);
+              if (stopped) return;
+              due = Date.now() + periodMs;
+              timer = setTimeout(emit, periodMs);
+            };
+            const onVisible = () => {
+              if (document.visibilityState === "visible" && timer !== void 0 && Date.now() >= due) {
+                clearTimeout(timer);
+                emit();
+              }
+            };
+            const hasDocument = typeof document !== "undefined";
+            if (hasDocument) document.addEventListener("visibilitychange", onVisible);
+            stopRefresh = () => {
+              stopped = true;
+              if (timer !== void 0) clearTimeout(timer);
+              timer = void 0;
+              if (hasDocument) document.removeEventListener("visibilitychange", onVisible);
+              stopRefresh = () => {
+              };
+            };
+            timer = setTimeout(emit, Math.max(0, due - Date.now()));
+          }
+          code = await pollUntilApproved(
+            issuer,
+            requestId,
+            (s) => {
+              lastPolled = s;
+              if (s.status !== "pending") stopRefresh();
+              const next = withSurface(s);
+              modal?.update(next);
+              options.onState?.(next);
+            },
+            controller.signal
+          );
+        }
+        teardown();
       }
-      teardown();
       if (flow === "auth-code") {
         const response2 = {
           code,