@akinon/next 2.0.41-beta.0 → 2.0.41

package/CHANGELOG.md

@@ -1,10 +1,6 @@
 # @akinon/next
 
-## 2.0.41-beta.0
-
-### Patch Changes
-
-- cbbbfd75: ZERO-4376: Bootstrap beta cycle (next-main pre-release motor)
+## 2.0.41
 
 ## 2.0.40
 

package/api/auth.ts

@@ -10,6 +10,7 @@ import getRootHostname, {
   getRequestRootHostname
 } from '../utils/get-root-hostname';
 import { getCsrfCookieFlags } from '../utils/csrf';
+import { isEditorEmbedEnabled } from '../utils/editor-embed';
 import { LocaleUrlStrategy } from '../localization';
 import { cookies, headers } from 'next/headers';
 
@@ -88,8 +89,37 @@ function buildFieldErrors(response: any) {
 // v5 (App Router / next-auth v5) — named export for new brands
 // ============================================================
 
+/**
+ * Cookie attributes that let the shopper sign in while the storefront runs
+ * inside the theme editor's preview iframe. Auth.js defaults to
+ * SameSite=Lax, and in a cross-site iframe (editor origin vs storefront
+ * origin — or localhost vs 127.0.0.1 in local dev) the browser then drops
+ * the CSRF cookie, so every credentials POST fails with MissingCSRF before
+ * it reaches the provider. SameSite=None requires Secure; browsers accept
+ * Secure cookies from plain-http localhost, so local development is covered
+ * too. Scoped to editor-enabled deployments (and dev) — a storefront without
+ * the editor keeps the stricter Lax default.
+ */
+const getEmbedAwareCookies = () => {
+  if (!isEditorEmbedEnabled()) return undefined;
+
+  const options = {
+    sameSite: 'none' as const,
+    secure: true,
+    path: '/',
+    httpOnly: true
+  };
+
+  return {
+    sessionToken: { options },
+    callbackUrl: { options },
+    csrfToken: { options }
+  };
+};
+
 const getDefaultAuthConfig = () => {
   return {
+    cookies: getEmbedAwareCookies(),
     providers: [
       Credentials({
         id: 'oauth',
@@ -266,6 +296,11 @@ const getDefaultAuthConfig = () => {
               httpOnly: true,
               secure: true,
               maxAge,
+              // Without SameSite the browser defaults to Lax and drops the
+              // commerce session on every request from the theme editor's
+              // cross-site preview iframe — the shopper signs in and the
+              // next authenticated call 401s straight back to the login.
+              ...(isEditorEmbedEnabled() ? { sameSite: 'none' as const } : {}),
               ...(rootHostname ? { domain: rootHostname } : {})
             };
 

package/api/client.ts

@@ -10,6 +10,7 @@ import { LocaleUrlStrategy } from '../localization';
 import { fixtureManager, MockMode } from '../lib/fixture-manager';
 import { user } from '../data/urls';
 import { getCsrfCookieFlags, isCsrfHttpOnly } from '../utils/csrf';
+import { isEditorEmbedEnabled } from '../utils/editor-embed';
 
 const CSRF_TOKEN_SLUG = user.csrfToken.replace(/^\//, '');
 
@@ -168,7 +169,16 @@ async function proxyRequest(...args) {
   // browser can no longer mirror it into the `x-csrftoken` header, so the
   // proxy validates the request origin and injects the header server-side
   // from the cookie that the browser sent with this request.
-  if (isCsrfHttpOnly() && STATE_CHANGING_METHODS.includes(req.method)) {
+  //
+  // The origin check also runs whenever editor embedding is enabled: embed
+  // mode relaxes session cookies to SameSite=None, so the browser attaches
+  // them to cross-site requests and the Lax barrier this check replaces is
+  // gone. `isOriginAllowed` keeps accepting origin-less requests, so
+  // non-browser clients are unaffected.
+  if (
+    (isCsrfHttpOnly() || isEditorEmbedEnabled()) &&
+    STATE_CHANGING_METHODS.includes(req.method)
+  ) {
     if (!isOriginAllowed(req)) {
       logger.warn('Client Proxy Request - Blocked cross-origin request', {
         url: req.url,
@@ -180,9 +190,11 @@ async function proxyRequest(...args) {
       );
     }
 
-    const csrfToken = nextCookies.get('csrftoken')?.value;
-    if (csrfToken) {
-      fetchOptions.headers['x-csrftoken'] = csrfToken;
+    if (isCsrfHttpOnly()) {
+      const csrfToken = nextCookies.get('csrftoken')?.value;
+      if (csrfToken) {
+        fetchOptions.headers['x-csrftoken'] = csrfToken;
+      }
     }
   }
 
@@ -335,6 +347,16 @@ async function proxyRequest(...args) {
               cookie.sameSite = flags.sameSite;
             }
           }
+          // Commerce sends its session cookies without SameSite; forwarded
+          // as-is the browser defaults them to Lax and drops them inside
+          // the theme editor's cross-site preview iframe, killing the
+          // session right after login. Editor-enabled deployments relax
+          // every forwarded cookie the same way the auth cookies already
+          // are.
+          if (isEditorEmbedEnabled()) {
+            cookie.sameSite = 'none';
+            cookie.secure = true;
+          }
           return formatCookieString(cookie);
         })
         .join(', ');

package/middlewares/oauth-login.ts

@@ -7,6 +7,7 @@ import {
 import Settings from 'settings';
 import { getUrlPathWithLocale } from '../utils/localization';
 import logger from '../utils/log';
+import { makeSetCookieEmbedAware } from '../utils/editor-embed';
 
 const LOGIN_URL_REGEX = /^\/(\w+)\/login\/?$/;
 const CALLBACK_URL_REGEX = /^\/(\w+)\/login\/callback\/?$/;
@@ -58,7 +59,9 @@ function fetchCommerce(
 
 function forwardCookies(from: Response, to: NextResponse): void {
   from.headers.getSetCookie().forEach((cookie) => {
-    to.headers.append('set-cookie', cookie);
+    // Relayed verbatim these would default to Lax and be rejected inside
+    // the editor's cross-site preview iframe.
+    to.headers.append('set-cookie', makeSetCookieEmbedAware(cookie));
   });
 }
 

package/middlewares/url-redirection.ts

@@ -5,6 +5,7 @@ import logger from '../utils/log';
 import { urlLocaleMatcherRegex } from '../utils';
 import { getUrlPathWithLocale } from '../utils/localization';
 import { shouldIgnoreRedirect } from '../utils/redirect-ignore';
+import { makeSetCookieEmbedAware } from '../utils/editor-embed';
 import { ROUTES } from 'routes';
 
 // This middleware is used to handle url redirections set in Omnitron
@@ -76,7 +77,9 @@ const withUrlRedirection =
 
         if (setCookies && setCookies.length > 0) {
           for (const cookie of setCookies) {
-            response.headers.append('Set-Cookie', cookie);
+            // Relayed verbatim these would default to Lax and be rejected
+            // inside the editor's cross-site preview iframe.
+            response.headers.append('Set-Cookie', makeSetCookieEmbedAware(cookie));
           }
         }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "2.0.41-beta.0",
+  "version": "2.0.41",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -36,7 +36,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.41-beta.0",
+    "@akinon/eslint-plugin-projectzero": "2.0.41",
     "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.27.0",

package/utils/csrf.ts

@@ -1,5 +1,7 @@
 import settings from 'settings';
 
+import { isEditorEmbedEnabled } from './editor-embed';
+
 /**
  * Whether the Django `csrftoken` cookie should be hardened with the
  * `HttpOnly` flag.
@@ -16,7 +18,7 @@ export function isCsrfHttpOnly(): boolean {
 export interface CsrfCookieFlags {
   httpOnly: boolean;
   secure: boolean;
-  sameSite: 'lax';
+  sameSite: 'lax' | 'none';
 }
 
 /**
@@ -26,9 +28,22 @@ export interface CsrfCookieFlags {
  * `SameSite=Lax` is the Next.js-layer CSRF defense: the browser will not
  * attach the cookie on cross-site state-changing requests, so the proxy's
  * server-side header injection cannot be abused from a third-party origin.
+ *
+ * Inside the theme editor's preview iframe the storefront itself is the
+ * cross-site party, and a Lax cookie is never sent — the shopper signs in
+ * and the next state-changing call fails. Editor-enabled deployments
+ * therefore switch to `None` + `Secure`. What replaces the Lax barrier
+ * there: the BFF's origin check runs for every state-changing request in
+ * embed mode (see api/client.ts), and the commerce backend's `x-csrftoken`
+ * double-submit stays on either way.
  */
 export function getCsrfCookieFlags(): CsrfCookieFlags {
   const httpOnly = isCsrfHttpOnly();
+
+  if (isEditorEmbedEnabled()) {
+    return { httpOnly, secure: true, sameSite: 'none' };
+  }
+
   return {
     httpOnly,
     secure: httpOnly && process.env.NODE_ENV === 'production',

package/utils/editor-embed.ts

@@ -0,0 +1,50 @@
+/**
+ * Whether this storefront can run inside the theme editor's preview iframe.
+ * Editor-enabled deployments declare the editor origins; local development
+ * is always embeddable.
+ *
+ * Cookie attributes hang off this: the preview iframe is cross-site from
+ * the editor's (or Omnitron's) top-level page, and a browser only sends
+ * `SameSite=None; Secure` cookies there — every session-bearing cookie has
+ * to switch when embedding is on, or the shopper signs in and the very next
+ * commerce call comes back 401.
+ */
+const hasValidEditorOrigin = (raw: string | undefined): boolean => {
+  if (!raw) return false;
+
+  // Embed mode relaxes the whole storefront's cookie posture, so a stray
+  // character or leftover whitespace in the env var must not flip it — only
+  // entries that parse as real origins count.
+  return raw
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .some((entry) => {
+      try {
+        return Boolean(new URL(entry).origin);
+      } catch {
+        return false;
+      }
+    });
+};
+
+export const isEditorEmbedEnabled = (): boolean =>
+  hasValidEditorOrigin(process.env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS) ||
+  process.env.NODE_ENV !== 'production';
+
+/**
+ * Rewrites a raw Set-Cookie header so it survives the editor's cross-site
+ * preview iframe: `SameSite=None` requires `Secure`, and any prior SameSite
+ * value must be replaced rather than doubled. Outside embed mode the header
+ * passes through untouched. Use wherever commerce Set-Cookies are relayed
+ * verbatim (middlewares) — the BFF proxy applies the same rewrite itself.
+ */
+export const makeSetCookieEmbedAware = (setCookie: string): string => {
+  if (!isEditorEmbedEnabled()) return setCookie;
+
+  const withoutAttrs = setCookie
+    .replace(/;\s*samesite=[^;]*/gi, '')
+    .replace(/;\s*secure(?=;|\s*$)/gi, '');
+
+  return `${withoutAttrs}; Secure; SameSite=None`;
+};