@withone/connect 0.7.0 → 0.8.0

package/src/useOneConnect.ts

@@ -1,41 +1,24 @@
 import {
-  EXIT_MESSAGE_TYPE,
-  MESSAGE_TYPE,
   RETURN_MESSAGE_PARAM,
   RETURN_STATUS_PARAM,
   THEME_PARAM,
 } from "./constants";
-import {
-  createEmbedIframe,
-  getEmbedIframe,
-  removeEmbedIframe,
-  removeSuccessOverlay,
-  showErrorOverlay,
-  showSuccessOverlay,
-} from "./window";
-import type {
-  OneConnectHandle,
-  OneConnectMessage,
-  OneConnectProps,
-} from "./types";
+import type { OneConnectHandle, OneConnectProps } from "./types";
 
 // Like useOneAuth, this is a plain function rather than a React hook so
 // it works from any framework.
 
-/** The return leg is a page LOAD (redirect mode) — only the first hook
- *  instance on the page consumes it. */
+/** The return leg is a page LOAD — only the first hook instance on the
+ *  page consumes it. */
 let returnConsumed = false;
 
 export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
-  let messageHandler: ((event: MessageEvent) => void) | null = null;
   let resultDelivered = false;
-  const mode = props.mode ?? "redirect";
 
   // The theme rides in the URL FRAGMENT: fragments never reach any
   // server and browsers carry them through the whole redirect chain
-  // (consumer's authorize route -> One -> the card), so the consumer's
-  // backend forwards NOTHING. Embedding needs no signal at all -- the
-  // card detects its own iframe with window.self !== window.top.
+  // (consumer's authorize route -> One -> the hosted page), so the
+  // consumer's backend forwards NOTHING.
   const buildUrl = (): string => {
     try {
       // Relative paths ("/api/one/authorize") resolve against the host
@@ -51,136 +34,70 @@ export const useOneConnect = (props: OneConnectProps): OneConnectHandle => {
     }
   };
 
-  const teardown = () => {
-    if (typeof window !== "undefined" && messageHandler) {
-      window.removeEventListener("message", messageHandler);
-      messageHandler = null;
-    }
-    removeEmbedIframe();
-  };
-
-  const deliver = (status: "success" | "error", message?: string) => {
-    if (resultDelivered) return;
-    resultDelivered = true;
-    teardown();
-    // The confirmation beat: by now the frame is gone, so the SDK
-    // paints the result card itself — success AND error both live in
-    // the widget surface (same as authkit), never only in the host UI.
-    if (status === "success") showSuccessOverlay(props.appTheme);
-    else showErrorOverlay(props.appTheme, message);
-    try {
-      if (status === "success") {
-        props.onSuccess?.();
-      } else {
-        props.onError?.(message ?? "The connection was not completed.");
-      }
-    } catch {
-      /* consumer callback errors are not our problem */
-    }
-  };
-
-  // Only trust messages from OUR iframe's browsing context. Exit can
-  // come from One's page (cross-origin); results come from the
-  // completion page, which is the consumer's own origin because the
-  // OAuth redirect brought the frame home.
-  const handleMessage = (event: MessageEvent) => {
-    const data = event.data as OneConnectMessage | undefined;
-    if (!data) return;
-
-    const iframe = getEmbedIframe();
-    if (!iframe || event.source !== iframe.contentWindow) return;
-
-    if (data.type === EXIT_MESSAGE_TYPE) {
-      teardown();
-      try {
-        props.onClose?.();
-      } catch {
-        /* ignore */
-      }
-      return;
-    }
-    if (
-      data.type === MESSAGE_TYPE &&
-      event.origin === window.location.origin &&
-      (data.status === "success" || data.status === "error")
-    ) {
-      deliver(data.status, data.message);
-    }
-  };
-
-  // Fires on every navigation inside the frame. While the frame is on
-  // One's origin, reading its location throws (same-origin policy) and
-  // we ignore it. The moment the consumer's callback redirects home —
-  // to ANY same-origin URL carrying ?one_connect=success|error — the
-  // read succeeds and the flow completes. The consumer writes no
-  // completion page and no postMessage; their callback's final
-  // redirect IS the completion signal.
-  const handleFrameLoad = () => {
-    const iframe = getEmbedIframe();
-    if (!iframe) return;
-    let href: string;
-    try {
-      href = iframe.contentWindow?.location.href ?? "";
-    } catch {
-      return; // still cross-origin — not home yet
-    }
-    let params: URLSearchParams;
-    try {
-      params = new URL(href).searchParams;
-    } catch {
-      return;
-    }
-    const status = params.get(RETURN_STATUS_PARAM);
-    if (status !== "success" && status !== "error") return;
-    iframe.style.visibility = "hidden"; // no flash of the landing page
-    deliver(status, params.get(RETURN_MESSAGE_PARAM) ?? undefined);
-  };
-
+  // Full-page hosted flow, Stripe-Checkout style: same tab, One's own
+  // domain (first-party cookies — works in every browser). The app's
+  // callback redirect brings the user home; detection below picks it
+  // up on the next load.
   const open = () => {
     if (typeof window === "undefined") return;
-    if (mode === "redirect") {
-      // Full-page hosted flow, Stripe-Checkout style: same tab, One's
-      // own domain (first-party — works in every browser). The app's
-      // callback redirect brings the user home; detection below picks
-      // it up on the next load.
-      window.location.assign(buildUrl());
-      return;
-    }
-    resultDelivered = false;
-
-    messageHandler = handleMessage;
-    window.addEventListener("message", messageHandler);
-    const iframe = createEmbedIframe(buildUrl());
-    iframe.addEventListener("load", handleFrameLoad);
+    window.location.assign(buildUrl());
   };
 
-  const close = (options?: { keepResult?: boolean }) => {
-    // A shown result card must be able to OUTLIVE the trigger: hosts
-    // naturally unmount the button the moment onSuccess flips their
-    // state, and that unmount must not eat the confirmation. The
-    // overlay dismisses only via its own controls (X / Close / Esc /
-    // scrim) unless the host explicitly closes everything.
-    if (!options?.keepResult) removeSuccessOverlay();
-    teardown();
-  };
+  // Nothing to dismantle in the full-page flow — kept so hosts (and the
+  // button's destroy path) can call it unconditionally.
+  const close = (_options?: { keepResult?: boolean }) => {};
 
-  // Redirect-mode return detection: the app's callback redirected the
-  // TAB to a URL carrying ?one_connect=… — deliver it once, scrub the
-  // params so a refresh doesn't re-fire, and paint the result card.
+  // Return detection: the app's callback redirected the TAB to a URL
+  // carrying ?one_connect=… — deliver it once and scrub the params so a
+  // refresh doesn't re-fire.
   if (typeof window !== "undefined" && !returnConsumed) {
     const search = new URLSearchParams(window.location.search);
     const returnStatus = search.get(RETURN_STATUS_PARAM);
     if (returnStatus === "success" || returnStatus === "error") {
       returnConsumed = true;
       const returnMessage = search.get(RETURN_MESSAGE_PARAM) ?? undefined;
-      search.delete(RETURN_STATUS_PARAM);
-      search.delete(RETURN_MESSAGE_PARAM);
-      const clean =
-        window.location.pathname +
-        (search.toString() ? `?${search.toString()}` : "") +
-        window.location.hash;
-      window.history.replaceState(null, "", clean);
-      window.setTimeout(() => deliver(returnStatus, returnMessage), 0);
+      // Scrub-and-verify: this code runs during the app's first render,
+      // and frameworks that manage the history themselves (Next.js App
+      // Router) sync the address bar back to THEIR canonical URL when
+      // hydration completes — silently undoing a one-shot replaceState.
+      // So scrub now, then re-check a few beats later and scrub again if
+      // the params were restored.
+      const scrub = () => {
+        const params = new URLSearchParams(window.location.search);
+        if (
+          !params.has(RETURN_STATUS_PARAM) &&
+          !params.has(RETURN_MESSAGE_PARAM)
+        )
+          return;
+        params.delete(RETURN_STATUS_PARAM);
+        params.delete(RETURN_MESSAGE_PARAM);
+        window.history.replaceState(
+          null,
+          "",
+          window.location.pathname +
+            (params.toString() ? `?${params.toString()}` : "") +
+            window.location.hash,
+        );
+      };
+      scrub();
+      for (const delay of [50, 500, 2000]) window.setTimeout(scrub, delay);
+      // No overlay: One's HOSTED page already showed the result beat
+      // ("You're all set" + countdown / the failure screen) before
+      // sending the user home — painting a second card would
+      // double-announce. Callbacks fire so the app updates its state.
+      window.setTimeout(() => {
+        if (resultDelivered) return;
+        resultDelivered = true;
+        try {
+          if (returnStatus === "success") props.onSuccess?.();
+          else
+            props.onError?.(
+              returnMessage ?? "The connection was not completed.",
+            );
+        } catch {
+          /* consumer callback errors are not our problem */
+        }
+      }, 0);
     }
   }
 

package/src/wrapper-options.ts

@@ -5,7 +5,6 @@ import type { ConnectButtonOptions, ConnectButtonPlatform } from "./types";
  *  the core mountConnectButton options. */
 export interface ConnectButtonWrapperProps {
   authorizeUrl: string;
-  mode?: "redirect" | "modal";
   appTheme?: "light" | "dark";
   onSuccess?: () => void;
   onError?: (error: string) => void;
@@ -33,7 +32,6 @@ export function optionsFromWrapperProps(
     connect: {
       authorize: { url: props.authorizeUrl },
       appTheme: props.appTheme,
-      mode: props.mode,
       onSuccess: () => cb.onSuccess?.(),
       onError: (error) => cb.onError?.(error),
       onClose: () => cb.onClose?.(),

package/dist/complete.d.ts

@@ -1,12 +0,0 @@
-import type { OneConnectResult } from "./types";
-/**
- * OPTIONAL. The standard integration needs no completion page at all:
- * the callback route's final redirect carries ?one_connect=success (or
- * error) on any same-origin URL, and the SDK reads it off the frame's
- * location directly. Use this helper only if you render a custom
- * completion page and want to signal the SDK from it explicitly.
- *
- * Returns false when it had nothing to do (not inside a frame) — e.g.
- * the user opened the page directly. Render fallback UI in that case.
- */
-export declare function completeOneConnect(result?: OneConnectResult): boolean;

package/dist/window/index.d.ts

@@ -1,15 +0,0 @@
-export declare const IFRAME_ID = "one-connect-frame";
-export declare function createEmbedIframe(url: string): HTMLIFrameElement;
-export declare function removeEmbedIframe(): void;
-export declare const SUCCESS_ID = "one-connect-success";
-/** The result confirmation shown after the flow ends — the same beat as
- *  authkit's in-frame result screens (success AND error both render in
- *  the widget surface, never only in the host page), dismissed the same
- *  way: the user closes it with the ✕ or the Close button, never a
- *  timer. By this point the card's iframe has already navigated home
- *  and been removed, so the SDK paints this itself. Pure inline styles
- *  — the SDK ships no CSS and loads no assets. */
-export declare function showSuccessOverlay(theme?: "dark" | "light"): void;
-export declare function showErrorOverlay(theme?: "dark" | "light", message?: string): void;
-export declare function removeSuccessOverlay(): void;
-export declare function getEmbedIframe(): HTMLIFrameElement | null;

package/src/complete.ts

@@ -1,36 +0,0 @@
-import { MESSAGE_TYPE } from "./constants";
-import type { OneConnectMessage, OneConnectResult } from "./types";
-
-/**
- * OPTIONAL. The standard integration needs no completion page at all:
- * the callback route's final redirect carries ?one_connect=success (or
- * error) on any same-origin URL, and the SDK reads it off the frame's
- * location directly. Use this helper only if you render a custom
- * completion page and want to signal the SDK from it explicitly.
- *
- * Returns false when it had nothing to do (not inside a frame) — e.g.
- * the user opened the page directly. Render fallback UI in that case.
- */
-export function completeOneConnect(
-  result: OneConnectResult = { status: "success" }
-): boolean {
-  if (typeof window === "undefined") return false;
-
-  if (window.parent && window.parent !== window) {
-    const message: OneConnectMessage = {
-      type: MESSAGE_TYPE,
-      status: result.status,
-      message: result.message,
-    };
-    try {
-      // Target the consumer origin only — never "*". The host page
-      // additionally checks event.origin before trusting the message.
-      window.parent.postMessage(message, window.location.origin);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  return false;
-}

package/src/window/index.ts

@@ -1,171 +0,0 @@
-// Frame management for @withone/connect.
-//
-// The SDK has exactly one presentation: an authkit-style modal. A
-// full-viewport transparent iframe sits over the host page; One's
-// connect page renders a scrim + centered card inside it, so the host
-// app stays visible and dimmed underneath. Works at every viewport
-// size — the card is responsive and the frame is the viewport.
-//
-// Transport note: every step of the flow rides on the user's One
-// session cookie, which is a THIRD-PARTY cookie when the host page is
-// on a different site than One. Production embedding therefore relies
-// on One serving that cookie as `Partitioned` (CHIPS) and allowing the
-// client's domain via frame-ancestors (RFC 6749 §10.13). Same-site
-// setups (e.g. localhost dev) work everywhere as-is.
-
-export const IFRAME_ID = "one-connect-frame";
-
-export function createEmbedIframe(url: string): HTMLIFrameElement {
-  removeEmbedIframe();
-  const iframe = document.createElement("iframe");
-  iframe.id = IFRAME_ID;
-  iframe.src = url;
-  iframe.setAttribute("allowtransparency", "true");
-  Object.assign(iframe.style, {
-    position: "fixed",
-    inset: "0",
-    width: "100%",
-    height: "100%",
-    border: "0",
-    zIndex: "2147483000",
-    background: "transparent",
-    colorScheme: "normal", // keep the transparent viewport from being painted
-  } as Partial<CSSStyleDeclaration>);
-  document.body.appendChild(iframe);
-  return iframe;
-}
-
-export function removeEmbedIframe(): void {
-  const existing = document.getElementById(IFRAME_ID);
-  if (existing) existing.remove();
-}
-
-export const SUCCESS_ID = "one-connect-success";
-
-/** The result confirmation shown after the flow ends — the same beat as
- *  authkit's in-frame result screens (success AND error both render in
- *  the widget surface, never only in the host page), dismissed the same
- *  way: the user closes it with the ✕ or the Close button, never a
- *  timer. By this point the card's iframe has already navigated home
- *  and been removed, so the SDK paints this itself. Pure inline styles
- *  — the SDK ships no CSS and loads no assets. */
-export function showSuccessOverlay(theme?: "dark" | "light"): void {
-  showResultOverlay("success", theme);
-}
-
-export function showErrorOverlay(
-  theme?: "dark" | "light",
-  message?: string,
-): void {
-  showResultOverlay("error", theme, message);
-}
-
-function showResultOverlay(
-  status: "success" | "error",
-  theme?: "dark" | "light",
-  message?: string,
-): void {
-  removeSuccessOverlay();
-  const dark = theme === "dark";
-  const overlay = document.createElement("div");
-  overlay.id = SUCCESS_ID;
-  Object.assign(overlay.style, {
-    position: "fixed",
-    inset: "0",
-    zIndex: "2147483000",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "rgba(8, 8, 8, 0.5)",
-    opacity: "0",
-    transition: "opacity 160ms ease",
-  } as Partial<CSSStyleDeclaration>);
-
-  // Same geometry as every other screen in the flow: the authkit card
-  // is 520×520 (body) with a 48px "Secured by" strip under it — the
-  // success screen must not read as a different, smaller surface.
-  const card = document.createElement("div");
-  Object.assign(card.style, {
-    width: "520px",
-    maxWidth: "calc(100vw - 16px)",
-    height: "520px",
-    maxHeight: "calc(100vh - 16px)",
-    display: "flex",
-    flexDirection: "column",
-    textAlign: "center",
-    fontFamily:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  } as Partial<CSSStyleDeclaration>);
-  const muted = dark ? "#a1a1aa" : "#6b7280";
-  const cardBg = dark ? "rgba(25, 25, 25, 0.97)" : "rgba(255, 255, 255, 0.97)";
-  const cardBorder = dark ? "rgba(255,255,255,0.08)" : "rgba(228,228,223,0.9)";
-  const footerBg = dark ? "rgba(45, 45, 44, 0.9)" : "rgba(232, 232, 228, 0.95)";
-  card.innerHTML =
-    `<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${cardBg};border:1px solid ${cardBorder};border-bottom:0;">` +
-    `<button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${muted};line-height:0;">` +
-    '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>' +
-    "</button>" +
-    `<div style="width:56px;height:56px;border-radius:50%;background:${status === "success" ? "#10b981" : "#ef4444"};display:flex;align-items:center;justify-content:center;">` +
-    (status === "success"
-      ? '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>'
-      : '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>') +
-    "</div>" +
-    `<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${dark ? "#fafafa" : "#111114"};">${status === "success" ? "Access granted" : "Connection failed"}</div>` +
-    `<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${muted};"></div>` +
-    `<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${dark ? "#fafafa" : "#111114"};color:${dark ? "#111114" : "#fafafa"};">Close</button>` +
-    "</div>" +
-    `<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${footerBg};border:1px solid ${cardBorder};border-top:0;">` +
-    `<span style="font-size:11px;color:${muted};">Secured by</span>` +
-    `<span style="display:inline-flex;color:${dark ? "#fafafa" : "#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>` +
-    `<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${dark ? "#fafafa" : "#111114"};">one</span>` +
-    "</div>";
-
-  // Message text arrives from a URL param — set as TEXT, never HTML.
-  const body = card.querySelector("[data-one-result-body]");
-  if (body)
-    body.textContent =
-      status === "success"
-        ? "Your tools are connected. You can pick up right where you left off."
-        : (message ??
-          "The connection was not completed. You can close this and try again.");
-
-  overlay.appendChild(card);
-  document.body.appendChild(overlay);
-  requestAnimationFrame(() => {
-    overlay.style.opacity = "1";
-  });
-
-  const dismiss = () => {
-    window.removeEventListener("keydown", onKeydown);
-    overlay.style.opacity = "0";
-    window.setTimeout(() => overlay.remove(), 180);
-  };
-  function onKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape") dismiss();
-  }
-
-  for (const button of card.querySelectorAll("[data-one-close]")) {
-    button.addEventListener("click", dismiss);
-  }
-  // The card is dismissed deliberately, never on a timer — but this
-  // overlay covers the host page at the top of the stacking context, so
-  // it must never be able to strand the app. Clicking the scrim outside
-  // the card and pressing Escape are both floors under the buttons: if a
-  // button ever fails to render or bind, the user is still not trapped.
-  overlay.addEventListener("click", (event) => {
-    if (event.target === overlay) dismiss();
-  });
-  window.addEventListener("keydown", onKeydown);
-
-  // Send focus somewhere sane for keyboard and screen-reader users, who
-  // otherwise land on a full-viewport overlay with no reachable control.
-  (card.querySelector("[data-one-close]") as HTMLElement | null)?.focus();
-}
-
-export function removeSuccessOverlay(): void {
-  document.getElementById(SUCCESS_ID)?.remove();
-}
-
-export function getEmbedIframe(): HTMLIFrameElement | null {
-  return document.getElementById(IFRAME_ID) as HTMLIFrameElement | null;
-}