@decocms/apps-vtex 7.2.0

package/src/utils/accountLoaders.ts

@@ -0,0 +1,203 @@
+/**
+ * Pre-built section loaders for VTEX account pages.
+ *
+ * Every VTEX site with account pages repeats the same pattern:
+ * 1. Extract VTEX cookies from request
+ * 2. Call the VTEX user/profile/address/payment API
+ * 3. Return enriched props with { device, logged, ...data }
+ * 4. Catch errors gracefully (return logged: false)
+ *
+ * These factories encapsulate that boilerplate.
+ *
+ * @example
+ * ```ts
+ * import { vtexAccountLoaders } from "@decocms/apps/vtex/utils/accountLoaders";
+ *
+ * registerSectionLoaders({
+ *   "site/sections/Account/PersonalData.tsx": vtexAccountLoaders.personalData(),
+ *   "site/sections/Account/MyOrders.tsx":     vtexAccountLoaders.orders(),
+ *   "site/sections/Account/Cards.tsx":        vtexAccountLoaders.cards(),
+ *   "site/sections/Account/Addresses.tsx":    vtexAccountLoaders.addresses(),
+ *   "site/sections/Account/Auth.tsx":         vtexAccountLoaders.authentication(),
+ *   "site/sections/Account/Other.tsx":        vtexAccountLoaders.loggedIn(),
+ * });
+ * ```
+ */
+
+import { detectDevice } from "@decocms/blocks/sdk/useDevice";
+import { getUserAddresses, type VtexAddress } from "../loaders/address";
+import { getUserPayments, type Payment } from "../loaders/payment";
+import { getCurrentProfile, type Profile } from "../loaders/profile";
+import { getUser } from "../loaders/user";
+import { getVtexCookies } from "./cookies";
+
+type Device = "mobile" | "tablet" | "desktop";
+
+type SectionLoaderFn = (
+	props: Record<string, unknown>,
+	req: Request,
+) => Promise<Record<string, unknown>> | Record<string, unknown>;
+
+function getDevice(req: Request): Device {
+	return detectDevice(req.headers.get("user-agent") ?? "");
+}
+
+// ---------------------------------------------------------------------------
+// personalData — fetches full VTEX profile for personal data sections
+// ---------------------------------------------------------------------------
+
+export interface PersonalDataOptions {
+	/** Extra custom profile fields to request beyond the standard set. */
+	extraProfileFields?: string[];
+
+	/**
+	 * Transform the raw VTEX Profile into the shape your component expects.
+	 * When omitted, the raw Profile object is returned as `profile`.
+	 *
+	 * @example
+	 * ```ts
+	 * vtexAccountLoaders.personalData({
+	 *   mapProfile: (p) => ({
+	 *     "@id": p.userId ?? p.id,
+	 *     email: p.email,
+	 *     givenName: p.firstName ?? null,
+	 *     familyName: p.lastName ?? null,
+	 *     taxID: p.document,
+	 *   }),
+	 * })
+	 * ```
+	 */
+	mapProfile?: (profile: Profile) => Record<string, unknown>;
+}
+
+function personalData(options?: PersonalDataOptions): SectionLoaderFn {
+	const { extraProfileFields, mapProfile } = options ?? {};
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const profile = await getCurrentProfile(cookie, extraProfileFields);
+			const data = mapProfile ? mapProfile(profile) : profile;
+			return {
+				...props,
+				device: getDevice(req),
+				logged: !!profile,
+				loading: false,
+				userData: data,
+			};
+		} catch (error) {
+			console.error("[accountLoaders.personalData]", error);
+			return { ...props, device: getDevice(req), logged: false, loading: false, userData: null };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// orders — checks login status for order listing sections
+// ---------------------------------------------------------------------------
+
+function orders(): SectionLoaderFn {
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const userData = await getUser(cookie);
+			return { ...props, device: getDevice(req), logged: !!userData };
+		} catch {
+			return { ...props, device: getDevice(req), logged: false };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// cards — fetches saved payment tokens for card management sections
+// ---------------------------------------------------------------------------
+
+function cards(): SectionLoaderFn {
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const user = await getUser(cookie);
+			const logged = !!user;
+			let payments: Payment[] = [];
+			if (logged) {
+				try {
+					payments = (await getUserPayments(cookie)) ?? [];
+				} catch {
+					payments = [];
+				}
+			}
+			return { ...props, logged, payments };
+		} catch {
+			return { ...props, logged: false, payments: [] };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// addresses — fetches address list for address management sections
+// ---------------------------------------------------------------------------
+
+function addresses(): SectionLoaderFn {
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const userData = await getUser(cookie);
+			const logged = !!userData;
+			let userAddressData: VtexAddress[] | null = null;
+			if (logged) {
+				try {
+					userAddressData = await getUserAddresses(cookie);
+				} catch {
+					userAddressData = null;
+				}
+			}
+			return { ...props, device: getDevice(req), logged, userAddressData };
+		} catch {
+			return { ...props, device: getDevice(req), logged: false, userAddressData: null };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// authentication — checks login + returns user data for auth pages
+// ---------------------------------------------------------------------------
+
+function authentication(): SectionLoaderFn {
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const userData = await getUser(cookie);
+			return { ...props, device: getDevice(req), logged: !!userData, userData };
+		} catch {
+			return { ...props, device: getDevice(req), logged: false, userData: null };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// loggedIn — generic "is the user logged in?" loader
+// ---------------------------------------------------------------------------
+
+function loggedIn(): SectionLoaderFn {
+	return async (props, req) => {
+		const cookie = getVtexCookies(req);
+		try {
+			const userData = await getUser(cookie);
+			return { ...props, device: getDevice(req), logged: !!userData };
+		} catch {
+			return { ...props, device: getDevice(req), logged: false };
+		}
+	};
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export const vtexAccountLoaders = {
+	personalData,
+	orders,
+	cards,
+	addresses,
+	authentication,
+	loggedIn,
+} as const;

package/src/utils/authHelpers.ts

@@ -0,0 +1,85 @@
+/**
+ * VTEX auth helpers — pure functions for cookie extraction, JWT parsing,
+ * Set-Cookie forwarding, and logout.
+ *
+ * These are consumed by site-level createServerFn wrappers in invoke.ts.
+ * createServerFn itself must live in site source (not node_modules) because
+ * TanStack Start's Vite plugin only transforms source files.
+ */
+import { getVtexConfig, getVtexFetch } from "../client";
+import { extractVtexCookies } from "./cookieSanitizer";
+
+const DOMAIN_RE = /;\s*domain=[^;]*/gi;
+
+/**
+ * Extract VTEX-relevant cookies from a raw Cookie header string.
+ *
+ * Strict allowlist: drops any cookie not on `VTEX_COOKIE_PREFIXES`, plus
+ * any cookie whose value contains non-ASCII bytes (which would otherwise
+ * make VTEX's janus gateway return 503 Service Unavailable). Both filters
+ * live in `./cookieSanitizer` — this is a thin compatibility wrapper.
+ */
+export function extractVtexCookiesFromHeader(raw: string): string {
+	return extractVtexCookies(raw);
+}
+
+/**
+ * Strip Domain= from Set-Cookie headers so cookies are associated
+ * with the storefront domain instead of the VTEX domain.
+ */
+export function stripCookieDomain(cookies: string[]): string[] {
+	return cookies.map((c) => c.replace(DOMAIN_RE, ""));
+}
+
+/** Standard VTEX cookies to expire on logout. */
+export const VTEX_LOGOUT_COOKIES = [
+	"checkout.vtex.com=; Path=/; Max-Age=0; Secure; HttpOnly; SameSite=Lax",
+	"CheckoutOrderFormOwnership=; Path=/; Max-Age=0; Secure; HttpOnly; SameSite=Lax",
+	"checkout.vtex.com__orderFormId=; Path=/; Max-Age=0",
+	"vtex_session=; Path=/; Max-Age=0",
+	"vtex_segment=; Path=/; Max-Age=0",
+];
+
+/**
+ * Perform VTEX logout — calls the VTEX ID logout endpoint and returns
+ * the Set-Cookie headers (with domain stripped) to expire auth cookies.
+ */
+export async function performVtexLogout(cookies: string): Promise<{ setCookies: string[] }> {
+	const config = getVtexConfig();
+	const domain = config.domain ?? "com.br";
+	const logoutUrl = `https://${config.account}.vtexcommercestable.${domain}/api/vtexid/pub/logout?scope=${config.account}&returnUrl=/`;
+
+	const res = await getVtexFetch()(logoutUrl, {
+		method: "GET",
+		headers: { cookie: cookies },
+		redirect: "manual",
+		operation: "vtexid.logout",
+	});
+
+	const upstreamCookies = res.headers.getSetCookie?.() ?? [];
+
+	return {
+		setCookies: [...stripCookieDomain(upstreamCookies), ...VTEX_LOGOUT_COOKIES],
+	};
+}
+
+/**
+ * Parse VTEX auth JWT to extract email and userId.
+ * Reads the VtexIdclientAutCookie_* cookie from a raw Cookie header.
+ */
+export function parseVtexAuthJwt(rawCookies: string): { email: string; userId: string } | null {
+	try {
+		const match = rawCookies.match(/VtexIdclientAutCookie_[^=]+=([^;]+)/);
+		if (!match) return null;
+		const token = match[1];
+		const parts = token.split(".");
+		if (parts.length < 2) return null;
+		const payload = JSON.parse(
+			Buffer.from(parts[1].replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf-8"),
+		);
+		if (!payload.sub) return null;
+		return { email: payload.sub, userId: payload.userId ?? "" };
+	} catch {
+		return null;
+	}
+}

package/src/utils/batch.ts

@@ -0,0 +1,18 @@
+export const batch = <T>(iterable: IterableIterator<T> | T[], size: number): T[][] => {
+	const batches: T[][] = [];
+
+	let current = 0;
+	for (const item of iterable) {
+		if (batches[current]?.length === size) {
+			current++;
+		}
+
+		if (!batches[current]) {
+			batches[current] = [];
+		}
+
+		batches[current].push(item);
+	}
+
+	return batches;
+};

package/src/utils/cookieSanitizer.ts

@@ -0,0 +1,173 @@
+/**
+ * Outbound cookie sanitization for VTEX API calls.
+ *
+ * VTEX's janus gateway strictly enforces RFC 6265: any cookie value containing
+ * non-ASCII bytes causes the gateway to return `503 Service Unavailable` with
+ * an empty body, before the request reaches the backing service. This is
+ * deterministic — a single poisoned cookie (e.g. an analytics tag writing a
+ * category name with accents into `document.cookie` without encoding) can
+ * break every checkout call for a user.
+ *
+ * This module provides two filters:
+ *
+ * - `sanitizeOutboundCookieHeader()` — drops cookies whose value contains
+ *   non-ASCII bytes or that look malformed. Default for cookie forwarding
+ *   in `vtexFetchWithCookies`. Safe to apply to any cookie payload.
+ *
+ * - `extractVtexCookies()` — allowlist mode. Drops anything that isn't on
+ *   `VTEX_COOKIE_PREFIXES`. Use when calling endpoints that have no business
+ *   seeing the user's full cookie soup (e.g. logout, masterdata, profile).
+ *
+ * The allowlist is the canonical list of cookie name prefixes that VTEX APIs
+ * actually consume. It lives here so it's the single source of truth for the
+ * package — both `getVtexCookies()` (cookies.ts) and
+ * `extractVtexCookiesFromHeader()` (authHelpers.ts) delegate to this module.
+ */
+
+/**
+ * Cookie name prefixes that are VTEX-relevant and safe to forward to
+ * `*.vtexcommercestable.com.br` / `*.myvtex.com` / `secure.<storefront>` APIs.
+ */
+export const VTEX_COOKIE_PREFIXES: readonly string[] = [
+	"VtexIdclientAutCookie",
+	"checkout.vtex.com",
+	"CheckoutOrderFormOwnership",
+	"vtex_session",
+	"vtex_segment",
+	"vtex_is_",
+	"janus_sid",
+];
+
+export type DropReason = "non_ascii" | "not_in_allowlist" | "malformed";
+
+export interface DroppedCookie {
+	name: string;
+	reason: DropReason;
+}
+
+export interface CookieSanitizeResult {
+	/** Cookie header string ready to forward (may be empty). */
+	cookies: string;
+	/** Cookies that were filtered out, with the reason per cookie. */
+	dropped: DroppedCookie[];
+}
+
+export interface CookieSanitizeOptions {
+	/**
+	 * When true, additionally enforces an allowlist: only cookies whose name
+	 * starts with one of `VTEX_COOKIE_PREFIXES` are kept.
+	 * @default false
+	 */
+	allowlist?: boolean;
+}
+
+/**
+ * Cookie pairs are `name=value`, where `name` (token) must be visible ASCII
+ * with no separators, and `value` must be ASCII (`0x20–0x7E`) per RFC 6265.
+ * We intentionally allow `=` inside the value (some VTEX cookies are
+ * URL-encoded JWTs).
+ */
+const TOKEN_RE = /^[!#$%&'*+\-.0-9A-Z^_`a-z|~]+$/;
+const ASCII_VALUE_RE = /^[\x20-\x7E]*$/;
+
+/**
+ * Filter a `Cookie:` request header so it's safe to forward to a VTEX origin.
+ *
+ * Drops:
+ *   - pairs without `=` (malformed)
+ *   - pairs whose name isn't a valid HTTP token (malformed)
+ *   - pairs whose value contains non-ASCII bytes (`non_ascii`)
+ *   - when `opts.allowlist` is true: pairs not on `VTEX_COOKIE_PREFIXES`
+ *     (`not_in_allowlist`)
+ *
+ * Returns the cleaned header plus a per-cookie drop report so callers can
+ * log/observe which cookies were removed.
+ *
+ * @example
+ * ```ts
+ * const { cookies, dropped } = sanitizeOutboundCookieHeader(
+ *   request.headers.get("cookie") ?? "",
+ * );
+ * if (dropped.length) console.warn("[vtex] dropped cookies", dropped);
+ * fetch(vtexUrl, { headers: { cookie: cookies } });
+ * ```
+ */
+export function sanitizeOutboundCookieHeader(
+	raw: string,
+	opts: CookieSanitizeOptions = {},
+): CookieSanitizeResult {
+	if (!raw) return { cookies: "", dropped: [] };
+
+	const kept: string[] = [];
+	const dropped: DroppedCookie[] = [];
+	const allowlist = opts.allowlist === true;
+
+	for (const segment of raw.split(";")) {
+		const pair = segment.trim();
+		if (!pair) continue;
+
+		const eq = pair.indexOf("=");
+		if (eq <= 0) {
+			dropped.push({ name: pair.slice(0, 32), reason: "malformed" });
+			continue;
+		}
+
+		const name = pair.slice(0, eq);
+		const value = pair.slice(eq + 1);
+
+		if (!TOKEN_RE.test(name)) {
+			dropped.push({ name, reason: "malformed" });
+			continue;
+		}
+
+		if (!ASCII_VALUE_RE.test(value)) {
+			dropped.push({ name, reason: "non_ascii" });
+			continue;
+		}
+
+		if (allowlist && !VTEX_COOKIE_PREFIXES.some((p) => name.startsWith(p))) {
+			dropped.push({ name, reason: "not_in_allowlist" });
+			continue;
+		}
+
+		kept.push(`${name}=${value}`);
+	}
+
+	return { cookies: kept.join("; "), dropped };
+}
+
+/**
+ * Allowlist convenience wrapper — keep only VTEX-prefixed, ASCII-clean cookies.
+ *
+ * Equivalent to `sanitizeOutboundCookieHeader(raw, { allowlist: true }).cookies`.
+ */
+export function extractVtexCookies(raw: string): string {
+	return sanitizeOutboundCookieHeader(raw, { allowlist: true }).cookies;
+}
+
+/**
+ * Track which cookie names we've already warned about to avoid spamming
+ * the worker logs. Process-scoped — Cloudflare Workers reset this on each
+ * isolate restart, which is exactly the cadence we want.
+ */
+const _warned = new Set<string>();
+
+/**
+ * Emit a structured `console.warn` for each dropped cookie, deduped by
+ * `name+reason` for the lifetime of the worker isolate. Call sites pass an
+ * arbitrary `host` label so we can correlate in logs.
+ */
+export function warnDroppedCookies(dropped: DroppedCookie[], host: string): void {
+	if (dropped.length === 0) return;
+	for (const d of dropped) {
+		const key = `${host}::${d.name}::${d.reason}`;
+		if (_warned.has(key)) continue;
+		_warned.add(key);
+		console.warn(`[vtex.cookie.dropped] host=${host} name=${d.name} reason=${d.reason}`);
+	}
+}
+
+/** Reset the dedup set — exposed for tests. */
+export function _resetCookieWarnDedupForTests(): void {
+	_warned.clear();
+}

package/src/utils/cookies.ts

@@ -0,0 +1,167 @@
+interface Cookie {
+	name: string;
+	value: string;
+	domain?: string;
+	path?: string;
+	expires?: Date;
+	maxAge?: number;
+	secure?: boolean;
+	httpOnly?: boolean;
+	sameSite?: "Strict" | "Lax" | "None";
+}
+
+function parseSingleSetCookie(raw: string): Cookie | null {
+	const parts = raw.split(";").map((p) => p.trim());
+	const [nameValue, ...attrs] = parts;
+	const eqIdx = nameValue.indexOf("=");
+	if (eqIdx < 0) return null;
+	const cookie: Cookie = {
+		name: nameValue.slice(0, eqIdx),
+		value: nameValue.slice(eqIdx + 1),
+	};
+	for (const attr of attrs) {
+		const eqi = attr.indexOf("=");
+		const k = (eqi >= 0 ? attr.slice(0, eqi) : attr).trim();
+		const v = eqi >= 0 ? attr.slice(eqi + 1).trim() : "";
+		const lower = k.toLowerCase();
+		if (lower === "domain") cookie.domain = v;
+		else if (lower === "path") cookie.path = v;
+		else if (lower === "secure") cookie.secure = true;
+		else if (lower === "httponly") cookie.httpOnly = true;
+		else if (lower === "samesite") cookie.sameSite = v as Cookie["sameSite"];
+		else if (lower === "max-age") {
+			const n = Number(v);
+			if (!Number.isNaN(n)) cookie.maxAge = n;
+		} else if (lower === "expires") {
+			const d = new Date(v);
+			if (!Number.isNaN(d.getTime())) cookie.expires = d;
+		}
+	}
+	return cookie;
+}
+
+/**
+ * Extract individual Set-Cookie values from a Headers object.
+ *
+ * Uses Headers.getSetCookie() (available in Cloudflare Workers and Node 18+)
+ * which returns each Set-Cookie as a separate string — unlike Headers.get()
+ * or Headers.forEach() which join multiple values with ", " and corrupt
+ * cookie strings that contain commas in Expires dates.
+ */
+function getSetCookies(headers: Headers): Cookie[] {
+	const rawCookies: string[] =
+		typeof headers.getSetCookie === "function"
+			? headers.getSetCookie()
+			: getRawSetCookiesFallback(headers);
+
+	const cookies: Cookie[] = [];
+	for (const raw of rawCookies) {
+		const cookie = parseSingleSetCookie(raw);
+		if (cookie) cookies.push(cookie);
+	}
+	return cookies;
+}
+
+/**
+ * Fallback for runtimes without Headers.getSetCookie().
+ * Splits the comma-joined string heuristically — not perfect for cookies
+ * with Expires containing commas, but better than the old approach.
+ */
+function getRawSetCookiesFallback(headers: Headers): string[] {
+	const joined = headers.get("set-cookie");
+	if (!joined) return [];
+	const results: string[] = [];
+	let current = "";
+	for (const segment of joined.split(",")) {
+		const trimmed = segment.trimStart();
+		const looksLikeNewCookie = /^[^=;]+=[^;]/.test(trimmed) && current.length > 0;
+		if (looksLikeNewCookie) {
+			results.push(current.trim());
+			current = trimmed;
+		} else {
+			current += (current ? "," : "") + segment;
+		}
+	}
+	if (current.trim()) results.push(current.trim());
+	return results;
+}
+
+function setCookie(headers: Headers, cookie: Cookie): void {
+	let str = `${cookie.name}=${cookie.value}`;
+	if (cookie.domain) str += `; Domain=${cookie.domain}`;
+	if (cookie.path) str += `; Path=${cookie.path}`;
+	if (cookie.secure) str += "; Secure";
+	if (cookie.httpOnly) str += "; HttpOnly";
+	if (cookie.sameSite) str += `; SameSite=${cookie.sameSite}`;
+	if (cookie.maxAge != null) str += `; Max-Age=${cookie.maxAge}`;
+	if (cookie.expires) str += `; Expires=${cookie.expires.toUTCString()}`;
+	headers.append("Set-Cookie", str);
+}
+
+export const stringify = (cookies: Record<string, string>) =>
+	Object.entries(cookies)
+		.map(([key, value]) => `${key}=${value}`)
+		.join("; ");
+
+export const proxySetCookie = (from: Headers, to: Headers, toDomain?: URL | string) => {
+	const newDomain = toDomain && new URL(toDomain);
+
+	for (const cookie of getSetCookies(from)) {
+		const newCookie = newDomain
+			? {
+					...cookie,
+					domain: newDomain.hostname,
+				}
+			: cookie;
+
+		setCookie(to, newCookie);
+	}
+};
+
+export const CHECKOUT_DATA_ACCESS_COOKIE = "CheckoutDataAccess";
+export const VTEX_CHKO_AUTH = "Vtex_CHKO_Auth";
+
+// Re-export the canonical allowlist from cookieSanitizer so consumers that
+// previously imported it from this module keep working. The single source
+// of truth lives in cookieSanitizer.ts.
+export { VTEX_COOKIE_PREFIXES } from "./cookieSanitizer";
+
+import { extractVtexCookies } from "./cookieSanitizer";
+
+/**
+ * Filter a request's cookies to only VTEX-relevant ones.
+ *
+ * Strict allowlist: drops any cookie not on `VTEX_COOKIE_PREFIXES` plus any
+ * cookie whose value contains non-ASCII bytes (which would make VTEX's
+ * janus gateway return 503).
+ */
+export function getVtexCookies(request: Request): string {
+	return extractVtexCookies(request.headers.get("cookie") ?? "");
+}
+
+/**
+ * Ensure the unsuffixed VtexIdclientAutCookie is present alongside the
+ * account-suffixed variant (e.g. VtexIdclientAutCookie_myaccount).
+ *
+ * VTEX GraphQL requires both the suffixed AND unsuffixed cookie for
+ * authenticated mutations. The browser only stores the suffixed variant,
+ * so server-side code must synthesize the unsuffixed one.
+ */
+export function ensureUnsuffixedAuthCookie(cookieStr: string): string {
+	if (!cookieStr) return cookieStr;
+	const cookies = cookieStr.split(";").map((c) => c.trim());
+	let hasUnsuffixed = false;
+	let suffixedToken: string | null = null;
+	for (const c of cookies) {
+		const [name, ...rest] = c.split("=");
+		if (name === "VtexIdclientAutCookie") {
+			hasUnsuffixed = true;
+		} else if (name?.startsWith("VtexIdclientAutCookie_") && !suffixedToken) {
+			suffixedToken = rest.join("=");
+		}
+	}
+	if (!hasUnsuffixed && suffixedToken) {
+		return `VtexIdclientAutCookie=${suffixedToken}; ${cookieStr}`;
+	}
+	return cookieStr;
+}