@sitecore-jss/sitecore-jss-nextjs 21.6.0-canary.1 → 21.6.0-canary.11

package/dist/cjs/editing/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL = exports.QUERY_PARAM_PROTECTION_BYPASS_SITECORE = exports.QUERY_PARAM_EDITING_SECRET = void 0;
+exports.QUERY_PARAM_EDITING_SECRET = 'secret';
+exports.QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
+exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';

package/dist/cjs/editing/editing-data-middleware.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditingDataMiddleware = void 0;
 const editing_data_cache_1 = require("./editing-data-cache");
 const editing_data_1 = require("./editing-data");
-const editing_data_service_1 = require("./editing-data-service");
+const constants_1 = require("./constants");
 const utils_1 = require("../utils/utils");
 /**
  * Middleware / handler for use in the editing data Next.js API dynamic route (e.g. '/api/editing/data/[key]')
@@ -26,7 +26,7 @@ class EditingDataMiddleware {
         var _a, _b;
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             const { method, query, body } = req;
-            const secret = query[editing_data_service_1.QUERY_PARAM_EDITING_SECRET];
+            const secret = query[constants_1.QUERY_PARAM_EDITING_SECRET];
             const key = query[this.queryParamKey];
             // Validate secret
             if (secret !== (0, utils_1.getJssEditingSecret)()) {

package/dist/cjs/editing/editing-data-service.js

@@ -9,11 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.generateKey = exports.QUERY_PARAM_EDITING_SECRET = void 0;
+exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.generateKey = void 0;
+const constants_1 = require("./constants");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const editing_data_cache_1 = require("./editing-data-cache");
 const utils_1 = require("../utils/utils");
-exports.QUERY_PARAM_EDITING_SECRET = 'secret';
 /**
  * Unique key generator.
  * Need more than just the item GUID since requests are made "live" during editing in EE.
@@ -98,13 +98,14 @@ class ServerlessEditingDataService {
      * @param {string} serverUrl The server url to use for subsequent data API requests
      * @returns {Promise} The {@link EditingPreviewData} containing the generated key and serverUrl to use for retrieval
      */
-    setEditingData(data, serverUrl) {
+    setEditingData(data, serverUrl, params) {
         return __awaiter(this, void 0, void 0, function* () {
             const key = this.generateKey(data);
-            const url = this.getUrl(serverUrl, key);
+            const url = this.getUrl(serverUrl, key, params);
             const previewData = {
                 key,
                 serverUrl,
+                params,
             };
             sitecore_jss_1.debug.editing('storing editing data for %o: %o', previewData, data);
             return this.dataFetcher.put(url, data).then(() => {
@@ -123,20 +124,27 @@ class ServerlessEditingDataService {
             if (!(editingPreviewData === null || editingPreviewData === void 0 ? void 0 : editingPreviewData.serverUrl)) {
                 return undefined;
             }
-            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key);
+            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key, editingPreviewData.params);
             sitecore_jss_1.debug.editing('retrieving editing data for %o', previewData);
             return this.dataFetcher.get(url).then((response) => {
                 return response.data;
             });
         });
     }
-    getUrl(serverUrl, key) {
+    getUrl(serverUrl, key, params) {
         var _a;
         // Example URL format:
         //  http://localhost:3000/api/editing/data/52961eea-bafd-5287-a532-a72e36bd8a36-qkb4e3fv5x?secret=1234secret
         const apiRoute = (_a = this.apiRoute) === null || _a === void 0 ? void 0 : _a.replace('[key]', key);
         const url = new URL(apiRoute, serverUrl);
-        url.searchParams.append(exports.QUERY_PARAM_EDITING_SECRET, (0, utils_1.getJssEditingSecret)());
+        url.searchParams.append(constants_1.QUERY_PARAM_EDITING_SECRET, (0, utils_1.getJssEditingSecret)());
+        if (params) {
+            for (const key in params) {
+                if ({}.hasOwnProperty.call(params, key)) {
+                    url.searchParams.append(key, params[key]);
+                }
+            }
+        }
         return url.toString();
     }
 }

package/dist/cjs/editing/editing-render-middleware.js

@@ -15,6 +15,7 @@ const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const node_html_parser_1 = require("node-html-parser");
 const editing_data_service_1 = require("./editing-data-service");
+const constants_2 = require("./constants");
 const utils_1 = require("../utils/utils");
 /**
  * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
@@ -26,6 +27,21 @@ class EditingRenderMiddleware {
      */
     constructor(config) {
         var _a, _b, _c, _d;
+        /**
+         * Gets query parameters that should be passed along to subsequent requests
+         * @param query Object of query parameters from incoming URL
+         * @returns Object of approved query parameters
+         */
+        this.getQueryParamsForPropagation = (query) => {
+            const params = {};
+            if (query[constants_2.QUERY_PARAM_PROTECTION_BYPASS_SITECORE]) {
+                params[constants_2.QUERY_PARAM_PROTECTION_BYPASS_SITECORE] = query[constants_2.QUERY_PARAM_PROTECTION_BYPASS_SITECORE];
+            }
+            if (query[constants_2.QUERY_PARAM_PROTECTION_BYPASS_VERCEL]) {
+                params[constants_2.QUERY_PARAM_PROTECTION_BYPASS_VERCEL] = query[constants_2.QUERY_PARAM_PROTECTION_BYPASS_VERCEL];
+            }
+            return params;
+        };
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
             const { method, query, body, headers } = req;
@@ -44,7 +60,7 @@ class EditingRenderMiddleware {
                 });
             }
             // Validate secret
-            const secret = (_e = query[editing_data_service_1.QUERY_PARAM_EDITING_SECRET]) !== null && _e !== void 0 ? _e : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
+            const secret = (_e = query[constants_2.QUERY_PARAM_EDITING_SECRET]) !== null && _e !== void 0 ? _e : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
             if (secret !== (0, utils_1.getJssEditingSecret)()) {
                 sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
                 return res.status(401).json({
@@ -56,21 +72,28 @@ class EditingRenderMiddleware {
                 const editingData = extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
+                // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
+                const params = this.getQueryParamsForPropagation(query);
                 // Stash for use later on (i.e. within getStatic/ServerSideProps).
                 // Note we can't set this directly in setPreviewData since it's stored as a cookie (2KB limit)
                 // https://nextjs.org/docs/advanced-features/preview-mode#previewdata-size-limits)
-                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl);
+                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl, params);
                 // Enable Next.js Preview Mode, passing our preview data (i.e. editingData cache key)
                 res.setPreviewData(previewData);
                 // Grab the Next.js preview cookies to send on to the render request
                 const cookies = res.getHeader('Set-Cookie');
-                // Make actual render request for page route, passing on preview cookies.
+                // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
-                const requestUrl = this.resolvePageUrl(serverUrl, editingData.path);
                 sitecore_jss_1.debug.editing('fetching page route for %s', editingData.path);
-                const queryStringCharacter = requestUrl.indexOf('?') === -1 ? '?' : '&';
+                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                for (const key in params) {
+                    if ({}.hasOwnProperty.call(params, key)) {
+                        requestUrl.searchParams.append(key, params[key]);
+                    }
+                }
+                requestUrl.searchParams.append('timestamp', Date.now().toString());
                 const pageRes = yield this.dataFetcher
-                    .get(`${requestUrl}${queryStringCharacter}timestamp=${Date.now()}`, {
+                    .get(requestUrl.toString(), {
                     headers: {
                         Cookie: cookies.join(';'),
                     },
@@ -85,7 +108,7 @@ class EditingRenderMiddleware {
                 });
                 let html = pageRes.data;
                 if (!html || html.length === 0) {
-                    throw new Error(`Failed to render html for ${requestUrl}`);
+                    throw new Error(`Failed to render html for ${editingData.path}`);
                 }
                 // replace phkey attribute with key attribute so that newly added renderings
                 // show correct placeholders, so save and refresh won't be needed after adding each rendering
@@ -101,7 +124,7 @@ class EditingRenderMiddleware {
                     // Handle component rendering. Extract component markup only
                     html = (_f = (0, node_html_parser_1.parse)(html).getElementById(layout_1.EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
                     if (!html)
-                        throw new Error(`Failed to render component for ${requestUrl}`);
+                        throw new Error(`Failed to render component for ${editingData.path}`);
                 }
                 const body = { html };
                 // Return expected JSON result

package/dist/cjs/middleware/personalize-middleware.js

@@ -51,16 +51,6 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 return response;
             }
             const site = this.getSite(req, response);
-            const engageServer = this.initializeEngageServer(site, language);
-            // creates the browser ID cookie on the server side
-            // and includes the cookie in the response header
-            try {
-                yield engageServer.handleCookie(req, response, timeout);
-            }
-            catch (error) {
-                sitecore_jss_1.debug.personalize('skipped (browser id generation failed)');
-                throw error;
-            }
             // Get personalization info from Experience Edge
             const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
             if (!personalizeInfo) {
@@ -72,6 +62,16 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 sitecore_jss_1.debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            const engageServer = this.initializeEngageServer(hostname, site, language);
+            // creates the browser ID cookie on the server side
+            // and includes the cookie in the response header
+            try {
+                yield engageServer.handleCookie(req, response, timeout);
+            }
+            catch (error) {
+                sitecore_jss_1.debug.personalize('skipped (browser id generation failed)');
+                throw error;
+            }
             const params = this.getExperienceParams(req);
             sitecore_jss_1.debug.personalize('executing experience for %s %s %o', personalizeInfo.contentId, params);
             const personalizationData = {
@@ -104,15 +104,22 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             const rewritePath = (0, personalize_1.getPersonalizedRewrite)(basePath, { variantId });
             // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
             const rewriteUrl = req.nextUrl.clone();
+            // Preserve cookies from previous response
+            const cookies = response.cookies.getAll();
             rewriteUrl.pathname = rewritePath;
-            response = server_1.NextResponse.rewrite(rewriteUrl);
+            response = server_1.NextResponse.rewrite(rewriteUrl, response);
             // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
             // See https://github.com/vercel/next.js/issues/32727
             response.headers.set('x-middleware-cache', 'no-cache');
-            // Share rewrite path with following executed middlewares
+            // Share rewrite path with following executed middleware
             response.headers.set('x-sc-rewrite', rewritePath);
             // Share site name with the following executed middlewares
             response.cookies.set(this.SITE_SYMBOL, site.name);
+            // Restore cookies from previous response since
+            // browserId cookie gets omitted after rewrite
+            cookies.forEach((cookie) => {
+                response.cookies.set(cookie);
+            });
             sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 headers: this.extractDebugHeaders(response.headers),
@@ -139,13 +146,14 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             }
         });
     }
-    initializeEngageServer(site, language) {
+    initializeEngageServer(hostName, site, language) {
         const engageServer = (0, engage_1.initServer)({
             clientKey: this.config.cdpConfig.clientKey,
             targetURL: this.config.cdpConfig.endpoint,
             pointOfSale: this.config.getPointOfSale
                 ? this.config.getPointOfSale(site, language)
                 : personalize_1.PosResolver.resolve(site, language),
+            cookieDomain: hostName,
             forceServerCookieMode: true,
         });
         return engageServer;

package/dist/cjs/middleware/redirects-middleware.js

@@ -141,7 +141,8 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                     redirect.pattern = `/^\/${redirect.pattern
                         .replace(/^\/|\/$/g, '')
                         .replace(/^\^\/|\/\$$/g, '')
-                        .replace(/^\^|\$$/g, '')}$/gi`;
+                        .replace(/^\^|\$$/g, '')
+                        .replace(/\$\/gi$/g, '')}$/gi`;
                     return (((0, regex_parser_1.default)(redirect.pattern).test(tragetURL) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||

package/dist/esm/editing/constants.js

@@ -0,0 +1,3 @@
+export const QUERY_PARAM_EDITING_SECRET = 'secret';
+export const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
+export const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';

package/dist/esm/editing/editing-data-middleware.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { editingDataDiskCache } from './editing-data-cache';
 import { isEditingData } from './editing-data';
-import { QUERY_PARAM_EDITING_SECRET } from './editing-data-service';
+import { QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 /**
  * Middleware / handler for use in the editing data Next.js API dynamic route (e.g. '/api/editing/data/[key]')

package/dist/esm/editing/editing-data-service.js

@@ -7,10 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { QUERY_PARAM_EDITING_SECRET } from './constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { editingDataDiskCache } from './editing-data-cache';
 import { getJssEditingSecret } from '../utils/utils';
-export const QUERY_PARAM_EDITING_SECRET = 'secret';
 /**
  * Unique key generator.
  * Need more than just the item GUID since requests are made "live" during editing in EE.
@@ -93,13 +93,14 @@ export class ServerlessEditingDataService {
      * @param {string} serverUrl The server url to use for subsequent data API requests
      * @returns {Promise} The {@link EditingPreviewData} containing the generated key and serverUrl to use for retrieval
      */
-    setEditingData(data, serverUrl) {
+    setEditingData(data, serverUrl, params) {
         return __awaiter(this, void 0, void 0, function* () {
             const key = this.generateKey(data);
-            const url = this.getUrl(serverUrl, key);
+            const url = this.getUrl(serverUrl, key, params);
             const previewData = {
                 key,
                 serverUrl,
+                params,
             };
             debug.editing('storing editing data for %o: %o', previewData, data);
             return this.dataFetcher.put(url, data).then(() => {
@@ -118,20 +119,27 @@ export class ServerlessEditingDataService {
             if (!(editingPreviewData === null || editingPreviewData === void 0 ? void 0 : editingPreviewData.serverUrl)) {
                 return undefined;
             }
-            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key);
+            const url = this.getUrl(editingPreviewData.serverUrl, editingPreviewData.key, editingPreviewData.params);
             debug.editing('retrieving editing data for %o', previewData);
             return this.dataFetcher.get(url).then((response) => {
                 return response.data;
             });
         });
     }
-    getUrl(serverUrl, key) {
+    getUrl(serverUrl, key, params) {
         var _a;
         // Example URL format:
         //  http://localhost:3000/api/editing/data/52961eea-bafd-5287-a532-a72e36bd8a36-qkb4e3fv5x?secret=1234secret
         const apiRoute = (_a = this.apiRoute) === null || _a === void 0 ? void 0 : _a.replace('[key]', key);
         const url = new URL(apiRoute, serverUrl);
         url.searchParams.append(QUERY_PARAM_EDITING_SECRET, getJssEditingSecret());
+        if (params) {
+            for (const key in params) {
+                if ({}.hasOwnProperty.call(params, key)) {
+                    url.searchParams.append(key, params[key]);
+                }
+            }
+        }
         return url.toString();
     }
 }

package/dist/esm/editing/editing-render-middleware.js

@@ -11,7 +11,8 @@ import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
 import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { EDITING_COMPONENT_ID, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { parse } from 'node-html-parser';
-import { editingDataService, QUERY_PARAM_EDITING_SECRET, } from './editing-data-service';
+import { editingDataService } from './editing-data-service';
+import { QUERY_PARAM_EDITING_SECRET, QUERY_PARAM_PROTECTION_BYPASS_SITECORE, QUERY_PARAM_PROTECTION_BYPASS_VERCEL, } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 /**
  * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
@@ -23,6 +24,21 @@ export class EditingRenderMiddleware {
      */
     constructor(config) {
         var _a, _b, _c, _d;
+        /**
+         * Gets query parameters that should be passed along to subsequent requests
+         * @param query Object of query parameters from incoming URL
+         * @returns Object of approved query parameters
+         */
+        this.getQueryParamsForPropagation = (query) => {
+            const params = {};
+            if (query[QUERY_PARAM_PROTECTION_BYPASS_SITECORE]) {
+                params[QUERY_PARAM_PROTECTION_BYPASS_SITECORE] = query[QUERY_PARAM_PROTECTION_BYPASS_SITECORE];
+            }
+            if (query[QUERY_PARAM_PROTECTION_BYPASS_VERCEL]) {
+                params[QUERY_PARAM_PROTECTION_BYPASS_VERCEL] = query[QUERY_PARAM_PROTECTION_BYPASS_VERCEL];
+            }
+            return params;
+        };
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
             var _e, _f;
             const { method, query, body, headers } = req;
@@ -53,21 +69,28 @@ export class EditingRenderMiddleware {
                 const editingData = extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
+                // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
+                const params = this.getQueryParamsForPropagation(query);
                 // Stash for use later on (i.e. within getStatic/ServerSideProps).
                 // Note we can't set this directly in setPreviewData since it's stored as a cookie (2KB limit)
                 // https://nextjs.org/docs/advanced-features/preview-mode#previewdata-size-limits)
-                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl);
+                const previewData = yield this.editingDataService.setEditingData(editingData, serverUrl, params);
                 // Enable Next.js Preview Mode, passing our preview data (i.e. editingData cache key)
                 res.setPreviewData(previewData);
                 // Grab the Next.js preview cookies to send on to the render request
                 const cookies = res.getHeader('Set-Cookie');
-                // Make actual render request for page route, passing on preview cookies.
+                // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
-                const requestUrl = this.resolvePageUrl(serverUrl, editingData.path);
                 debug.editing('fetching page route for %s', editingData.path);
-                const queryStringCharacter = requestUrl.indexOf('?') === -1 ? '?' : '&';
+                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                for (const key in params) {
+                    if ({}.hasOwnProperty.call(params, key)) {
+                        requestUrl.searchParams.append(key, params[key]);
+                    }
+                }
+                requestUrl.searchParams.append('timestamp', Date.now().toString());
                 const pageRes = yield this.dataFetcher
-                    .get(`${requestUrl}${queryStringCharacter}timestamp=${Date.now()}`, {
+                    .get(requestUrl.toString(), {
                     headers: {
                         Cookie: cookies.join(';'),
                     },
@@ -82,7 +105,7 @@ export class EditingRenderMiddleware {
                 });
                 let html = pageRes.data;
                 if (!html || html.length === 0) {
-                    throw new Error(`Failed to render html for ${requestUrl}`);
+                    throw new Error(`Failed to render html for ${editingData.path}`);
                 }
                 // replace phkey attribute with key attribute so that newly added renderings
                 // show correct placeholders, so save and refresh won't be needed after adding each rendering
@@ -98,7 +121,7 @@ export class EditingRenderMiddleware {
                     // Handle component rendering. Extract component markup only
                     html = (_f = parse(html).getElementById(EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
                     if (!html)
-                        throw new Error(`Failed to render component for ${requestUrl}`);
+                        throw new Error(`Failed to render component for ${editingData.path}`);
                 }
                 const body = { html };
                 // Return expected JSON result

package/dist/esm/middleware/personalize-middleware.js

@@ -48,16 +48,6 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 return response;
             }
             const site = this.getSite(req, response);
-            const engageServer = this.initializeEngageServer(site, language);
-            // creates the browser ID cookie on the server side
-            // and includes the cookie in the response header
-            try {
-                yield engageServer.handleCookie(req, response, timeout);
-            }
-            catch (error) {
-                debug.personalize('skipped (browser id generation failed)');
-                throw error;
-            }
             // Get personalization info from Experience Edge
             const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
             if (!personalizeInfo) {
@@ -69,6 +59,16 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            const engageServer = this.initializeEngageServer(hostname, site, language);
+            // creates the browser ID cookie on the server side
+            // and includes the cookie in the response header
+            try {
+                yield engageServer.handleCookie(req, response, timeout);
+            }
+            catch (error) {
+                debug.personalize('skipped (browser id generation failed)');
+                throw error;
+            }
             const params = this.getExperienceParams(req);
             debug.personalize('executing experience for %s %s %o', personalizeInfo.contentId, params);
             const personalizationData = {
@@ -101,15 +101,22 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const rewritePath = getPersonalizedRewrite(basePath, { variantId });
             // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
             const rewriteUrl = req.nextUrl.clone();
+            // Preserve cookies from previous response
+            const cookies = response.cookies.getAll();
             rewriteUrl.pathname = rewritePath;
-            response = NextResponse.rewrite(rewriteUrl);
+            response = NextResponse.rewrite(rewriteUrl, response);
             // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
             // See https://github.com/vercel/next.js/issues/32727
             response.headers.set('x-middleware-cache', 'no-cache');
-            // Share rewrite path with following executed middlewares
+            // Share rewrite path with following executed middleware
             response.headers.set('x-sc-rewrite', rewritePath);
             // Share site name with the following executed middlewares
             response.cookies.set(this.SITE_SYMBOL, site.name);
+            // Restore cookies from previous response since
+            // browserId cookie gets omitted after rewrite
+            cookies.forEach((cookie) => {
+                response.cookies.set(cookie);
+            });
             debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
                 headers: this.extractDebugHeaders(response.headers),
@@ -136,13 +143,14 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             }
         });
     }
-    initializeEngageServer(site, language) {
+    initializeEngageServer(hostName, site, language) {
         const engageServer = initServer({
             clientKey: this.config.cdpConfig.clientKey,
             targetURL: this.config.cdpConfig.endpoint,
             pointOfSale: this.config.getPointOfSale
                 ? this.config.getPointOfSale(site, language)
                 : PosResolver.resolve(site, language),
+            cookieDomain: hostName,
             forceServerCookieMode: true,
         });
         return engageServer;

package/dist/esm/middleware/redirects-middleware.js

@@ -135,7 +135,8 @@ export class RedirectsMiddleware extends MiddlewareBase {
                     redirect.pattern = `/^\/${redirect.pattern
                         .replace(/^\/|\/$/g, '')
                         .replace(/^\^\/|\/\$$/g, '')
-                        .replace(/^\^|\$$/g, '')}$/gi`;
+                        .replace(/^\^|\$$/g, '')
+                        .replace(/\$\/gi$/g, '')}$/gi`;
                     return ((regexParser(redirect.pattern).test(tragetURL) ||
                         regexParser(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
                         regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "21.6.0-canary.1",
+  "version": "21.6.0-canary.11",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -30,7 +30,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore/engage": "^1.4.0",
+    "@sitecore/engage": "^1.4.1",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
@@ -66,15 +66,15 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@sitecore/engage": "^1.4.0",
+    "@sitecore/engage": "^1.4.1",
     "next": "^13.4.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.6.0-canary.1",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.6.0-canary.1",
-    "@sitecore-jss/sitecore-jss-react": "^21.6.0-canary.1",
+    "@sitecore-jss/sitecore-jss": "^21.6.0-canary.11",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.6.0-canary.11",
+    "@sitecore-jss/sitecore-jss-react": "^21.6.0-canary.11",
     "@vercel/kv": "^0.2.1",
     "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
@@ -83,7 +83,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "76dc8a54ba77baf6dec26aa7e05bede41747e9c5",
+  "gitHead": "dc44425c52607a2ea8ec643898d75003baa546bf",
   "files": [
     "dist",
     "types",

package/types/ComponentBuilder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { ComponentFactory } from '@sitecore-jss/sitecore-jss-react';
 import { Module, ModuleFactory } from './sharedTypes/module-factory';
 import { ComponentType } from 'react';

package/types/components/ComponentPropsContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { ReactNode } from 'react';
 import { ComponentPropsCollection } from '../sharedTypes/component-props';
 /**

package/types/components/Link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { LinkProps as ReactLinkProps } from '@sitecore-jss/sitecore-jss-react';
 export type LinkProps = ReactLinkProps & {

package/types/components/NextImage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ImageProps } from '@sitecore-jss/sitecore-jss-react';
 import { ImageLoader, ImageProps as NextImageProperties } from 'next/image';

package/types/components/Placeholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { PlaceholderComponentProps } from '@sitecore-jss/sitecore-jss-react';
 export declare const Placeholder: (props: PlaceholderComponentProps) => React.JSX.Element;

package/types/editing/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const QUERY_PARAM_EDITING_SECRET = "secret";
+export declare const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = "x-sitecore-protection-bypass";
+export declare const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = "x-vercel-protection-bypass";

package/types/editing/editing-data-service.d.ts

@@ -2,13 +2,15 @@ import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss';
 import { EditingData } from './editing-data';
 import { EditingDataCache } from './editing-data-cache';
 import { PreviewData } from 'next';
-export declare const QUERY_PARAM_EDITING_SECRET = "secret";
 /**
  * Data for Next.js Preview (Editing) mode
  */
 export interface EditingPreviewData {
     key: string;
     serverUrl?: string;
+    params?: {
+        [key: string]: string;
+    };
 }
 /**
  * Defines an editing data service implementation
@@ -20,7 +22,9 @@ export interface EditingDataService {
      * @param {string} serverUrl The server url e.g. which can be used for further API requests
      * @returns The {@link EditingPreviewData} containing the information to use for retrieval
      */
-    setEditingData(data: EditingData, serverUrl: string): Promise<EditingPreviewData>;
+    setEditingData(data: EditingData, serverUrl: string, params?: {
+        [key: string]: string;
+    }): Promise<EditingPreviewData>;
     /**
      * Retrieves Sitecore editor payload data
      * @param {PreviewData} previewData Editing preview data containing the information to use for retrieval
@@ -107,14 +111,18 @@ export declare class ServerlessEditingDataService implements EditingDataService
      * @param {string} serverUrl The server url to use for subsequent data API requests
      * @returns {Promise} The {@link EditingPreviewData} containing the generated key and serverUrl to use for retrieval
      */
-    setEditingData(data: EditingData, serverUrl: string): Promise<EditingPreviewData>;
+    setEditingData(data: EditingData, serverUrl: string, params?: {
+        [key: string]: string;
+    }): Promise<EditingPreviewData>;
     /**
      * Retrieves Sitecore editor payload data by key
      * @param {PreviewData} previewData Editing preview data containing the key and serverUrl to use for retrieval
      * @returns {Promise} The {@link EditingData}
      */
     getEditingData(previewData: PreviewData): Promise<EditingData | undefined>;
-    protected getUrl(serverUrl: string, key: string): string;
+    protected getUrl(serverUrl: string, key: string, params?: {
+        [key: string]: string;
+    }): string;
 }
 /**
  * The `EditingDataService` default instance.

package/types/editing/editing-render-middleware.d.ts

@@ -55,6 +55,16 @@ export declare class EditingRenderMiddleware {
      * @returns route handler
      */
     getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
+    /**
+     * Gets query parameters that should be passed along to subsequent requests
+     * @param query Object of query parameters from incoming URL
+     * @returns Object of approved query parameters
+     */
+    protected getQueryParamsForPropagation: (query: Partial<{
+        [key: string]: string | string[];
+    }>) => {
+        [key: string]: string;
+    };
     private handler;
     /**
      * Default page URL resolution.

package/types/middleware/personalize-middleware.d.ts

@@ -70,7 +70,7 @@ export declare class PersonalizeMiddleware extends MiddlewareBase {
      * @returns middleware handler
      */
     getHandler(): (req: NextRequest, res?: NextResponse) => Promise<NextResponse>;
-    protected initializeEngageServer(site: SiteInfo, language: string): EngageServer;
+    protected initializeEngageServer(hostName: string, site: SiteInfo, language: string): EngageServer;
     protected getExperienceParams(req: NextRequest): ExperienceParams;
     protected excludeRoute(pathname: string): boolean | undefined;
     private handler;

package/types/sharedTypes/module-factory.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 import { GetServerSideComponentProps, GetStaticComponentProps } from './component-props';
 /**