@akinon/next 1.126.20-v1-rc.17 → 1.126.20

package/CHANGELOG.md

@@ -1,12 +1,16 @@
 # @akinon/next
 
-## 1.126.20-v1-rc.17
+## 1.126.20
 
 ### Patch Changes
 
-- d4809417: ZERO-4399: add card rewards to pz-masterpass-rest
-- a34bb1b: ZERO-5168: Post the attribute-based shipping selection to the page name Commerce reports
-- 182a639b: ZERO-4483: Verify v1-rc maintenance pipeline (no-op patch to confirm v1-rc dist-tag flow)
+- 55b89cb: ZERO-5206: Port the theme editor's app skeleton (chrome and page slots) to the v1 line
+
+  The `[pz]` layout now wraps the brand header and footer in `ChromeSlot` (the brand markup stays as the fallback) and mounts `ThemeModals`, so a designer can compose the header, the footer and modals from the theme editor. Basket, checkout (top/body/bottom outlets and the variants registry), auth, forgot and reset password, order success and the account area (menu, page body and the ten subpages) get the same slot layouts as 2.x, so the editor takes these pages over without any mounting in the brand. Account routes moved into route groups (`(dashboard)`, `orders/(list)`, `orders/[id]/(detail)`, `auth/(login)`); URLs are unchanged.
+
+  Inside the editor's cross-site preview iframe the storefront's cookies are now usable: when embedding is enabled (`NEXT_PUBLIC_THEME_EDITOR_ORIGINS` holds a valid origin, or outside production) the next-auth session, CSRF and callback cookies, the Django `csrftoken`, the commerce session cookies set at sign-in and the Set-Cookie headers relayed by the BFF and middlewares are sent as `SameSite=None; Secure`, and the BFF checks the request origin on every state-changing call. A storefront without the editor keeps the Lax defaults. The CSP `frame-ancestors` also lists the editor origins (`*.akinon.net`, `localhost:5174`).
+
+  The app depends on `@akinon/pz-theme` 2.0.143; `@akinon/pz-theme` and `@akinon/theme-contract` are transpiled and protected from plugin installs, and the Tailwind content globs include pz-theme's sources.
 
 ## 1.126.19
 

package/__tests__/editor-embed.test.ts

@@ -0,0 +1,76 @@
+import {
+  isEditorEmbedEnabled,
+  makeSetCookieEmbedAware
+} from '../utils/editor-embed';
+import { getCsrfCookieFlags } from '../utils/csrf';
+
+const env = process.env as Record<string, string | undefined>;
+const original = {
+  NODE_ENV: env.NODE_ENV,
+  NEXT_PUBLIC_THEME_EDITOR_ORIGINS: env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS
+};
+
+const setEnv = (nodeEnv: string, origins?: string) => {
+  env.NODE_ENV = nodeEnv;
+  if (origins === undefined) delete env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS;
+  else env.NEXT_PUBLIC_THEME_EDITOR_ORIGINS = origins;
+};
+
+afterEach(() => {
+  setEnv(original.NODE_ENV, original.NEXT_PUBLIC_THEME_EDITOR_ORIGINS);
+});
+
+describe('isEditorEmbedEnabled', () => {
+  it('is always on outside production', () => {
+    setEnv('development');
+    expect(isEditorEmbedEnabled()).toBe(true);
+  });
+
+  it('is off in production without editor origins', () => {
+    setEnv('production');
+    expect(isEditorEmbedEnabled()).toBe(false);
+  });
+
+  it('is on in production when an editor origin is declared', () => {
+    setEnv('production', 'https://editor.example.com, http://localhost:5174');
+    expect(isEditorEmbedEnabled()).toBe(true);
+  });
+
+  it('ignores entries that are not origins', () => {
+    setEnv('production', ' , not-a-url ,');
+    expect(isEditorEmbedEnabled()).toBe(false);
+  });
+});
+
+describe('makeSetCookieEmbedAware', () => {
+  it('passes the header through when embedding is off', () => {
+    setEnv('production');
+    const header = 'osessionid=abc; Path=/; HttpOnly; SameSite=Lax';
+    expect(makeSetCookieEmbedAware(header)).toBe(header);
+  });
+
+  it('replaces SameSite and adds Secure once when embedding is on', () => {
+    setEnv('production', 'https://editor.example.com');
+    expect(
+      makeSetCookieEmbedAware('osessionid=abc; Path=/; Secure; SameSite=Lax')
+    ).toBe('osessionid=abc; Path=/; Secure; SameSite=None');
+  });
+});
+
+describe('getCsrfCookieFlags', () => {
+  it('keeps the Lax default on a storefront without the editor', () => {
+    setEnv('production');
+    expect(getCsrfCookieFlags()).toMatchObject({
+      secure: true,
+      sameSite: 'lax'
+    });
+  });
+
+  it('switches to SameSite=None; Secure in embed mode', () => {
+    setEnv('production', 'https://editor.example.com');
+    expect(getCsrfCookieFlags()).toMatchObject({
+      secure: true,
+      sameSite: 'none'
+    });
+  });
+});

package/api/auth.ts

@@ -10,6 +10,7 @@ import { AuthError } from '../types';
 import getRootHostname from '../utils/get-root-hostname';
 import { LocaleUrlStrategy } from '../localization';
 import { getCsrfCookieFlags } from '../utils/csrf';
+import { isEditorEmbedEnabled } from '../utils/editor-embed';
 
 function getRequestRootHostname(headers: NextApiRequest['headers']) {
   if (Settings.localization.localeUrlStrategy !== LocaleUrlStrategy.Subdomain) {
@@ -24,11 +25,7 @@ function getRequestRootHostname(headers: NextApiRequest['headers']) {
 
 function buildCsrfCookieString(value: string, rootHostname: string | null) {
   const flags = getCsrfCookieFlags();
-  const parts = [
-    `csrftoken=${value}`,
-    'Path=/',
-    `SameSite=${flags.sameSite}`
-  ];
+  const parts = [`csrftoken=${value}`, 'Path=/', `SameSite=${flags.sameSite}`];
 
   if (flags.httpOnly) {
     parts.push('HttpOnly');
@@ -82,11 +79,48 @@ type CustomNextAuthOptions = (
   res: NextApiResponse
 ) => Partial<NextAuthOptions>;
 
+/**
+ * Cookie attributes that let the shopper sign in while the storefront runs
+ * inside the theme editor's preview iframe. next-auth defaults to
+ * SameSite=Lax, and in a cross-site iframe (editor origin vs storefront
+ * origin) the browser then drops the CSRF cookie, so every credentials POST
+ * fails 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.
+ *
+ * next-auth 4 takes an override only with its cookie name, so the names
+ * stay next-auth's own defaults: the middleware's `getToken()` still finds
+ * the session under the name it expects.
+ */
+const getEmbedAwareCookies = (): NextAuthOptions['cookies'] => {
+  if (!isEditorEmbedEnabled()) return undefined;
+
+  const secureNames = process.env.NEXTAUTH_URL?.startsWith('https://') ?? false;
+  const prefix = secureNames ? '__Secure-' : '';
+  const options = {
+    sameSite: 'none' as const,
+    secure: true,
+    path: '/',
+    httpOnly: true
+  };
+
+  return {
+    sessionToken: { name: `${prefix}next-auth.session-token`, options },
+    callbackUrl: { name: `${prefix}next-auth.callback-url`, options },
+    csrfToken: {
+      name: `${secureNames ? '__Host-' : ''}next-auth.csrf-token`,
+      options
+    }
+  };
+};
+
 const defaultNextAuthOptions = (
   req: NextApiRequest,
   res: NextApiResponse
 ): NextAuthOptions => {
   return {
+    cookies: getEmbedAwareCookies(),
     providers: [
       CredentialProvider({
         id: 'oauth',
@@ -212,7 +246,14 @@ const defaultNextAuthOptions = (
                 ? getRootHostname(hostname)
                 : null;
             const domainOption = rootHostname ? `Domain=${rootHostname};` : '';
-            const cookieOptions = `Path=/; HttpOnly; Secure; Max-Age=${maxAge}; ${domainOption}`;
+            // 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.
+            const sameSiteOption = isEditorEmbedEnabled()
+              ? ' SameSite=None;'
+              : '';
+            const cookieOptions = `Path=/; HttpOnly; Secure; Max-Age=${maxAge}; ${domainOption}${sameSiteOption}`;
 
             const setCookies = [
               `osessionid=${sessionId}; ${cookieOptions}`,

package/api/client.ts

@@ -8,6 +8,7 @@ import { cookies } from 'next/headers';
 import getRootHostname from '../utils/get-root-hostname';
 import { LocaleUrlStrategy } from '../localization';
 import { getCsrfCookieFlags, isCsrfHttpOnly } from '../utils/csrf';
+import { isEditorEmbedEnabled } from '../utils/editor-embed';
 
 interface RouteParams {
   params: {
@@ -160,7 +161,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,
@@ -172,9 +182,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;
+      }
     }
   }
 
@@ -292,6 +304,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));
   });
 }
 
@@ -172,7 +175,10 @@ const withOauthLogin =
   async (req: NextRequest, event: NextFetchEvent) => {
     const { pathname, search } = req.nextUrl;
 
-    if (!pathname.includes('/login') && !pathname.startsWith('/baskets/basket')) {
+    if (
+      !pathname.includes('/login') &&
+      !pathname.startsWith('/baskets/basket')
+    ) {
       return middleware(req, event);
     }
 

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,12 @@ 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": "1.126.20-v1-rc.17",
+  "version": "1.126.20",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -35,7 +35,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.126.20-v1-rc.17",
+    "@akinon/eslint-plugin-projectzero": "1.126.20",
     "@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,21 @@ 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: 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`;
+};

package/with-pz-config.js

@@ -58,7 +58,7 @@ const defaultConfig = {
           {
             key: 'Content-Security-Policy',
             value:
-              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com https://*.akinoncloudcdn.com akinoncloudcdn.com"
+              "frame-ancestors 'self' https://*.akifast.com akifast.com https://*.akinoncloud.com akinoncloud.com https://*.akinoncloudcdn.com akinoncloudcdn.com https://*.akinon.net *.akinon.net http://localhost:5174 localhost:5174"
           }
         ]
       }