From 48acbefb656e55f13b09cdcc12fd6b5639a6f3aa Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 14 Aug 2026 22:59:59 -0700
Subject: [PATCH] Calculate client-side window expiration from `exp` query
 param

This change makes the client-side expiration in sync with the server-side expiration. Previously, if the client-side window is opened later than the server's start time, the expirations would be de-synced. It is also a maintenance burden to keep the duration constants in sync between the two.
---
 src/getPrf.html     |  7 +++----
 src/getPrf.js       |  3 ++-
 test/getPrf.test.js | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/getPrf.html b/src/getPrf.html
index 91ab97a..255b440 100644
--- a/src/getPrf.html
+++ b/src/getPrf.html
@@ -53,14 +53,13 @@
   <p>Create or select a passkey, or <button class="link">click here</button> if no prompt appeared. This window will expire in 2 minutes.</p>
 
   <script type="module">
-    // Extract and delete challenge from URL
-    const { challenge } = Object.fromEntries(new URLSearchParams(location.search));
+    const { challenge, exp } = Object.fromEntries(new URLSearchParams(location.search));
     history.replaceState(null, '', location.pathname);
 
     const p = document.querySelector('p');
 
-    const WINDOW_EXPIRATION_DURATION = 2 * 60 * 1000; // 2 minutes in milliseconds
-    const timeoutId = setTimeout(() => p.textContent = 'This window has expired.', WINDOW_EXPIRATION_DURATION);
+    const expiration = Number(exp) - Date.now();
+    const timeoutId = setTimeout(() => p.textContent = 'This window has expired.', expiration);
 
     async function createPrf(signal) {
       signal.throwIfAborted();
diff --git a/src/getPrf.js b/src/getPrf.js
index 3a66334..94922c2 100644
--- a/src/getPrf.js
+++ b/src/getPrf.js
@@ -94,6 +94,7 @@ export async function getPrf(options = {}) {
 
   // Flow expires after 2 minutes or canceled
   const timeoutId = setTimeout(() => server.close(() => abortResolve(null)), WINDOW_EXPIRATION_DURATION);
+  const timeoutExp = Date.now() + WINDOW_EXPIRATION_DURATION;
   if (signal !== undefined) {
     signal.addEventListener('abort', () => {
       clearTimeout(timeoutId);
@@ -193,7 +194,7 @@ export async function getPrf(options = {}) {
   server.listen(port, 'localhost');
   server.on('listening', () => {
     const { port } = /** @type {AddressInfo} */(server.address());
-    const url = `http://localhost:${port}?challenge=${challenge}`;
+    const url = `http://localhost:${port}?challenge=${challenge}&exp=${timeoutExp}`;
     urlResolve(url);
     if (autoOpen) { BROWSER.open(url); }
   });
diff --git a/test/getPrf.test.js b/test/getPrf.test.js
index e5bdedf..917a4f9 100644
--- a/test/getPrf.test.js
+++ b/test/getPrf.test.js
@@ -224,6 +224,20 @@ suite('getPrf.html (client)', () => {
     await page.clock.runFor(WINDOW_EXPIRATION_DURATION);
     match(await page.locator('p').textContent() ?? '', /^This window has expired/);
   });
+  test('window expiration is calculated from a set date, not from hardcoded duration', async (t) => {
+    const { setAutomaticSignIn, page } = await setupPlaywright(t);
+    const { url } = await setupServer(t);
+
+    await setAutomaticSignIn(false);
+
+    await page.clock.install();
+    await page.clock.runFor(WINDOW_EXPIRATION_DURATION / 2);
+    await page.goto(url);
+
+    match(await page.locator('p').textContent() ?? '', /^Create or select a passkey/);
+    await page.clock.runFor(WINDOW_EXPIRATION_DURATION / 2);
+    match(await page.locator('p').textContent() ?? '', /^This window has expired/);
+  });
   test('create passkey on page load works', async (t) => {
     const { page } = await setupPlaywright(t);
     const { url, prf } = await setupServer(t);
-- 
2.47.3