@zoreal/oauth2-js 0.1.16 → 0.1.18

package/dist/index.d.cts

@@ -278,6 +278,11 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  the provider never renders a QR for it, so
  *                                  nobody can turn a same-device link into a
  *                                  static code to relay.
+ *   GET  /pair/start               the same-device sign-in as a NAVIGATION:
+ *                                  the /pair parameters as a query, plus
+ *                                  request_id (the page's own token) and
+ *                                  origin; answered with a redirect to the
+ *                                  pairing's universal link, inside the tap
  *   GET  /pair/:id/status          poll: pending | claimed |
  *                                  approved (with code) | denied | expired |
  *                                  enrolling. Over-polling cancels the request
@@ -305,7 +310,7 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  auth-code mode leaves it to the RP backend.
  */
 declare const WIRE_VERSION = 1;
-declare const SDK_VERSION = "0.1.16";
+declare const SDK_VERSION = "0.1.18";
 declare const SDK_NAME = "@zoreal/oauth2-js";
 declare const DEFAULT_ISSUER = "https://id.zoreal.com";
 /** Pending TTL is short. Poll gently; over-polling cancels the request. */
@@ -413,7 +418,15 @@ declare function startPairing(issuer: string, params: StartPairingParams, signal
  * Throws FlowAbandonedError for the human outcomes (denied, expired,
  * enrolment abandoned) and OAuthFlowError for protocol ones.
  */
-declare function pollUntilApproved(issuer: string, requestId: string, onState?: (state: PairingState) => void, signal?: AbortSignal): Promise<string>;
+declare function pollUntilApproved(issuer: string, requestId: string, onState?: (state: PairingState) => void, signal?: AbortSignal, options?: {
+    /**
+     * Same-device navigation only. The page starts polling while the
+     * provider is still answering the navigation that creates the pairing,
+     * so a "no such pairing" answer before this instant (epoch ms) is the
+     * pairing not existing YET, and is read as pending.
+     */
+    tolerateUnknownUntil?: number;
+}): Promise<string>;
 /**
  * The code exchange, browser-direct mode only: a public client, PKCE and no
  * secret. What comes back can only ever be the pseudonymous tier, by

package/dist/index.d.ts

@@ -278,6 +278,11 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  the provider never renders a QR for it, so
  *                                  nobody can turn a same-device link into a
  *                                  static code to relay.
+ *   GET  /pair/start               the same-device sign-in as a NAVIGATION:
+ *                                  the /pair parameters as a query, plus
+ *                                  request_id (the page's own token) and
+ *                                  origin; answered with a redirect to the
+ *                                  pairing's universal link, inside the tap
  *   GET  /pair/:id/status          poll: pending | claimed |
  *                                  approved (with code) | denied | expired |
  *                                  enrolling. Over-polling cancels the request
@@ -305,7 +310,7 @@ declare function mountPairingModal(state: PairingState, options: PairingModalOpt
  *                                  auth-code mode leaves it to the RP backend.
  */
 declare const WIRE_VERSION = 1;
-declare const SDK_VERSION = "0.1.16";
+declare const SDK_VERSION = "0.1.18";
 declare const SDK_NAME = "@zoreal/oauth2-js";
 declare const DEFAULT_ISSUER = "https://id.zoreal.com";
 /** Pending TTL is short. Poll gently; over-polling cancels the request. */
@@ -413,7 +418,15 @@ declare function startPairing(issuer: string, params: StartPairingParams, signal
  * Throws FlowAbandonedError for the human outcomes (denied, expired,
  * enrolment abandoned) and OAuthFlowError for protocol ones.
  */
-declare function pollUntilApproved(issuer: string, requestId: string, onState?: (state: PairingState) => void, signal?: AbortSignal): Promise<string>;
+declare function pollUntilApproved(issuer: string, requestId: string, onState?: (state: PairingState) => void, signal?: AbortSignal, options?: {
+    /**
+     * Same-device navigation only. The page starts polling while the
+     * provider is still answering the navigation that creates the pairing,
+     * so a "no such pairing" answer before this instant (epoch ms) is the
+     * pairing not existing YET, and is read as pending.
+     */
+    tolerateUnknownUntil?: number;
+}): Promise<string>;
 /**
  * The code exchange, browser-direct mode only: a public client, PKCE and no
  * secret. What comes back can only ever be the pseudonymous tier, by

package/dist/index.js

@@ -14,7 +14,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;
@@ -63,6 +63,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"));
@@ -78,12 +92,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",
@@ -1395,10 +1414,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;
@@ -1417,6 +1441,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);
@@ -1425,23 +1450,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; }
@@ -1687,11 +1707,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) {
@@ -1721,109 +1884,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,