@salesforce/commerce-sdk-react 3.4.0 → 3.4.1-preview.0

package/CHANGELOG.md

@@ -1,8 +1,17 @@
+## v3.4.1-preview.0 (Aug 21, 2025)
+
+- Add support for environment level base paths on /mobify routes [#2892](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2892)
+- Update USID expiry to match SLAS refresh token expiry[#2854](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2854)
+
+- [Bugfix] Skip deleting dwsid on shopper login if hybrid auth is enabled for current site. [#3151](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3151)
+
 ## v3.4.0 (Jul 22, 2025)
+
 - Optionally disable auth init in CommerceApiProvider [#2629](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2629)
 - Now compatible with either React 17 and 18 [#2506](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2506)
 - Gracefully handle missing SDK Clients in CommerceApiProvider [#2539](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2539)
 - Refactor commerce-sdk-react to allow injecting ApiClients [#2519](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2519)
+- Upgrade to commerce-sdk-isomorphic v3.4.0 [#2866](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2866)
 
 
 ## v3.3.0 (May 22, 2025)

package/auth/index.d.ts

@@ -8,6 +8,7 @@ type Helpers = typeof helpers;
 interface AuthConfig extends ApiClientConfigParams {
     redirectURI: string;
     proxy: string;
+    privateClientProxyEndpoint?: string;
     fetchOptions?: ShopperLoginTypes.FetchOptions;
     fetchedToken?: string;
     enablePWAKitPrivateClient?: boolean;
@@ -18,6 +19,7 @@ interface AuthConfig extends ApiClientConfigParams {
     passwordlessLoginCallbackURI?: string;
     refreshTokenRegisteredCookieTTL?: number;
     refreshTokenGuestCookieTTL?: number;
+    hybridAuthEnabled?: boolean;
 }
 type AuthorizeIDPParams = Parameters<Helpers['authorizeIDP']>[1];
 type LoginIDPUserParams = Parameters<Helpers['loginIDPUser']>[2];
@@ -75,6 +77,7 @@ declare class Auth {
     private refreshTokenRegisteredCookieTTL;
     private refreshTokenGuestCookieTTL;
     private refreshTrustedAgentHandler;
+    private hybridAuthEnabled;
     constructor(config: AuthConfig);
     get(name: AuthDataKeys): string;
     private set;
@@ -149,7 +152,10 @@ declare class Auth {
      */
     private convertSecondsToDate;
     /**
-     * Retrieves our refresh token cookie ttl value
+     * Retrieves our refresh token cookie ttl value from the following sources in order:
+     * 1. Override value (if set)
+     * 2. SLAS response value (if set)
+     * 3. Default value (if no override or SLAS response value is set)
      */
     private getRefreshTokenCookieTTLValue;
     /**

package/auth/index.js

@@ -147,11 +147,14 @@ const DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL = exports.DEFAULT_SLAS_REFRESH_TOKEN_
  */
 class Auth {
   constructor(config) {
-    // Special endpoint for injecting SLAS private client secret.
+    // Special proxy endpoint for injecting SLAS private client secret.
+    // We prioritize config.privateClientProxyEndpoint since that allows us to use the new envBasePath feature
+    // The preexisting hard coded privateClientEndpoint is kept here for now to prevent a breaking change.
+    // TODO: We should remove this in the next major release so we do not have a hard coded proxy path inside commerce-sdk-react
     const baseUrl = config.proxy.split(_constant.MOBIFY_PATH)[0];
     const privateClientEndpoint = `${baseUrl}${_constant.SLAS_PRIVATE_PROXY_PATH}`;
     this.client = new _commerceSdkIsomorphic.ShopperLogin({
-      proxy: config.enablePWAKitPrivateClient ? privateClientEndpoint : config.proxy,
+      proxy: config.enablePWAKitPrivateClient ? config.privateClientProxyEndpoint ? config.privateClientProxyEndpoint : privateClientEndpoint : config.proxy,
       parameters: {
         clientId: config.clientId,
         organizationId: config.organizationId,
@@ -224,7 +227,11 @@ class Auth {
     this.silenceWarnings = config.silenceWarnings || false;
     this.isPrivate = !!this.clientSecret;
     const passwordlessLoginCallbackURI = config.passwordlessLoginCallbackURI;
-    this.passwordlessLoginCallbackURI = passwordlessLoginCallbackURI ? (0, _utils.isAbsoluteUrl)(passwordlessLoginCallbackURI) ? passwordlessLoginCallbackURI : `${baseUrl}${passwordlessLoginCallbackURI}` : '';
+    this.passwordlessLoginCallbackURI = passwordlessLoginCallbackURI ? (0, _utils.isAbsoluteUrl)(passwordlessLoginCallbackURI) ? passwordlessLoginCallbackURI :
+    // This fallback does not take into account the envBasePath feature
+    // To set an env base path, config.passwordlessLoginCallbackURI must be an absolute url
+    `${baseUrl}${passwordlessLoginCallbackURI}` : '';
+    this.hybridAuthEnabled = config.hybridAuthEnabled || false;
   }
   get(name) {
     const {
@@ -407,9 +414,33 @@ class Auth {
         customerId,
         usid
       } = this.parseSlasJWT(sfraAuthToken);
+
+      /**
+       * This if block is only executed in a hybrid setup when the cc-at cookie is set.
+       * If the login state of the shopper changes on SFRA, the "refresh_token_expires_in"
+       * will change and the updated value is not propagated back to PWA Kit via cookies or cc-at token.
+       * This results in the "refresh_token_expires_in" to be incorrect so we can't read it from localStorage.
+       * We must instead read the login state by decoding the cc-at token and rely on the default values for the guest or registered user.
+       * This in worst cases will cause the usid cookie to expire a few hours after the refreshToken which should be acceptable given
+       * a few hours are insignificant compared tothe overall validty of the refreshToken.
+       */
+      const refreshTokenExpiresIn = isGuest ? DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL : DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL;
+      const refreshTokenTTLValue = this.getRefreshTokenCookieTTLValue(refreshTokenExpiresIn, isGuest);
+      const expiresDate = this.convertSecondsToDate(refreshTokenTTLValue);
       this.set('access_token', sfraAuthToken);
       this.set('customer_id', customerId);
-      this.set('usid', usid);
+
+      /**
+       * The usid cookie always set when session bridging in a hybrid setup. This makes resetting the usid
+       * cookie here redundant. However, if the usid cookie is not set, we can have a fallback to read the usid from the accesstoken and set it.
+       * Setting the usid cookie conditionally ensures the usid is always set and minimizes the discrepancy between usid cookie and refresh_token cookie expiration.
+       */
+      const usidCookieValue = this.get('usid');
+      if (!usidCookieValue || usidCookieValue !== usid) {
+        this.set('usid', usid, {
+          expires: expiresDate
+        });
+      }
       this.set('customer_type', isGuest ? 'guest' : 'registered');
       accessToken = sfraAuthToken;
       // SFRA -> PWA access token cookie handoff is successful so we clear the SFRA made cookies.
@@ -448,6 +479,14 @@ class Auth {
    * registered shopper refresh-token and restores session and basket on SFRA.
    */
   clearECOMSession() {
+    /**
+     * If `hybridAuthEnabled` is true, dwsid cookie must not be cleared.
+     * This makes sure the session-bridged dwsid, received from `/oauth2/token` call on shopper login
+     * is NOT cleared and can be used to maintain the server affinity.
+     */
+    if (this.hybridAuthEnabled) {
+      return;
+    }
     const {
       key,
       storageType
@@ -472,9 +511,14 @@ class Auth {
   }
 
   /**
-   * Retrieves our refresh token cookie ttl value
+   * Retrieves our refresh token cookie ttl value from the following sources in order:
+   * 1. Override value (if set)
+   * 2. SLAS response value (if set)
+   * 3. Default value (if no override or SLAS response value is set)
    */
-  getRefreshTokenCookieTTLValue(overrideValue, responseValue, defaultValue) {
+  getRefreshTokenCookieTTLValue(refreshTokenExpiresInSLASValue, isGuest) {
+    const overrideValue = isGuest ? this.refreshTokenGuestCookieTTL : this.refreshTokenRegisteredCookieTTL;
+    const defaultValue = isGuest ? DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL : DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL;
     // Check if overrideValue is valid
     // if not, log warning and fall back to responseValue or defaultValue
     const isOverrideValid = typeof overrideValue === 'number' && overrideValue > 0 && overrideValue <= defaultValue;
@@ -483,7 +527,7 @@ class Auth {
     }
 
     // Return the first valid value: overrideValue (if valid), responseValue, or defaultValue
-    return isOverrideValid ? overrideValue : responseValue || defaultValue;
+    return isOverrideValid ? overrideValue : refreshTokenExpiresInSLASValue || defaultValue;
   }
 
   /**
@@ -500,13 +544,9 @@ class Auth {
     this.set('id_token', res.id_token);
     this.set('idp_access_token', res.idp_access_token);
     this.set('token_type', res.token_type);
-    this.set('usid', res.usid);
     this.set('customer_type', isGuest ? 'guest' : 'registered');
     const refreshTokenKey = isGuest ? 'refresh_token_guest' : 'refresh_token_registered';
-    const overrideValue = isGuest ? this.refreshTokenGuestCookieTTL : this.refreshTokenRegisteredCookieTTL;
-    const responseValue = res.refresh_token_expires_in;
-    const defaultValue = isGuest ? DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL : DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL;
-    const refreshTokenTTLValue = this.getRefreshTokenCookieTTLValue(overrideValue, responseValue, defaultValue);
+    const refreshTokenTTLValue = this.getRefreshTokenCookieTTLValue(res.refresh_token_expires_in, isGuest);
     if (res.access_token) {
       const {
         uido
@@ -518,6 +558,9 @@ class Auth {
     this.set(refreshTokenKey, res.refresh_token, {
       expires: expiresDate
     });
+    this.set('usid', res.usid, {
+      expires: expiresDate
+    });
   }
   refreshAccessToken() {
     var _this2 = this;
@@ -669,9 +712,32 @@ class Auth {
           customerId,
           usid
         } = _this4.parseSlasJWT(_this4.fetchedToken);
+
+        /**
+         * If the login state of the shopper changes on SFRA, the "refresh_token_expires_in"
+         * will change and the updated value is not propagated back to PWA Kit via cookies or cc-at token.
+         * This results in the "refresh_token_expires_in" to be incorrect so we can't read it from localStorage.
+         * We must instead read the login state by decoding the cc-at token and rely on the default values for the guest or registered user.
+         * This in worst cases will cause the usid cookie to expire a few hours after the refreshToken which should be acceptable given
+         * a few hours are insignificant compared tothe overall validty of the refreshToken.
+         */
+        const refreshTokenExpiresIn = isGuest ? DEFAULT_SLAS_REFRESH_TOKEN_GUEST_TTL : DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL;
+        const refreshTokenTTLValue = _this4.getRefreshTokenCookieTTLValue(refreshTokenExpiresIn, isGuest);
+        const expiresDate = _this4.convertSecondsToDate(refreshTokenTTLValue);
         _this4.set('access_token', _this4.fetchedToken);
         _this4.set('customer_id', customerId);
-        _this4.set('usid', usid);
+
+        /**
+         * The usid cookie always set when setting up auth in pure composable env or session bridging in a hybrid setup. This makes resetting the usid
+         * cookie here redundant. However, if the usid cookie is not set, we can have a fallback to read the usid from the accesstoken and set it.
+         * Setting the usid cookie conditionally ensures the usid is always set and minimizes the discrepancy between usid cookie and refresh_token cookie expiration.
+         */
+        const usidCookieValue = _this4.get('usid');
+        if (!usidCookieValue || usidCookieValue !== usid) {
+          _this4.set('usid', usid, {
+            expires: expiresDate
+          });
+        }
         _this4.set('customer_type', isGuest ? 'guest' : 'registered');
         return _this4.data;
       }

package/components/StorefrontPreview/utils.js

@@ -29,7 +29,9 @@ const detectStorefrontPreview = () => {
 exports.detectStorefrontPreview = detectStorefrontPreview;
 const getClientScript = () => {
   const parentOrigin = (0, _utils.getParentOrigin)() ?? 'https://runtime.commercecloud.com';
-  return parentOrigin === _utils.DEVELOPMENT_ORIGIN ? `${parentOrigin}${_constant.LOCAL_BUNDLE_PATH}/static/storefront-preview.js` : `${parentOrigin}/cc/b2c/preview/preview.client.js`;
+  return parentOrigin === _utils.DEVELOPMENT_ORIGIN
+  // TODO: This will need to be updated to support base paths with storefront preview
+  ? `${parentOrigin}${_constant.LOCAL_BUNDLE_PATH}/static/storefront-preview.js` : `${parentOrigin}/cc/b2c/preview/preview.client.js`;
 };
 
 // Custom Prop Types.

package/constant.d.ts

@@ -2,9 +2,21 @@
  * This list contains domains that can host code in iframe
  */
 export declare const IFRAME_HOST_ALLOW_LIST: readonly string[];
+/**
+ * @deprecated
+ */
 export declare const MOBIFY_PATH = "/mobify";
+/**
+ * @deprecated
+ */
 export declare const PROXY_PATH: string;
+/**
+ * @deprecated
+ */
 export declare const LOCAL_BUNDLE_PATH: string;
+/**
+ * @deprecated
+ */
 export declare const SLAS_PRIVATE_PROXY_PATH: string;
 export declare const SLAS_SECRET_WARNING_MSG = "You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!";
 export declare const SLAS_SECRET_PLACEHOLDER = "_PLACEHOLDER_PROXY-PWA_KIT_SLAS_CLIENT_SECRET";

package/constant.js

@@ -16,10 +16,23 @@ exports.SLAS_SECRET_WARNING_MSG = exports.SLAS_SECRET_PLACEHOLDER = exports.SLAS
  */
 const IFRAME_HOST_ALLOW_LIST = exports.IFRAME_HOST_ALLOW_LIST = Object.freeze(['https://runtime.commercecloud.com', 'https://runtime-admin-staging.mobify-storefront.com', 'https://runtime-admin-preview.mobify-storefront.com']);
 
-// We hardcode these here since we don't want commerce-sdk-react to have a dependency on pwa-kit-runtime
+/* Deprecating the following path constants since, outside of storefront preview,
+ * the paths they are used for can be passed in via the provider. */
+/**
+ * @deprecated
+ */
 const MOBIFY_PATH = exports.MOBIFY_PATH = '/mobify';
+/**
+ * @deprecated
+ */
 const PROXY_PATH = exports.PROXY_PATH = `${MOBIFY_PATH}/proxy`;
+/**
+ * @deprecated
+ */
 const LOCAL_BUNDLE_PATH = exports.LOCAL_BUNDLE_PATH = `${MOBIFY_PATH}/bundle/development`;
+/**
+ * @deprecated
+ */
 const SLAS_PRIVATE_PROXY_PATH = exports.SLAS_PRIVATE_PROXY_PATH = `${MOBIFY_PATH}/slas/private`;
 const SLAS_SECRET_WARNING_MSG = exports.SLAS_SECRET_WARNING_MSG = 'You are potentially exposing SLAS secret on browser. Make sure to keep it safe and secure!';
 const SLAS_SECRET_PLACEHOLDER = exports.SLAS_SECRET_PLACEHOLDER = '_PLACEHOLDER_PROXY-PWA_KIT_SLAS_CLIENT_SECRET';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "3.4.0",
+  "version": "3.4.1-preview.0",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -40,12 +40,12 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "^3.3.0",
+    "commerce-sdk-isomorphic": "^3.4.0",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.11.0",
+    "@salesforce/pwa-kit-dev": "3.12.0-preview.1",
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -60,7 +60,7 @@
     "@types/react-helmet": "~6.1.6",
     "@types/react-router-dom": "~5.3.3",
     "cross-env": "^5.2.1",
-    "internal-lib-build": "3.11.0",
+    "internal-lib-build": "3.12.0-preview.1",
     "jsonwebtoken": "^9.0.0",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
@@ -90,5 +90,5 @@
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "ce537dc2e48c980ca78607e03125f9cccf8314c5"
+  "gitHead": "dbcfcb7cd10fcea4ee785b47f73b11a44036e7e0"
 }

package/provider.d.ts

@@ -13,6 +13,7 @@ export interface CommerceApiProviderProps extends ApiClientConfigParams {
     headers?: Record<string, string>;
     fetchedToken?: string;
     enablePWAKitPrivateClient?: boolean;
+    privateClientProxyEndpoint?: string;
     clientSecret?: string;
     silenceWarnings?: boolean;
     logger?: Logger;
@@ -22,6 +23,7 @@ export interface CommerceApiProviderProps extends ApiClientConfigParams {
     refreshTokenGuestCookieTTL?: number;
     apiClients?: ApiClients;
     disableAuthInit?: boolean;
+    hybridAuthEnabled?: boolean;
 }
 /**
  * @internal
@@ -75,6 +77,17 @@ export declare const AuthContext: React.Context<Auth>;
  * directly to the provider. However, be careful when doing this as you will have
  * to make sure the secret is not unexpectedly exposed to the client.
  *
+ *
+ * `hybridAuthEnabled` is an optional flag that indicates the current Site has Hybrid Auth enabled.
+ * This drives the behavior of the `clearECOMSession` method. If `hybridAuthEnabled` is true,
+ * the `clearECOMSession` method will not be called. This makes sure the session-bridged dwsid, received from `/oauth2/token` call
+ * on shopper login is NOT cleared and can be used to maintain the server affinity.
+ *
+ * `hybridAuthEnabled` flag can also be used to drive other Hybrid Auth specific behaviors in the future.
+ *
+ * Note: `hybridAuthEnabled` should NOT be set to true for hybrid storefronts using Plugin SLAS as we need the dwsid to be deleted
+ * to force session-bridging on SFRA as in this case, the `oauth2/token` call does not return a dwsid.
+ *
  * @returns Provider to wrap your app with
  */
 declare const CommerceApiProvider: (props: CommerceApiProviderProps) => ReactElement;

package/provider.js

@@ -79,6 +79,17 @@ const AuthContext = exports.AuthContext = /*#__PURE__*/_react.default.createCont
  * Non-PWA Kit users can enable private client mode by passing in a client secret
  * directly to the provider. However, be careful when doing this as you will have
  * to make sure the secret is not unexpectedly exposed to the client.
+ * 
+ * 
+ * `hybridAuthEnabled` is an optional flag that indicates the current Site has Hybrid Auth enabled.
+ * This drives the behavior of the `clearECOMSession` method. If `hybridAuthEnabled` is true,
+ * the `clearECOMSession` method will not be called. This makes sure the session-bridged dwsid, received from `/oauth2/token` call
+ * on shopper login is NOT cleared and can be used to maintain the server affinity.
+ * 
+ * `hybridAuthEnabled` flag can also be used to drive other Hybrid Auth specific behaviors in the future.
+ * 
+ * Note: `hybridAuthEnabled` should NOT be set to true for hybrid storefronts using Plugin SLAS as we need the dwsid to be deleted
+ * to force session-bridging on SFRA as in this case, the `oauth2/token` call does not return a dwsid.
  *
  * @returns Provider to wrap your app with
  */
@@ -97,6 +108,7 @@ const CommerceApiProvider = props => {
     currency,
     fetchedToken,
     enablePWAKitPrivateClient,
+    privateClientProxyEndpoint,
     clientSecret,
     silenceWarnings,
     logger,
@@ -105,7 +117,8 @@ const CommerceApiProvider = props => {
     refreshTokenRegisteredCookieTTL,
     refreshTokenGuestCookieTTL,
     apiClients,
-    disableAuthInit = false
+    disableAuthInit = false,
+    hybridAuthEnabled = false
   } = props;
 
   // Set the logger based on provided configuration, or default to the console object if no logger is provided
@@ -121,15 +134,17 @@ const CommerceApiProvider = props => {
       fetchOptions,
       fetchedToken,
       enablePWAKitPrivateClient,
+      privateClientProxyEndpoint,
       clientSecret,
       silenceWarnings,
       logger: configLogger,
       defaultDnt,
       passwordlessLoginCallbackURI,
       refreshTokenRegisteredCookieTTL,
-      refreshTokenGuestCookieTTL
+      refreshTokenGuestCookieTTL,
+      hybridAuthEnabled
     });
-  }, [clientId, organizationId, shortCode, siteId, proxy, redirectURI, fetchOptions, fetchedToken, enablePWAKitPrivateClient, clientSecret, silenceWarnings, configLogger, defaultDnt, passwordlessLoginCallbackURI, refreshTokenRegisteredCookieTTL, refreshTokenGuestCookieTTL, apiClients]);
+  }, [clientId, organizationId, shortCode, siteId, proxy, redirectURI, fetchOptions, fetchedToken, enablePWAKitPrivateClient, privateClientProxyEndpoint, clientSecret, silenceWarnings, configLogger, defaultDnt, passwordlessLoginCallbackURI, refreshTokenRegisteredCookieTTL, refreshTokenGuestCookieTTL, apiClients, hybridAuthEnabled]);
   const dwsid = auth.get(_constant.DWSID_COOKIE_NAME);
   const serverAffinityHeader = {};
   if (dwsid) {
@@ -176,6 +191,12 @@ const CommerceApiProvider = props => {
       throwOnBadResponse: true,
       fetchOptions
     };
+
+    // Special proxy endpoint for injecting SLAS private client secret.
+    // This is only used by the ShopperLogin API as that is the only one that interacts with SLAS.
+    // We prioritize config.privateClientProxyEndpoint since that allows us to use the new envBasePath feature
+    // The preexisting hard coded privateClientEndpoint is kept here for now to prevent a breaking change.
+    // TODO: We should remove this in the next major release so we do not have a hard coded proxy path inside commerce-sdk-react
     const baseUrl = config.proxy.split(_constant.MOBIFY_PATH)[0];
     const privateClientEndpoint = `${baseUrl}${_constant.SLAS_PRIVATE_PROXY_PATH}`;
     return {
@@ -185,7 +206,7 @@ const CommerceApiProvider = props => {
       shopperExperience: new _commerceSdkIsomorphic.ShopperExperience(config),
       shopperGiftCertificates: new _commerceSdkIsomorphic.ShopperGiftCertificates(config),
       shopperLogin: new _commerceSdkIsomorphic.ShopperLogin(_objectSpread(_objectSpread({}, config), {}, {
-        proxy: enablePWAKitPrivateClient ? privateClientEndpoint : config.proxy
+        proxy: enablePWAKitPrivateClient ? privateClientProxyEndpoint ? privateClientProxyEndpoint : privateClientEndpoint : config.proxy
       })),
       shopperOrders: new _commerceSdkIsomorphic.ShopperOrders(config),
       shopperProducts: new _commerceSdkIsomorphic.ShopperProducts(config),