@cosmoops/connect-sdk 0.34.0 → 0.35.0

package/dist/esm/server/handler.js

@@ -55,6 +55,99 @@ function sameState(a, b) {
         diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
     return diff === 0;
 }
+/**
+ * How many sign-ins one browser may have in flight at once.
+ *
+ * The state cookie used to hold a *single* `state:next` pair, so a second
+ * `GET /signin` overwrote the first. Two tabs - or one abandoned attempt and
+ * one fresh one - and the older round trip came back to a cookie naming a
+ * state it had never heard of: `connect_error=state_mismatch`, which the host
+ * app's own session gate answers by silently firing another `/signin`, putting
+ * the visitor back on the sign-in screen with nothing on the page saying why.
+ *
+ * Five is far past what anyone opens by hand and still a cookie nobody
+ * notices - each entry is a 43-character state plus a short path. Entries are
+ * newest-first and the oldest fall off the end, so the tab a visitor is
+ * actually looking at is the last one to be forgotten.
+ *
+ * It does not weaken the CSRF check: a callback must still present one of
+ * these exact 256-bit values, and each still expires with the cookie.
+ */
+const MAX_PENDING_STATES = 5;
+/** `-` and `r` are the only flag fields this format writes - see `decodePendingState`. */
+const RETRIED_FLAG = "r";
+const NO_FLAGS = "-";
+/**
+ * The state cookie's wire format: one entry per in-flight sign-in, newest
+ * first, joined by `|`.
+ *
+ * An entry is `state:flags:next` with the destination **percent-encoded**
+ * rather than written raw, and that is what makes splitting on a delimiter
+ * safe: `state` is base64url so it can hold neither, and an encoded path
+ * cannot be read as a field boundary however many colons or pipes it
+ * contains. The raw single-pair format this replaces is exactly why `retried`
+ * and the silent marker had to live outside the cookie - the split was too
+ * fragile to carry a third field.
+ */
+function encodePendingStates(entries) {
+    return entries
+        .map((entry) => `${entry.state}:${entry.retried ? RETRIED_FLAG : NO_FLAGS}:${encodeURIComponent(entry.next)}`)
+        .join("|");
+}
+function decodePendingStates(raw) {
+    if (!raw)
+        return [];
+    const entries = [];
+    for (const part of raw.split("|")) {
+        const entry = decodePendingState(part);
+        if (entry)
+            entries.push(entry);
+    }
+    return entries;
+}
+/**
+ * One entry, tolerating the format this replaced.
+ *
+ * A cookie minted by the previous version is a single raw `state:next` pair,
+ * and sign-ins in flight across a deploy carry one. The flag field is a known
+ * one-character set, so anything else in that position means the remainder is
+ * a legacy destination - including one that itself contains a colon. Dropping
+ * those instead would answer every mid-deploy callback with
+ * `state_mismatch`.
+ */
+function decodePendingState(part) {
+    const firstColon = part.indexOf(":");
+    if (firstColon <= 0)
+        return null;
+    const state = part.slice(0, firstColon);
+    const remainder = part.slice(firstColon + 1);
+    const secondColon = remainder.indexOf(":");
+    const flags = secondColon === -1 ? "" : remainder.slice(0, secondColon);
+    const hasFlags = flags === NO_FLAGS || flags === RETRIED_FLAG;
+    return {
+        state,
+        next: decodeDestination(hasFlags ? remainder.slice(secondColon + 1) : remainder),
+        retried: flags === RETRIED_FLAG,
+    };
+}
+/**
+ * `decodeURIComponent` throws on a lone `%`, which a legacy raw destination
+ * may well hold. The undecoded string then goes through `safeRedirect` like
+ * any other candidate, so a malformed one costs the default destination
+ * rather than a 500.
+ */
+function decodeDestination(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+/** Appends `connect_error=<code>` to a destination that may already carry a query. */
+function withError(next, code) {
+    return `${next}${next.includes("?") ? "&" : "?"}connect_error=${encodeURIComponent(code)}`;
+}
 function readCookie(request, name) {
     const header = request.headers.get("cookie");
     if (!header)
@@ -127,6 +220,10 @@ export function createConnectHandler(options) {
      * the cross-site redirect back from Connect, which is the one request that
      * has to read it. Scoped to `basePath` so it is never attached to ordinary
      * page loads.
+     *
+     * Holds every in-flight round trip rather than the latest one - see
+     * `MAX_PENDING_STATES` and `encodePendingStates`. An empty value clears it,
+     * which is what an exchange that consumed the last pending entry wants.
      */
     function stateCookie(value, secure) {
         const cleared = value === "";
@@ -956,6 +1053,17 @@ export function createConnectHandler(options) {
          * alongside the post-login destination, and bounces the browser to
          * Connect.
          *
+         * The new entry is **prepended to whatever is already pending** rather
+         * than replacing it, so opening the app in a second tab no longer
+         * invalidates the first - see `MAX_PENDING_STATES`.
+         *
+         * `?connect_retry=1` is stamped onto the entry here, which is the only
+         * place that marker can be read: it is a query parameter on *this* URL,
+         * and the `redirect_uri` handed to Connect is a registered, exact-match
+         * value that cannot carry it. The callback used to look for it on its own
+         * URL, where it could never arrive - so both retry bounds below were
+         * unreachable and `login_required` could loop indefinitely.
+         *
          * Registered only when the session store can `write` - without that, the
          * callback would have nowhere to put the session it just earned.
          */
@@ -971,9 +1079,13 @@ export function createConnectHandler(options) {
                 state,
                 ...(prompt ? { prompt } : {}),
             });
-            // State and destination travel together in one cookie so the callback
+            // State and destination travel together in one entry so the callback
             // cannot end up with one and not the other.
-            const cookies = [stateCookie(`${state}:${next}`, secure)];
+            const pending = [
+                { state, next, retried: url.searchParams.get("connect_retry") === "1" },
+                ...decodePendingStates(readCookie(request, stateCookieName)),
+            ].slice(0, MAX_PENDING_STATES);
+            const cookies = [stateCookie(encodePendingStates(pending), secure)];
             if (prompt === "none")
                 cookies.push(silentCookie("1", secure));
             return redirect(authorizeUrl, cookies);
@@ -986,20 +1098,49 @@ export function createConnectHandler(options) {
         "GET /callback": async (request) => {
             const url = new URL(request.url);
             const secure = url.protocol === "https:";
-            const [cookieState, ...destinationParts] = (readCookie(request, stateCookieName) ?? "").split(":");
-            const next = safeRedirect(destinationParts.join(":") || null, defaultRedirect);
-            const clearState = stateCookie("", secure);
+            const pending = decodePendingStates(readCookie(request, stateCookieName));
             const returnedState = url.searchParams.get("state") ?? "";
-            if (!cookieState || !sameState(cookieState, returnedState)) {
-                // Either a forged callback or a genuinely stale tab. Neither should
-                // mint a session, and neither is worth an error page.
-                return redirect(`${next}${next.includes("?") ? "&" : "?"}connect_error=state_mismatch`, [
-                    clearState,
-                    silentCookie("", secure),
-                ]);
-            }
+            const matched = pending.find((entry) => sameState(entry.state, returnedState)) ?? null;
+            // Every *other* in-flight sign-in survives this one. Clearing the whole
+            // cookie is what made a second tab collateral damage: finishing in one
+            // tab left the other holding a state the server had just forgotten.
+            const settleState = stateCookie(encodePendingStates(pending.filter((entry) => entry !== matched)), secure);
+            // Only ever this flow's own destination. With no match there is no
+            // destination to trust - a `next` belonging to a different round trip is
+            // somebody else's business, so that case takes the default.
+            const next = safeRedirect(matched?.next ?? null, defaultRedirect);
+            // Read before the state check, not after. A `prompt=none` probe must
+            // never escalate into a visible sign-in - including the retry below -
+            // and the mismatch branch is reachable for a silent probe whose cookie
+            // has expired.
             const wasSilent = readCookie(request, silentCookieName) === "1";
             const clearSilent = silentCookie("", secure);
+            /** One more interactive attempt, marked so the next pass can tell. */
+            const retrySignIn = () => {
+                const retry = new URL(`${url.origin}${basePath}/signin`);
+                retry.searchParams.set("next", next);
+                retry.searchParams.set("connect_retry", "1");
+                return redirect(retry.toString(), [settleState, clearSilent]);
+            };
+            if (!matched) {
+                // A stale tab whose cookie has expired, more entries in flight than
+                // `MAX_PENDING_STATES` holds, or a forged callback. None of them mints
+                // a session and none is worth an error page.
+                //
+                // One retry, because the overwhelmingly common cause is a round trip
+                // whose own entry is simply gone and whose visitor Connect has already
+                // signed in - that completes in a single hop. The bound reads *any*
+                // pending entry's marker rather than the matched one, there being
+                // none: a browser that has already been bounced once gets the error
+                // instead of another lap. Without it this is the silent infinite loop,
+                // since the host app's session gate answers `/dashboard` with no
+                // session by firing `/signin` again.
+                if (wasSilent)
+                    return redirect(next, [settleState, clearSilent]);
+                if (!pending.some((entry) => entry.retried))
+                    return retrySignIn();
+                return redirect(withError(next, "state_mismatch"), [settleState, clearSilent]);
+            }
             const error = url.searchParams.get("error");
             if (error) {
                 // A silent (`prompt=none`) probe that came back empty-handed. All
@@ -1014,27 +1155,20 @@ export function createConnectHandler(options) {
                 // if they're already here" into "force everyone to log in", which is
                 // the precise opposite of the feature.
                 if (wasSilent) {
-                    return redirect(next, [clearState, clearSilent]);
+                    return redirect(next, [settleState, clearSilent]);
                 }
                 // `login_required` is normal traffic, not a fault: a new account gets
                 // pulled out to their inbox to verify, and the ~15 minute request
                 // expires before they return. Connect has already signed them in, so
-                // one silent retry completes in a single hop. `connect_retry` bounds
-                // it - a genuine loop must surface, not spin.
-                if (error === "login_required" && url.searchParams.get("connect_retry") !== "1") {
-                    const retry = new URL(`${url.origin}${basePath}/signin`);
-                    retry.searchParams.set("next", next);
-                    retry.searchParams.set("connect_retry", "1");
-                    return redirect(retry.toString(), [clearState, clearSilent]);
-                }
-                return redirect(`${next}${next.includes("?") ? "&" : "?"}connect_error=${encodeURIComponent(error)}`, [
-                    clearState,
-                    clearSilent,
-                ]);
+                // one silent retry completes in a single hop. The marker on this
+                // flow's own entry bounds it - a genuine loop must surface, not spin.
+                if (error === "login_required" && !matched.retried)
+                    return retrySignIn();
+                return redirect(withError(next, error), [settleState, clearSilent]);
             }
             const code = url.searchParams.get("code");
             if (!code) {
-                return redirect(`${next}${next.includes("?") ? "&" : "?"}connect_error=missing_code`, [clearState, clearSilent]);
+                return redirect(withError(next, "missing_code"), [settleState, clearSilent]);
             }
             const result = await client.identity.exchangeCode({
                 code,
@@ -1043,7 +1177,7 @@ export function createConnectHandler(options) {
             // Verified before the session is stored, not after - an unverifiable
             // token must never become a signed-in user.
             await client.identity.verifyIdToken(result.idToken);
-            const response = redirect(next, [clearState, clearSilent]);
+            const response = redirect(next, [settleState, clearSilent]);
             await session.write(request, response, result.sessionToken);
             return response;
         },

package/dist/types/client/components/shell-context.d.ts

@@ -25,22 +25,51 @@ export declare const RAIL_GUTTER = 12;
  * The row shape every sidebar control shares - nav items, the workspace tile,
  * the launcher, the user button.
  *
+ * **The height is not here.** It rides on `SIDEBAR_ROW_ICON` /
+ * `SIDEBAR_ROW_TILE` instead, because the two glyph sizes want different
+ * heights and only one of them is in the region that overflows - see those
+ * two constants.
+ *
  * `overflow-hidden` + `whitespace-nowrap` is what makes the collapse smooth:
  * the label is *clipped* by the shrinking rail rather than re-wrapped or
  * re-measured, so a width animation costs no reflow. Fading the label with
  * `SidebarLabel` on top of that hides the clip itself.
  */
-export declare const SIDEBAR_ROW = "group/row relative flex h-10 w-full shrink-0 items-center justify-start gap-3 overflow-hidden whitespace-nowrap rounded-lg pe-2 text-sm font-normal transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const SIDEBAR_ROW = "group/row relative flex w-full shrink-0 items-center justify-start gap-3 overflow-hidden whitespace-nowrap rounded-lg pe-2 text-sm font-normal transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
 /**
- * Leading inset for a row whose glyph is 20px wide (a nav icon, the launcher).
+ * Leading inset *and height* for a row whose glyph is 20px wide (a nav icon,
+ * the launcher, a secondary-nav row).
+ *
  * `10 + 10 = 20`, and `RAIL_GUTTER + 20 = 32`. See `RAIL_COLLAPSED`.
+ *
+ * **36px, not 40px, and the height belongs on this axis rather than on
+ * `SIDEBAR_ROW`.** The nav is the only region of the rail that grows with the
+ * host's route count, and `ConnectSidebarBody` is the only region that
+ * scrolls - so a rail that overflows overflows here. Ten destinations at 40px
+ * came to 436px of nav against 273px of fixed chrome (header, switcher, two
+ * footers), which needs a 709px viewport to sit still; a 1366x768 screen has
+ * about 678px of it. Four pixels a row is 48px back across the twelve rows a
+ * real integration draws, and 36px is still comfortably past the 24px
+ * WCAG 2.5.8 target minimum with the row's full width as the hit area.
+ *
+ * It is deliberately *not* a smaller glyph. The 20px box is a flex centring
+ * container for an icon the **host** supplies at its own size, so shrinking
+ * the box buys no vertical space and only pushes the icon off the 32px centre
+ * the collapsed rail is built on.
  */
-export declare const SIDEBAR_ROW_ICON = "ps-[10px]";
+export declare const SIDEBAR_ROW_ICON = "h-9 ps-[10px]";
 /**
- * Leading inset for a row whose glyph is 32px wide (the avatar, the workspace
- * tile). `4 + 16 = 20`, landing on the same 32px centre as `SIDEBAR_ROW_ICON`.
+ * Leading inset and height for a row whose glyph is 32px wide (the avatar, the
+ * workspace tile). `4 + 16 = 20`, landing on the same 32px centre as
+ * `SIDEBAR_ROW_ICON`.
+ *
+ * **These stay at 40px.** There are exactly two of them and neither scales
+ * with the host's nav, so they are not what overflows - and both need the
+ * height: a 32px tile in a 36px row has 2px of air, and the account row's
+ * label is two lines (name over email, `leading-tight`) which measures ~32px
+ * on its own.
  */
-export declare const SIDEBAR_ROW_TILE = "ps-[4px]";
+export declare const SIDEBAR_ROW_TILE = "h-10 ps-[4px]";
 /**
  * The class list for one sidebar row, in one place.
  *
@@ -57,7 +86,10 @@ export declare const SIDEBAR_ROW_TILE = "ps-[4px]";
  * lets a `w-fit`, centred, `px-`-padded button take this shape at all.
  */
 export declare function sidebarRowClass(options?: Readonly<{
-    /** The glyph is 32px (an avatar, a workspace tile) rather than 20px. */
+    /**
+     * The glyph is 32px (an avatar, a workspace tile) rather than 20px - which
+     * also makes the row 40px rather than 36px. See `SIDEBAR_ROW_TILE`.
+     */
     tile?: boolean;
     /** Paint the active treatment. */
     active?: boolean;

package/dist/types/client/components/sidebar.d.ts

@@ -73,13 +73,13 @@ export declare function ConnectSidebarFooter({ children, separated, }: Readonly<
     separated?: boolean;
 }>): import("react").JSX.Element;
 export type ConnectSidebarRowProps = Readonly<{
-    /** The glyph. 20px by default; 32px when `tile`. */
+    /** The glyph. 20px in a 36px row by default; 32px in a 40px row when `tile`. */
     icon: ReactNode;
     /** The row's text, and - when it is a string - its accessible name. */
     label: ReactNode;
     /** Overrides the accessible name. Required when `label` is not a string. */
     "aria-label"?: string;
-    /** The glyph is 32px (an avatar, a workspace tile) rather than 20px. */
+    /** The glyph is 32px (an avatar, a workspace tile) rather than 20px, in a 40px row. */
     tile?: boolean;
     /** Trailing content, e.g. a chevron. Clipped with the label while collapsed. */
     trailing?: ReactNode;

package/dist/types/client/components/subscription.d.ts

@@ -61,6 +61,12 @@ export declare function ConnectSubscriptionCard({ plansHref, className }: Connec
  * count against, so it renders nothing rather than a meter that is always
  * empty. Under `"per-seat"` going over is billable rather than blocked, so it
  * says what the extra costs instead of warning.
+ *
+ * `detail.seatCount` is a live count of the members holding a role for this
+ * application. It used to be the subscription's last-billed snapshot, which
+ * only ever moved on a `"per-seat"` plan - so a `"fixed"` single-seat plan
+ * read "0 of 1 seat used" permanently, including when its one seat was taken
+ * and Connect was already refusing the next assignment.
  */
 export declare function ConnectSeatUsage({ plan, detail, className, }: Readonly<{
     plan: SubscribedPlan;

package/dist/types/next/index.d.ts

@@ -9,6 +9,55 @@ import type { UserResponse } from "../types.js";
  * are frequently absent.
  */
 export declare function connectClient(overrides?: Partial<ConnectClientOptions>): ConnectClient;
+/**
+ * The `ConnectProvider` props that come from the environment.
+ *
+ * ```tsx
+ * // app/layout.tsx - a Server Component
+ * import { connectProviderProps } from "@cosmoops/connect-sdk/next";
+ * import { ConnectProvider } from "@cosmoops/connect-sdk/client";
+ *
+ * <ConnectProvider {...connectProviderProps()}>{children}</ConnectProvider>
+ * ```
+ *
+ * ## What it is for
+ *
+ * `CONNECT_APP_URL` points the *server* at a non-production Connect. It is not
+ * `NEXT_PUBLIC_`, so it never reaches the browser, and `ConnectProvider`
+ * defaults `appUrl` to the production origin independently - so pointing the
+ * server somewhere else and leaving the prop off splits the integration in
+ * half. The server talks to dev and every destination the browser builds opens
+ * production: the user menu's Profile and Billing rows, the app launcher's link
+ * for an unsubscribed application, `ConnectAccessGate`'s subscribe target, and
+ * checkout. Nothing errors. The customer is simply asked to buy a second
+ * subscription in an instance where they have none.
+ *
+ * Both apps built on this SDK shipped that bug before anyone noticed, from
+ * reading "the provider takes no props" as a rule rather than as a remark about
+ * `clientId`. A root layout is a Server Component, so one spread fixes it with
+ * no browser-visible copy of the variable.
+ *
+ * ## What it deliberately leaves out
+ *
+ * `clientId` and `basePath`. The first is only needed alongside an explicit
+ * `redirectUri`, when you build the authorize URL in the browser rather than
+ * letting `signIn()` bounce through your own `/signin` route - and handing the
+ * browser a value it does not need is surface for nothing. The second is where
+ * *you* mounted the handler, which the environment does not know. Pass either
+ * yourself; a prop you pass always wins over this spread, whichever order you
+ * write them in, as long as the spread comes first.
+ *
+ * ## If you already have an origin helper
+ *
+ * Use it instead. An app that builds its own links into Connect (a "Manage
+ * team" button, a pricing page's subscribe target) needs that origin on the
+ * server too, and one function owning the read is better than this helper
+ * beside it - two readers of one variable is the shape that caused this. This
+ * exists for the integration that has no such helper, which is most of them.
+ */
+export declare function connectProviderProps(): {
+    appUrl: string;
+};
 /**
  * An httpOnly cookie holding the opaque `sessionToken`.
  *

package/dist/types/server/client.d.ts

@@ -138,4 +138,4 @@ export declare class ConnectClient {
     constructor(options: ConnectClientOptions);
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export declare const SDK_VERSION = "0.34.0";
+export declare const SDK_VERSION = "0.35.0";

package/dist/types/types.d.ts

@@ -442,6 +442,14 @@ export interface SubscriptionDetail {
     id: string;
     status: SubscriptionStatus;
     cancelAtPeriodEnd: boolean;
+    /**
+     * How many workspace members currently hold a role for your application,
+     * counted when you read it. Compare it against `plan.seats.included`.
+     *
+     * `0` on an `"unlimited"` plan - there is no ceiling to count against, so
+     * Connect does not pay for the count. `ConnectSeatUsage` renders nothing in
+     * that case for the same reason.
+     */
     seatCount: number;
     addons: string[];
     currentBillingCycle: {
@@ -474,6 +482,13 @@ export interface ApplicationSubscriber {
     /** `null` if the plan was hard-deleted rather than archived. */
     planName: string | null;
     status: "created" | "authenticated" | "active" | "paused" | "cancelled";
+    /**
+     * The last-billed seat snapshot, not the live count `SubscriptionDetail`
+     * carries: a page of subscribers cannot afford one member scan per row. It
+     * is `0` unless the plan is `"per-seat"`, which is the only model that
+     * bills by seat. Read the single workspace's subscription for "who is
+     * assigned right now".
+     */
     seatCount: number;
     /** ISO 8601. */
     subscribedAt: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmoops/connect-sdk",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Official server-side SDK for the CosmoOps Connect platform API - Login with Connect, entitlements, billing and metering.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "commonjs",