@runappsai/sdk 0.7.6 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runappsai/sdk",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "description": "JavaScript / TypeScript client for the RunApps AI Gateway",
   "license": "MIT",
   "author": "RunApps",

package/src/browser-auth.ts

@@ -41,6 +41,16 @@ export interface BrowserAuthOptions {
    * through `RunApps`.
    */
   hideBadge?: boolean;
+  /**
+   * How a missing token is obtained. `"redirect"` (default) navigates
+   * the page to the grant flow and back, which discards unsaved work in
+   * the page. `"popup"` opens the grant flow in a popup window and waits:
+   * the popup lands back on this origin with the token, which it stores,
+   * and this page picks it up through the `storage` event — so it works
+   * under COOP, where popups lose their `window.opener`. A blocked popup
+   * falls back to the redirect.
+   */
+  signInMode?: "redirect" | "popup";
   /**
    * Pin the grant flow to a named runapps.ai project.  When set, the
    * SDK passes `project_id=<value>` to `/api/sdk/grant`, asking the
@@ -105,6 +115,17 @@ const TOKEN_REFRESH_MARGIN_S = 60;
 // unsuffixed key, which preserves back-compat for already-persisted
 // tokens after upgrade.
 const STORAGE_KEY_BASE = "__runapps_auth_v1__";
+/** window.name of the sign-in popup. */
+const POPUP_NAME = "runapps-signin";
+/** Query parameter marking the app URL the popup lands on when the host
+ *  has no callback page (window.name is reset by a COOP swap, so it
+ *  cannot carry the mark). */
+const POPUP_PARAM = "runapps_popup";
+/** The callback page every app host on the platform serves: it stores the
+ *  token for the app and closes, without loading the app. */
+const POPUP_CALLBACK_PATH = "/__runapps/signin.html";
+/** Hosts whose backend serves POPUP_CALLBACK_PATH. */
+const hasCallbackPage = (hostname: string) => /\.runapps\.dev$/i.test(hostname) || /\.localhost$/i.test(hostname);
 // Written by SDK 0.3 and earlier; read once and migrated, so an upgrade
 // keeps the user signed in.
 const LEGACY_STORAGE_KEY_BASE = "__runjobs_auth_v1__";
@@ -168,6 +189,9 @@ export class BrowserAuth {
   private readonly badgePosition: BadgePosition;
   private token: string | null = null;
   private expiresAt = 0;
+  private signInMode: "redirect" | "popup";
+  private popupWait: Promise<void> | null = null;
+  private popupOpenedAt = 0;
   private userInfo: BrowserUser | null = null;
   private listeners: Array<(token: string) => void> = [];
   private parentHandshake: Promise<void> | null = null;
@@ -179,6 +203,7 @@ export class BrowserAuth {
     this.project = opts.project ?? null;
     this.events = opts.events ?? null;
     this.badgePosition = opts.badgePosition ?? "bottom-right";
+    this.signInMode = opts.signInMode ?? "redirect";
     if (this.events && !this.hideBadge) {
       this.tracker = new ActivityTracker();
       this.tracker.attach(this.events);
@@ -201,6 +226,13 @@ export class BrowserAuth {
     // sticky flag — the user explicitly signed in again.
     if (this.consumeFragment()) {
       this.clearSignedOut();
+      if (new URLSearchParams(location.search).has(POPUP_PARAM)) {
+        // We are the sign-in popup, landed on the app itself (no callback
+        // page on this host): the token is already in localStorage, which
+        // the opener (same origin) sees through its `storage` event.
+        this.finishPopup();
+        return;
+      }
     }
 
     if (this.isSignedOut()) {
@@ -277,6 +309,11 @@ export class BrowserAuth {
     // No fresh token + can't get one silently → redirect to grant.
     // The page is about to unload; return a never-resolving Promise so
     // the caller doesn't proceed with a half-issued request.
+    if (this.signInMode === "popup") {
+      await this.signInPopup();
+      if (this.tokenIsFresh()) return this.token as string;
+      throw new Error("RunApps: sign-in did not complete");
+    }
     this.signIn();
     return new Promise(() => {});
   };
@@ -360,25 +397,101 @@ export class BrowserAuth {
     this.clearPersisted();
   }
 
-  /** Force a redirect to the grant page. */
-  signIn(): void {
-    if (typeof window === "undefined" || this.signingIn) return;
+  /** Start the grant flow: a redirect (default) or, in popup mode, a
+   *  popup window — then the returned promise resolves once the token
+   *  has arrived (and rejects if the popup is closed first). */
+  signIn(): Promise<void> | void {
+    if (typeof window === "undefined") return;
+    if (this.signInMode === "popup") return this.signInPopup();
+    if (this.signingIn) return;
     // Explicit signIn clears the "signed out" flag so getToken() can
     // proceed with the redirect-grant flow.
     this.clearSignedOut();
     this.signingIn = true;
-    const ret = location.href.split("#")[0] ?? location.href;
+    location.href = this.grantUrlForThisPage();
+  }
+  private grantUrlForThisPage(popup = false): string {
+    let ret = location.href.split("#")[0] ?? location.href;
+    if (popup) {
+      if (hasCallbackPage(location.hostname)) {
+        const q = new URLSearchParams({ key: storageKey(this.project), origin: this.origin });
+        ret = location.origin + POPUP_CALLBACK_PATH + "?" + q.toString();
+      } else {
+        const u = new URL(ret);
+        u.searchParams.set(POPUP_PARAM, "1");
+        ret = u.toString();
+      }
+    }
     const scheme = window.matchMedia?.("(prefers-color-scheme: dark)")
       .matches
       ? "dark"
       : "light";
-    location.href = this.buildGrantUrl({
+    return this.buildGrantUrl({
       pageOrigin: location.origin,
       app: location.host,
       redirectTo: ret,
       scheme,
     });
   }
+  /** Popup grant flow. One popup at a time; concurrent callers share it. */
+  private signInPopup(): Promise<void> {
+    // One popup at a time; a click a few seconds later (the user closed
+    // the first one, say) opens a fresh one and joins the same wait.
+    const now = Date.now();
+    if (this.popupWait && now - this.popupOpenedAt < 3000) return this.popupWait;
+    this.clearSignedOut();
+    const key = storageKey(this.project);
+    const win = window.open(this.grantUrlForThisPage(true), POPUP_NAME, "popup=yes,width=520,height=700");
+    if (!win) {
+      // Popup blocked: the redirect is the only way left.
+      this.signingIn = true;
+      location.href = this.grantUrlForThisPage();
+      return new Promise(() => {});
+    }
+    this.popupOpenedAt = now;
+    if (this.popupWait) return this.popupWait;
+    // Under COOP the popup's handle is cut off as soon as it leaves this
+    // origin (`win.closed` reads true), so a closed popup cannot be told
+    // from one still signing in: the promise stays pending until a token
+    // arrives, like Puter's own sign-in.
+    this.popupWait = new Promise<void>((resolve) => {
+      let timer = 0;
+      const adopt = (): boolean => {
+        const before = this.token;
+        this.loadPersisted();
+        if (!this.tokenIsFresh()) return false;
+        if (this.token !== before) this.setToken(this.token as string, this.expiresAt, this.userInfo ?? undefined);
+        else if (this.userInfo && !this.hideBadge) this.renderBadge();
+        window.removeEventListener("storage", onStorage);
+        window.clearInterval(timer);
+        this.popupWait = null;
+        resolve();
+        return true;
+      };
+      const onStorage = (e: StorageEvent) => {
+        if (e.key === key && e.newValue) adopt();
+      };
+      window.addEventListener("storage", onStorage);
+      timer = window.setInterval(adopt, 1000);
+    });
+    return this.popupWait;
+  }
+  /** Inside the popup, after the token landed: close, or say so. */
+  private finishPopup() {
+    try { window.close(); } catch { /* not script-closable */ }
+    if (window.closed) return;
+    // Still open: stop the app from loading and show a plain page instead.
+    try { window.stop(); } catch { /* ignore */ }
+    try {
+      document.open();
+      document.write(
+        '<!doctype html><html><head><meta charset="utf-8"><title>Signed in</title></head>' +
+        '<body style="margin:0;display:flex;align-items:center;justify-content:center;height:100vh;font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#333;background:#fafafa;text-align:center">' +
+        '<div><p>Signed in. You can go back to the app.</p><button onclick="window.close()" style="padding:8px 16px;font:inherit;border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer">Close this window</button></div></body></html>',
+      );
+      document.close();
+    } catch { /* ignore */ }
+  }
 
   /**
    * Build the `/api/sdk/grant?…` URL the user is redirected to.  Split

package/src/client.ts

@@ -60,6 +60,14 @@ export interface ClientOptions {
    * badge in the corner.
    */
   showIdentityBadge?: boolean;
+  /**
+   * How the browser auth flow obtains a token when there is none:
+   * `"redirect"` (default) navigates the page away and back, losing
+   * unsaved state; `"popup"` signs in through a popup window and
+   * resumes the pending call, so the page keeps its state. See
+   * `BrowserAuthOptions.signInMode`.
+   */
+  signInMode?: "redirect" | "popup";
   /**
    * Which corner the identity badge floats in. Defaults to
    * `"bottom-right"` — the canonical tray-app position. Switch to
@@ -213,6 +221,7 @@ export class RunApps {
         events: this.events,
         ...(options.badgePosition !== undefined && { badgePosition: options.badgePosition }),
         ...(options.project !== undefined && { project: options.project }),
+        ...(options.signInMode !== undefined && { signInMode: options.signInMode }),
       });
       (this as { auth: BrowserAuth | null }).auth = auth;
       // The browser auth resolver wins over any caller-supplied one
@@ -278,8 +287,8 @@ export class RunApps {
 
   /** Force a redirect to the runapps.ai grant page.  No-op in static
    *  auth mode or in Node. */
-  signIn(): void {
-    this.auth?.signIn();
+  signIn(): Promise<void> | void {
+    return this.auth?.signIn();
   }
 
   /**