@zoreal/oauth2-js 0.1.18 → 0.1.20

package/README.md

@@ -140,7 +140,7 @@ is nothing to configure and nothing to draw.
 
 | | |
 | --- | --- |
-| **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. |
+| **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. Once the holder has approved, the app reopens your page with the pairing named in the fragment; call `resumeLogin({ clientId })` on every page load where `startLogin` can be called, and it finishes the sign-in there, resolving the way `startLogin` would have, or answers `null` at once when the page load is not a return. The tab that was left behind keeps polling and stands down when the returned page finishes first. 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

@@ -38,6 +38,7 @@ __export(index_exports, {
   mountPairingModal: () => mountPairingModal,
   pollUntilApproved: () => pollUntilApproved,
   resolveIntent: () => resolveIntent,
+  resumeLogin: () => resumeLogin,
   startLogin: () => startLogin,
   startPairing: () => startPairing,
   unsafeClaims: () => unsafeClaims
@@ -60,7 +61,7 @@ function unsafeClaims(idToken) {
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.18";
+var SDK_VERSION = "0.1.20";
 var SDK_NAME = "@zoreal/oauth2-js";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
@@ -138,11 +139,30 @@ 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 = {}) {
+  const settlingUntil = options.tolerateUnknownUntil ?? 0;
+  let networkFailures = 0;
+  let last = { status: "pending" };
+  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) {
+        onState?.(last);
+        await sleep(POLL_INTERVAL_MS, signal);
+        continue;
+      }
+      throw e;
+    }
     const body = await parseJson(response);
     if (response.status === 404 && (options.tolerateUnknownUntil ?? 0) > Date.now()) {
       onState?.({ status: "pending" });
@@ -155,11 +175,12 @@ async function pollUntilApproved(issuer, requestId, onState, signal, options = {
         body.error_description ?? `Pairing status failed (${response.status})`
       );
     }
-    onState?.({
+    last = {
       status: body.status,
       expiresIn: body.expires_in,
       enrolmentDeadline: body.enrolment_deadline
-    });
+    };
+    onState?.(last);
     switch (body.status) {
       case "approved":
         if (!body.code) {
@@ -224,6 +245,76 @@ function titleFor(t, intent) {
   return t.title;
 }
 
+// src/return.ts
+var PREFIX = "zoreal:oauth2:return:";
+var DONE = "zoreal:oauth2:done:";
+var MAX_AGE_MS = 10 * 60 * 1e3;
+function storage() {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+}
+function saveReturnFlow(flow) {
+  try {
+    storage()?.setItem(PREFIX + flow.requestId, JSON.stringify(flow));
+  } catch {
+  }
+}
+function peekReturnFlow(requestId) {
+  const store = storage();
+  if (!store) return null;
+  const raw = store.getItem(PREFIX + requestId);
+  if (!raw) return null;
+  try {
+    const flow = JSON.parse(raw);
+    if (flow.v !== 1 || flow.requestId !== requestId) return null;
+    if (Date.now() - flow.createdAt > MAX_AGE_MS) return null;
+    return flow;
+  } catch {
+    return null;
+  }
+}
+function forgetReturnFlow(requestId) {
+  try {
+    storage()?.removeItem(PREFIX + requestId);
+  } catch {
+  }
+  if (pending === requestId) pending = null;
+}
+function markReturnDone(requestId) {
+  try {
+    const store = storage();
+    store?.setItem(DONE + requestId, String(Date.now()));
+    store?.removeItem(PREFIX + requestId);
+  } catch {
+  }
+}
+function isReturnDone(requestId) {
+  return storage()?.getItem(DONE + requestId) !== null && storage()?.getItem(DONE + requestId) !== void 0;
+}
+function returnToUrl() {
+  if (typeof window === "undefined") return void 0;
+  const { href } = window.location;
+  const hash = href.indexOf("#");
+  return hash === -1 ? href : href.slice(0, hash);
+}
+var RETURN_MARK = /(?:^|[#&])zoreal_return=([A-Za-z0-9]{32})(?:&|$)/;
+var pending = null;
+function pendingReturnId() {
+  if (pending) return pending;
+  if (typeof window === "undefined") return null;
+  const match = RETURN_MARK.exec(window.location.hash);
+  if (!match) return null;
+  pending = match[1];
+  try {
+    window.history.replaceState(window.history.state, "", returnToUrl());
+  } catch {
+  }
+  return pending;
+}
+
 // src/i18n.ts
 var en = {
   title: "Scan to sign in",
@@ -1067,8 +1158,8 @@ function interpolate(template, time) {
 }
 
 // src/styles.ts
-var PREFIX = "zrl";
-var cx = (name) => `${PREFIX}-${name}`;
+var PREFIX2 = "zrl";
+var cx = (name) => `${PREFIX2}-${name}`;
 var STYLE_ELEMENT_ID = "zoreal-pairing-styles";
 var LIGHT = `
   --zrl-scrim: rgba(16, 18, 27, 0.45);
@@ -1132,13 +1223,13 @@ var DARK = `
   --zrl-glow-opacity: 0.85;
 `;
 var CSS = `
-.${PREFIX}-root { ${LIGHT} }
-.${PREFIX}-root[data-theme="dark"] { ${DARK} }
+.${PREFIX2}-root { ${LIGHT} }
+.${PREFIX2}-root[data-theme="dark"] { ${DARK} }
 @media (prefers-color-scheme: dark) {
-  .${PREFIX}-root[data-theme="auto"] { ${DARK} }
+  .${PREFIX2}-root[data-theme="auto"] { ${DARK} }
 }
 
-.${PREFIX}-scrim {
+.${PREFIX2}-scrim {
   position: fixed;
   inset: 0;
   z-index: 2147483000;
@@ -1150,10 +1241,10 @@ var CSS = `
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   font-family: inherit;
-  animation: ${PREFIX}-fade 200ms ease-out both;
+  animation: ${PREFIX2}-fade 200ms ease-out both;
 }
 
-.${PREFIX}-card {
+.${PREFIX2}-card {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -1165,14 +1256,14 @@ var CSS = `
   outline: 1px solid var(--zrl-ring);
   outline-offset: -1px;
   text-align: center;
-  animation: ${PREFIX}-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  animation: ${PREFIX2}-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
 }
 
-.${PREFIX}-body { padding: 28px 24px 20px; }
+.${PREFIX2}-body { padding: 28px 24px 20px; }
 
-.${PREFIX}-lockup { display: block; margin: 0 auto; color: var(--zrl-ink); }
+.${PREFIX2}-lockup { display: block; margin: 0 auto; color: var(--zrl-ink); }
 
-.${PREFIX}-title {
+.${PREFIX2}-title {
   margin: 18px 0 0;
   font-size: 18px;
   font-weight: 600;
@@ -1181,7 +1272,7 @@ var CSS = `
   color: var(--zrl-ink);
 }
 
-.${PREFIX}-body-text {
+.${PREFIX2}-body-text {
   margin: 6px auto 0;
   max-width: 30ch;
   font-size: 14px;
@@ -1189,7 +1280,7 @@ var CSS = `
   color: var(--zrl-ink-soft);
 }
 
-.${PREFIX}-qr-well {
+.${PREFIX2}-qr-well {
   position: relative;
   display: grid;
   place-items: center;
@@ -1228,9 +1319,9 @@ var CSS = `
    All three share one containing block, the well's padding box, so the two
    comets ride the same path; the spent badge is a later sibling and paints
    above them. */
-.${PREFIX}-qr-beam,
-.${PREFIX}-qr-beam-glow,
-.${PREFIX}-qr-beam-glow-band {
+.${PREFIX2}-qr-beam,
+.${PREFIX2}-qr-beam-glow,
+.${PREFIX2}-qr-beam-glow-band {
   position: absolute;
   inset: calc(0px - var(--zrl-beam-line));
   border: var(--zrl-beam-line) solid transparent;
@@ -1243,7 +1334,7 @@ var CSS = `
   mask-clip: padding-box, border-box;
   mask-composite: intersect;
 }
-.${PREFIX}-qr-beam-glow {
+.${PREFIX2}-qr-beam-glow {
   inset: calc(0px - var(--zrl-glow-reach));
   border-width: var(--zrl-glow-reach);
   border-radius: calc(var(--zrl-radius) - 1px + var(--zrl-glow-reach));
@@ -1251,7 +1342,7 @@ var CSS = `
   opacity: var(--zrl-glow-opacity);
   will-change: filter;
 }
-.${PREFIX}-qr-beam-glow-band {
+.${PREFIX2}-qr-beam-glow-band {
   inset: calc(0px - var(--zrl-glow-core));
   border-width: var(--zrl-glow-core);
   border-radius: calc(var(--zrl-radius) - 1px + var(--zrl-glow-core));
@@ -1262,8 +1353,8 @@ var CSS = `
    border reads as the well's own line with a light passing over it; shown
    once the light has stopped. Every path below ends here, which is what
    makes them look the same at rest. */
-.${PREFIX}-qr-beam::before,
-.${PREFIX}-qr-beam-glow-band::before {
+.${PREFIX2}-qr-beam::before,
+.${PREFIX2}-qr-beam-glow-band::before {
   content: '';
   position: absolute;
   inset: -50%;
@@ -1276,8 +1367,8 @@ var CSS = `
    whole. A transform animation runs on the compositor, so the light keeps
    moving while the page is busy; animating the gradient angle instead
    repaints every frame on the main thread and stutters. */
-.${PREFIX}-qr-beam::after,
-.${PREFIX}-qr-beam-glow-band::after {
+.${PREFIX2}-qr-beam::after,
+.${PREFIX2}-qr-beam-glow-band::after {
   content: '';
   position: absolute;
   inset: -50%;
@@ -1288,7 +1379,7 @@ var CSS = `
     var(--zrl-beam-head) 348deg,
     transparent 356deg 360deg
   );
-  animation: ${PREFIX}-orbit var(--zrl-beam-time) linear infinite;
+  animation: ${PREFIX2}-orbit var(--zrl-beam-time) linear infinite;
   will-change: transform;
   transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
 }
@@ -1296,15 +1387,15 @@ var CSS = `
 /* Spent: the light stops where it is and fades, and the edge settles to the
    dim glow. Paused rather than removed, so it does not jump back to its start
    on the way out. */
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam::after,
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam-glow-band::after {
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam::after,
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam-glow-band::after {
   animation-play-state: paused;
   opacity: 0;
 }
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam::before { opacity: 0.55; }
-.${PREFIX}-qr-well[data-spent="true"] .${PREFIX}-qr-beam-glow-band::before { opacity: 0.7; }
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam::before { opacity: 0.55; }
+.${PREFIX2}-qr-well[data-spent="true"] .${PREFIX2}-qr-beam-glow-band::before { opacity: 0.7; }
 
-.${PREFIX}-qr {
+.${PREFIX2}-qr {
   display: block;
   width: 100%;
   height: 100%;
@@ -1319,17 +1410,17 @@ var CSS = `
 /* Once the code is claimed the QR is spent. Blurring it out rather than
    swapping it keeps one object on screen through the state change, so the eye
    reads a transformation instead of two things trading places. */
-.${PREFIX}-qr[data-spent="true"] { opacity: 0.2; filter: var(--zrl-qr-spent-filter); transform: scale(0.96); }
+.${PREFIX2}-qr[data-spent="true"] { opacity: 0.2; filter: var(--zrl-qr-spent-filter); transform: scale(0.96); }
 
-.${PREFIX}-qr-overlay {
+.${PREFIX2}-qr-overlay {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
-  animation: ${PREFIX}-fade 200ms ease-out both;
+  animation: ${PREFIX2}-fade 200ms ease-out both;
 }
 
-.${PREFIX}-qr-badge {
+.${PREFIX2}-qr-badge {
   display: grid;
   place-items: center;
   width: 56px;
@@ -1339,7 +1430,7 @@ var CSS = `
   color: var(--zrl-accent-ink);
 }
 
-.${PREFIX}-status {
+.${PREFIX2}-status {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1350,8 +1441,8 @@ var CSS = `
   color: var(--zrl-ink);
 }
 
-.${PREFIX}-dot { position: relative; display: grid; place-items: center; width: 8px; height: 8px; }
-.${PREFIX}-dot i {
+.${PREFIX2}-dot { position: relative; display: grid; place-items: center; width: 8px; height: 8px; }
+.${PREFIX2}-dot i {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1359,25 +1450,25 @@ var CSS = `
   background: var(--zrl-accent);
   font-style: normal;
 }
-.${PREFIX}-dot i:first-child { animation: ${PREFIX}-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+.${PREFIX2}-dot i:first-child { animation: ${PREFIX2}-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
 
-.${PREFIX}-timer {
+.${PREFIX2}-timer {
   margin: 4px 0 0;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
   color: var(--zrl-ink-mute);
   transition: color 200ms ease-out;
 }
-.${PREFIX}-timer[data-urgent="true"] { color: var(--zrl-urgent); }
+.${PREFIX2}-timer[data-urgent="true"] { color: var(--zrl-urgent); }
 
-.${PREFIX}-help {
+.${PREFIX2}-help {
   padding: 14px 24px;
   border-top: 1px solid var(--zrl-line-soft);
   background: var(--zrl-surface-sunken);
   border-radius: 0;
 }
-.${PREFIX}-help-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--zrl-ink); }
-.${PREFIX}-help-body {
+.${PREFIX2}-help-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--zrl-ink); }
+.${PREFIX2}-help-body {
   margin: 4px auto 0;
   max-width: 34ch;
   font-size: 12px;
@@ -1385,9 +1476,9 @@ var CSS = `
   color: var(--zrl-ink-soft);
 }
 
-.${PREFIX}-footer { padding: 12px; border-top: 1px solid var(--zrl-line-soft); }
+.${PREFIX2}-footer { padding: 12px; border-top: 1px solid var(--zrl-line-soft); }
 
-.${PREFIX}-cancel {
+.${PREFIX2}-cancel {
   display: block;
   width: 100%;
   padding: 10px;
@@ -1401,10 +1492,10 @@ var CSS = `
   cursor: pointer;
   transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
 }
-.${PREFIX}-cancel:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
-.${PREFIX}-cancel:active { transform: scale(0.99); }
+.${PREFIX2}-cancel:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX2}-cancel:active { transform: scale(0.99); }
 
-.${PREFIX}-secured {
+.${PREFIX2}-secured {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1416,9 +1507,9 @@ var CSS = `
   border-radius: 6px;
   transition: color 150ms ease-out;
 }
-.${PREFIX}-secured:hover { color: var(--zrl-ink); }
+.${PREFIX2}-secured:hover { color: var(--zrl-ink); }
 
-.${PREFIX}-close {
+.${PREFIX2}-close {
   position: absolute;
   top: 12px;
   inset-inline-end: 12px;
@@ -1434,25 +1525,25 @@ var CSS = `
   cursor: pointer;
   transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
 }
-.${PREFIX}-close:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
-.${PREFIX}-close:active { transform: scale(0.95); }
+.${PREFIX2}-close:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX2}-close:active { transform: scale(0.95); }
 
-.${PREFIX}-card :focus-visible {
+.${PREFIX2}-card :focus-visible {
   outline: 2px solid var(--zrl-accent);
   outline-offset: 2px;
 }
 
-@keyframes ${PREFIX}-fade { from { opacity: 0 } to { opacity: 1 } }
-@keyframes ${PREFIX}-rise {
+@keyframes ${PREFIX2}-fade { from { opacity: 0 } to { opacity: 1 } }
+@keyframes ${PREFIX2}-rise {
   from { opacity: 0; transform: translateY(10px) scale(0.98) }
   to { opacity: 1; transform: none }
 }
-@keyframes ${PREFIX}-ping {
+@keyframes ${PREFIX2}-ping {
   0% { transform: scale(1); opacity: 0.5 }
   70%, 100% { transform: scale(2.6); opacity: 0 }
 }
 
-@keyframes ${PREFIX}-orbit { to { transform: rotate(360deg) } }
+@keyframes ${PREFIX2}-orbit { to { transform: rotate(360deg) } }
 /* THE BUSY RING. The light of the QR well, around any control that is
    waiting on the provider: the button on a phone between the tap and the
    hand-over to the app. The well's sweep is a cone from the centre, which is
@@ -1469,13 +1560,13 @@ var CSS = `
    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 {
+.${PREFIX2}-ring {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
   --zrl-beam-time: 4s;
 }
-.${PREFIX}-ring-svg {
+.${PREFIX2}-ring-svg {
   position: absolute;
   inset: -4px;
   width: calc(100% + 8px);
@@ -1485,8 +1576,8 @@ var CSS = `
   opacity: 0;
   transition: opacity 200ms ease-out;
 }
-.${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
-.${PREFIX}-ring-svg rect {
+.${PREFIX2}-ring[data-busy="true"] > .${PREFIX2}-ring-svg { opacity: 1; }
+.${PREFIX2}-ring-svg rect {
   --zrl-l: var(--zrl-ring-len, 600px);
   x: 2px;
   y: 2px;
@@ -1497,37 +1588,37 @@ var CSS = `
   stroke-width: var(--zrl-beam-line);
   stroke-linecap: round;
   stroke-dashoffset: var(--zrl-s, 0px);
-  animation: ${PREFIX}-dash var(--zrl-beam-time) linear infinite;
+  animation: ${PREFIX2}-dash var(--zrl-beam-time) linear infinite;
 }
-.${PREFIX}-ring-head { stroke: var(--zrl-beam-head); }
-.${PREFIX}-ring-halo {
+.${PREFIX2}-ring-head { stroke: var(--zrl-beam-head); }
+.${PREFIX2}-ring-halo {
   stroke-width: calc(var(--zrl-glow-core) * 2 + var(--zrl-beam-line));
   filter: blur(var(--zrl-glow-blur));
 }
-@keyframes ${PREFIX}-dash {
+@keyframes ${PREFIX2}-dash {
   from { stroke-dashoffset: var(--zrl-s, 0px); }
   to { stroke-dashoffset: calc(var(--zrl-s, 0px) - var(--zrl-l)); }
 }
 @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; }
+  .${PREFIX2}-ring-svg rect { animation: none; stroke-dasharray: none; opacity: 0.45; }
+  .${PREFIX2}-ring-halo, .${PREFIX2}-ring-head { display: none; }
 }
 
 
 @media (prefers-reduced-motion: reduce) {
-  .${PREFIX}-scrim,
-  .${PREFIX}-card,
-  .${PREFIX}-qr-overlay { animation: none }
-  .${PREFIX}-dot i:first-child { animation: none; opacity: 0.35 }
-  .${PREFIX}-qr,
-  .${PREFIX}-cancel,
-  .${PREFIX}-close,
-  .${PREFIX}-timer { transition: none }
+  .${PREFIX2}-scrim,
+  .${PREFIX2}-card,
+  .${PREFIX2}-qr-overlay { animation: none }
+  .${PREFIX2}-dot i:first-child { animation: none; opacity: 0.35 }
+  .${PREFIX2}-qr,
+  .${PREFIX2}-cancel,
+  .${PREFIX2}-close,
+  .${PREFIX2}-timer { transition: none }
   /* No travelling light; the edge keeps its dim static glow instead. */
-  .${PREFIX}-qr-beam::after,
-  .${PREFIX}-qr-beam-glow-band::after { animation: none; opacity: 0 }
-  .${PREFIX}-qr-beam::before { opacity: 0.55 }
-  .${PREFIX}-qr-beam-glow-band::before { opacity: 0.7 }
+  .${PREFIX2}-qr-beam::after,
+  .${PREFIX2}-qr-beam-glow-band::after { animation: none; opacity: 0 }
+  .${PREFIX2}-qr-beam::before { opacity: 0.55 }
+  .${PREFIX2}-qr-beam-glow-band::before { opacity: 0.7 }
 }
 `;
 function ensureStyles() {
@@ -1932,8 +2023,23 @@ function startLogin(options) {
     try {
       let code;
       let selectBy = "device";
+      let returnId = null;
       if (useAppLink && typeof window !== "undefined") {
         const requestId = generateRequestId();
+        saveReturnFlow({
+          v: 1,
+          issuer,
+          clientId: options.clientId,
+          flow,
+          verifier,
+          nonce,
+          state,
+          scope: options.scope ?? "openid",
+          appState: options.app_state,
+          requestId,
+          createdAt: Date.now()
+        });
+        returnId = requestId;
         const startUrl = sameDeviceStartUrl(issuer, {
           client_id: options.clientId,
           scope: options.scope ?? "openid",
@@ -1946,7 +2052,8 @@ function startLogin(options) {
           prompt: options.prompt,
           locale: options.locale,
           request_id: requestId,
-          origin: window.location.origin
+          origin: window.location.origin,
+          return_to: returnToUrl()
         });
         selectBy = "app_link";
         surface.requestId = requestId;
@@ -1968,6 +2075,9 @@ function startLogin(options) {
           controller.signal,
           { tolerateUnknownUntil: Date.now() + 15e3 }
         );
+        if (isReturnDone(requestId)) {
+          throw new DOMException("aborted", "AbortError");
+        }
       } else {
         const started = await startPairing(
           issuer,
@@ -2068,6 +2178,7 @@ function startLogin(options) {
         }
         teardown();
       }
+      if (returnId) markReturnDone(returnId);
       if (flow === "auth-code") {
         const response2 = {
           code,
@@ -2121,6 +2232,67 @@ function startLogin(options) {
     }
   };
 }
+function resumeLogin(options) {
+  const id = pendingReturnId();
+  if (!id) return null;
+  const saved = peekReturnFlow(id);
+  if (!saved || saved.clientId !== options.clientId) return null;
+  forgetReturnFlow(id);
+  const issuer = options.issuer ?? saved.issuer;
+  const controller = new AbortController();
+  const promise = (async () => {
+    const code = await pollUntilApproved(
+      issuer,
+      id,
+      (s) => options.onState?.({ ...s, appLink: true }),
+      controller.signal,
+      { tolerateUnknownUntil: Date.now() + 5e3 }
+    );
+    let response;
+    if (saved.flow === "auth-code") {
+      response = {
+        code,
+        scope: saved.scope,
+        app_state: saved.appState,
+        code_verifier: saved.verifier,
+        nonce: saved.nonce
+      };
+    } else {
+      const tokens = await exchangeCode(issuer, {
+        code,
+        code_verifier: saved.verifier,
+        client_id: options.clientId
+      });
+      const claims = unsafeClaims(tokens.id_token);
+      response = {
+        credential: tokens.id_token,
+        clientId: options.clientId,
+        select_by: "app_link",
+        acr: claims.acr ?? "zoreal.device"
+      };
+    }
+    markReturnDone(id);
+    return response;
+  })();
+  promise.catch(() => {
+  });
+  return {
+    promise,
+    cancel: () => controller.abort(),
+    get requestId() {
+      return id;
+    },
+    get pairUrl() {
+      return void 0;
+    },
+    get qrUrl() {
+      return void 0;
+    },
+    get appLink() {
+      return true;
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_ISSUER,
@@ -2141,6 +2313,7 @@ function startLogin(options) {
   mountPairingModal,
   pollUntilApproved,
   resolveIntent,
+  resumeLogin,
   startLogin,
   startPairing,
   unsafeClaims