refactor(fe): request-driven authorize flow with idle timeout

Replace the isAuthenticating flag (which blocked consent rendering) with
a request-driven architecture:

- New authorizeFlowComplete store: layout shows children when false,
  redirect screen when true.
- Idle timeout: starts after each channel.send() response via a new
  'response' event on the Channel interface. Resets when new requests
  arrive. Fires when no more requests come in within the timeout window.
- AuthorizationChannel handles both icrc34_delegation and
  ii-icrc3-attributes requests, resolving the auth UI for either.
- authorizationStore.authorize() is now pure business logic — no UI state.
- AuthorizationContext: authRequest and requestId are optional (only
  present when delegation was requested).
- Channel interface: added 'response' event, implemented in both
  PostMessageChannel and LegacyChannel.

Author: sea-snake

src/frontend/src/lib/components/utils/AuthorizationChannel.svelte

@@ -8,6 +8,10 @@
     INVALID_PARAMS_ERROR_CODE,
   } from "$lib/utils/transport/utils";
   import { authorizationStore } from "$lib/stores/authorization.store";
+  import {
+    resetIdleTimeout,
+    startIdleTimeout,
+  } from "$lib/stores/authorize-flow.store";
   import { z } from "zod";
   import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
   import Button from "$lib/components/ui/Button.svelte";
@@ -45,17 +49,29 @@
 
   const authorizeChannel = (channel: Channel): Promise<void> =>
     new Promise<void>((resolve, reject) => {
-      // TODO: Standalone attribute requests (ii-icrc3-attributes without prior
-      // icrc34_delegation) need a separate flow that doesn't depend on
-      // authorizationContextStore. This will be addressed in a follow-up.
+      let resolved = false;
+
+      // When any recognized request arrives, reset the idle timeout
+      // so the flow stays active.
+      channel.addEventListener("request", (request) => {
+        if (request.id === undefined) {
+          return;
+        }
+        if (
+          request.method === "icrc34_delegation" ||
+          request.method === "ii-icrc3-attributes"
+        ) {
+          resetIdleTimeout();
+        }
+      });
 
+      // Handle delegation requests
       channel.addEventListener("request", async (request) => {
         if (
           request.id === undefined ||
           request.method !== "icrc34_delegation" ||
           $authorizationStore !== undefined
         ) {
-          // Ignore if it's a different method, or we're already processing
           return;
         }
         const result = DelegationParamsCodec.safeParse(request.params);
@@ -82,9 +98,12 @@
             request.id,
             result.data,
           );
-          resolve();
+          if (!resolved) {
+            resolved = true;
+            resolve();
+          }
         } catch (error) {
-          console.error(error); // Log error to console
+          console.error(error);
           reject(
             new AuthorizeChannelError(
               $t`Unverified origin`,
@@ -93,6 +112,21 @@
           );
         }
       });
+
+      // Handle standalone attribute requests (resolve auth UI if not already)
+      channel.addEventListener("request", (request) => {
+        if (
+          request.id === undefined ||
+          request.method !== "ii-icrc3-attributes"
+        ) {
+          return;
+        }
+        authorizationStore.setOrigin(channel.origin);
+        if (!resolved) {
+          resolved = true;
+          resolve();
+        }
+      });
     });
 
   let authorizePromise = $state(
@@ -116,6 +150,10 @@
           // Don't authorize if we're only doing an initial handshake
           return;
         }
+        // Start the idle timeout after each response is sent.
+        channel.addEventListener("response", () => {
+          startIdleTimeout();
+        });
         // Replace promise when channel closes after it was established
         channel.addEventListener("close", () => {
           authorizePromise = Promise.reject(

src/frontend/src/lib/stores/authorization.store.ts

@@ -14,11 +14,10 @@ import { DelegationChain } from "@icp-sdk/core/identity";
 import { AuthRequest, DelegationParams } from "$lib/utils/transport/utils";
 
 export type AuthorizationContext = {
-  authRequest: AuthRequest; // Additional details e.g. derivation origin
-  requestId: string | number; // The ID of the JSON RPC request
+  authRequest?: AuthRequest; // Present when delegation was requested
+  requestId?: string | number; // JSON RPC request ID for delegation
   requestOrigin: string; // Displayed to the user to identify the app
   effectiveOrigin: string; // Used for last used storage and delegations
-  isAuthenticating: boolean; // True if user is being redirect back to app
 };
 
 type AuthorizationStore = Readable<AuthorizationContext | undefined> & {
@@ -27,6 +26,7 @@ type AuthorizationStore = Readable<AuthorizationContext | undefined> & {
     requestId: string | number,
     params: DelegationParams,
   ) => Promise<void>;
+  setOrigin: (requestOrigin: string) => void;
   authorize: (
     accountNumber: Promise<bigint | undefined> | bigint | undefined,
     artificialDelay?: number,
@@ -60,16 +60,26 @@ export const authorizationStore: AuthorizationStore = {
       requestId,
       requestOrigin,
       effectiveOrigin,
-      isAuthenticating: false,
+    });
+  },
+  setOrigin: (requestOrigin) => {
+    // Set minimal context (just origin) if no context exists yet.
+    // Used for attributes-only flow where no delegation was requested.
+    if (get(internalStore) !== undefined) {
+      return;
+    }
+    internalStore.set({
+      requestOrigin,
+      effectiveOrigin: remapToLegacyDomain(requestOrigin),
     });
   },
   subscribe: (...args) => internalStore.subscribe(...args),
   authorize: async (accountNumberMaybePromise, artificialDelay) => {
     const context = get(authorizationContextStore);
-    internalStore.set({
-      ...context,
-      isAuthenticating: true,
-    });
+    if (context.authRequest === undefined || context.requestId === undefined) {
+      throw new Error("Cannot authorize without a delegation request");
+    }
+    const { authRequest, requestId } = context;
     const { identityNumber, actor } = get(authenticatedStore);
     const artificialDelayPromise = waitFor(
       features.DUMMY_AUTH ||
@@ -83,9 +93,9 @@ export const authorizationStore: AuthorizationStore = {
         identityNumber,
         context.effectiveOrigin,
         accountNumber !== undefined ? [accountNumber] : [],
-        context.authRequest.sessionPublicKey,
-        context.authRequest.maxTimeToLive !== undefined
-          ? [context.authRequest.maxTimeToLive]
+        authRequest.sessionPublicKey,
+        authRequest.maxTimeToLive !== undefined
+          ? [authRequest.maxTimeToLive]
           : [],
       )
       .then(throwCanisterError);
@@ -95,7 +105,7 @@ export const authorizationStore: AuthorizationStore = {
           identityNumber,
           context.effectiveOrigin,
           accountNumber !== undefined ? [accountNumber] : [],
-          context.authRequest.sessionPublicKey,
+          authRequest.sessionPublicKey,
           expiration,
         )
         .then(throwCanisterError)
@@ -108,7 +118,7 @@ export const authorizationStore: AuthorizationStore = {
         ),
     );
     await artificialDelayPromise;
-    return { requestId: context.requestId, delegationChain };
+    return { requestId, delegationChain };
   },
 };
 

src/frontend/src/lib/stores/authorize-flow.store.ts

@@ -0,0 +1,33 @@
+import { writable } from "svelte/store";
+
+/**
+ * Whether the authorize flow has completed all pending requests.
+ *
+ * - `false` — Requests are being handled or might still arrive. Layout renders children.
+ * - `true` — No more requests expected. Layout shows the "you may close this page" screen.
+ */
+export const authorizeFlowComplete = writable<boolean>(false);
+
+const IDLE_TIMEOUT_MS = 500;
+let idleTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+/**
+ * Start the idle countdown. When it fires, `authorizeFlowComplete` becomes `true`.
+ * Call after sending a response on the channel — if no new request arrives
+ * within the timeout window, the flow is considered complete.
+ */
+export const startIdleTimeout = () => {
+  clearTimeout(idleTimeoutId);
+  idleTimeoutId = setTimeout(() => {
+    authorizeFlowComplete.set(true);
+  }, IDLE_TIMEOUT_MS);
+};
+
+/**
+ * Cancel the idle countdown and mark the flow as active.
+ * Called by the channel request listener when a new request arrives.
+ */
+export const resetIdleTimeout = () => {
+  clearTimeout(idleTimeoutId);
+  authorizeFlowComplete.set(false);
+};

src/frontend/src/lib/utils/transport/legacy.ts

@@ -206,6 +206,7 @@ class LegacyChannel implements Channel {
   #redirectOrigin?: string;
   #authRequest?: AuthRequest;
   #closeListeners = new Set<() => void>();
+  #responseListeners = new Set<(response: JsonResponse) => void>();
 
   constructor(
     origin: string,
@@ -230,11 +231,19 @@ class LegacyChannel implements Channel {
     ...[event, listener]:
       | [event: "close", listener: () => void]
       | [event: "request", listener: (request: JsonRequest) => void]
+      | [event: "response", listener: (response: JsonResponse) => void]
   ): () => void {
     if (event === "close") {
       this.#closeListeners.add(listener);
       return () => this.#closeListeners.delete(listener);
     }
+    if (event === "response") {
+      this.#responseListeners.add(listener as (response: JsonResponse) => void);
+      return () =>
+        this.#responseListeners.delete(
+          listener as (response: JsonResponse) => void,
+        );
+    }
     // Replay auth request if it didn't get a response yet
     const authRequest = this.#authRequest;
     if (event === "request" && authRequest !== undefined) {
@@ -315,6 +324,7 @@ class LegacyChannel implements Channel {
     }
 
     window.opener.postMessage(data, this.#origin);
+    this.#responseListeners.forEach((listener) => listener(response));
     return Promise.resolve();
   }
 

src/frontend/src/lib/utils/transport/postMessage.ts

@@ -20,6 +20,7 @@ class PostMessageChannel implements Channel {
   #closed = false;
   #requests: JsonRequest[] = [];
   #requestListeners = new Set<(request: JsonRequest) => void>();
+  #responseListeners = new Set<(response: JsonResponse) => void>();
   #closeListeners = new Set<() => void>();
 
   constructor(origin: string, source: WindowProxy) {
@@ -54,6 +55,7 @@ class PostMessageChannel implements Channel {
     ...[event, listener]:
       | [event: "close", listener: () => void]
       | [event: "request", listener: (request: JsonRequest) => void]
+      | [event: "response", listener: (response: JsonResponse) => void]
   ): () => void {
     switch (event) {
       case "close":
@@ -69,18 +71,28 @@ class PostMessageChannel implements Channel {
           this.#requestListeners.delete(listener);
         };
       }
+      case "response":
+        this.#responseListeners.add(
+          listener as (response: JsonResponse) => void,
+        );
+        return () => {
+          this.#responseListeners.delete(
+            listener as (response: JsonResponse) => void,
+          );
+        };
     }
   }
 
   send(response: JsonResponse): Promise<void> {
     if (this.#closed) {
       throw new Error("Post message channel is closed");
     }
-    // Send response and remove request
+    // Send response, remove request, and notify response listeners
     this.#source.postMessage(response, this.#origin);
     this.#requests = this.#requests.filter(
       (request) => request.id !== response.id,
     );
+    this.#responseListeners.forEach((listener) => listener(response));
     return Promise.resolve();
   }
 

src/frontend/src/lib/utils/transport/utils.ts

@@ -21,6 +21,10 @@ export interface Channel {
     event: "request",
     listener: (request: JsonRequest) => void,
   ): () => void;
+  addEventListener(
+    event: "response",
+    listener: (response: JsonResponse) => void,
+  ): () => void;
   send(response: JsonResponse): Promise<void>;
   close(): Promise<void>;
 }