Enable hybrid mode and update routing logic for SFRA integration. Adjusted SSR and app configuration for private client usage and passkey login. Updated API proxy settings for staging environment.

Author: hajinsuha1

packages/template-retail-react-app/app/components/_app-config/index.jsx

@@ -107,10 +107,10 @@ const AppConfig = ({children, locals = {}}) => {
             defaultDnt={DEFAULT_DNT_STATE}
             // Set 'enablePWAKitPrivateClient' to true to use SLAS private client login flows.
             // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
-            enablePWAKitPrivateClient={false}
+            enablePWAKitPrivateClient={true}
             privateClientProxyEndpoint={slasPrivateClientProxyEndpoint}
             // Uncomment 'hybridAuthEnabled' if the current site has Hybrid Auth enabled. Do NOT set this flag for hybrid storefronts using Plugin SLAS.
-            // hybridAuthEnabled={true}
+            hybridAuthEnabled={true}
             logger={createLogger({packageName: 'commerce-sdk-react'})}
         >
             <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>

packages/template-retail-react-app/app/routes.jsx

@@ -15,7 +15,8 @@
 import React from 'react'
 import loadable from '@loadable/component'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-
+import {withRouter} from 'react-router-dom'
+import {useEffect} from 'react'
 // Components
 import {Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {configureRoutes} from '@salesforce/retail-react-app/app/utils/routes-utils'
@@ -123,13 +124,17 @@ export const routes = [
 
 export default () => {
     const config = getConfig()
+    const enableHybrid = config?.app?.enableHybrid
     const loginConfig = config?.app?.login
     const resetPasswordLandingPath = loginConfig?.resetPassword?.landingPath
     const socialLoginEnabled = loginConfig?.social?.enabled
     const socialRedirectURI = loginConfig?.social?.redirectURI
     const passwordlessLoginEnabled = loginConfig?.passwordless?.enabled
     const passwordlessLoginLandingPath = loginConfig?.passwordless?.landingPath
 
+    // Paths handled by SFRA in hybrid mode
+    const hybridPaths = ['/cart', '/checkout', '/checkout/confirmation/:orderNo']
+
     // Add dynamic routes conditionally (only if features are enabled and paths are defined)
     const dynamicRoutes = [
         resetPasswordLandingPath && {
@@ -151,11 +156,53 @@ export default () => {
             }
     ].filter(Boolean)
 
-    const allRoutes = configureRoutes([...routes, ...dynamicRoutes], config, {
-        ignoredRoutes: ['/callback'],
-        fuzzyPathMatching: true
-    })
+    const allRoutes = configureRoutes(
+        [...routes, ...dynamicRoutes].filter(
+            (r) => !enableHybrid || !hybridPaths.includes(r.path)
+        ),
+        config,
+        {ignoredRoutes: ['/callback'], fuzzyPathMatching: true}
+    )
 
     // Add catch-all route at the end so it doesn't match before dynamic routes
-    return [...allRoutes, {path: '*', component: PageNotFound}]
+    return [
+        ...allRoutes,
+        {
+            path: '*',
+            component: withRouter((props) => {
+                const {location} = props
+                const urlParams = new URLSearchParams(location.search)
+
+                useEffect(() => {
+                    if (enableHybrid && !urlParams.has('redirected')) {
+                        // Redirect client-side navigations directly to SFRA
+                        const sfccOrigin = getConfig()?.app?.sfccOrigin
+                        const siteId = getConfig()?.app?.defaultSite || 'RefArchGlobal'
+                        // Strip the PWA Kit site/locale prefix (e.g. /global/en-GB) from the path
+                        const pwaPath = location.pathname.replace(
+                            /^\/[^/]+\/[^/]+\//,
+                            '/'
+                        )
+                        const isLocalhost = window.location.hostname === 'localhost'
+                        const target =
+                            sfccOrigin && !isLocalhost
+                                ? `${sfccOrigin}/s/${siteId}${pwaPath}`
+                                : `/s/${siteId}${pwaPath}`
+                        window.location.replace(target)
+                        return
+                    }
+                    const newURL = new URL(window.location)
+                    if (!urlParams.has('redirected')) {
+                        newURL.searchParams.append('redirected', '1')
+                        window.location.href = newURL
+                    }
+                }, [window.location.href])
+
+                if (urlParams.has('redirected')) {
+                    return <PageNotFound {...props} />
+                }
+                return null
+            })
+        }
+    ]
 }

packages/template-retail-react-app/app/ssr.js

@@ -51,7 +51,7 @@ const options = {
     // Set this to false if using a SLAS public client
     // When setting this to true, make sure to also set the PWA_KIT_SLAS_CLIENT_SECRET
     // environment variable as this endpoint will return HTTP 501 if it is not set
-    useSLASPrivateClient: false,
+    useSLASPrivateClient: true,
 
     // If you wish to use additional SLAS endpoints that require private clients,
     // customize this regex to include the additional endpoints the custom SLAS
@@ -79,7 +79,7 @@ const options = {
     // HYBRID PROXY REQUIREMENT:
     // - Hybrid Proxy requires this to be 'true' for SFCC session management to work properly
     // - Only enable Hybrid Proxy in development environments, never in production
-    localAllowCookies: false,
+    localAllowCookies: true,
 
     // Hybrid Proxy configuration for local development and MRT to ODS connection testing.
     //
@@ -94,10 +94,14 @@ const options = {
         // If this is enabled, the Hybrid Proxy will be enabled to proxy requests to the SFCC instance.
         // IMPORTANT: This should only be used for local development. For production, this should be disabled and use eCDN to direct requests to the SFCC instance.
         // Refer to https://developer.salesforce.com/docs/commerce/commerce-api/guide/hybrid-authentication.html for more details.
-        enabled: false,
+        enabled: true,
 
         // The origin of the SFCC instance (i.e. the instance that is being proxied to which hosts the storefront).
-        sfccOrigin: 'https://zzrf-001.dx.commercecloud.salesforce.com',
+        // Use the direct demandware.net hostname here (not the CDN/eCDN hostname) so the proxy
+        // can reach SFCC server-to-server without hitting Cloudflare Zero Trust.
+        // The Location-header rewriter in hybrid-proxy.js handles redirects to any hostname
+        // (including the CDN hostname tbdq-stg.cc-bm-dev.net) by rewriting them back through the proxy.
+        sfccOrigin: 'https://staging-realm26-qa223.demandware.net',
 
         // The MRT rules to apply to the hybrid proxy.
         // These rules determine which requests are handled by PWA Kit (MRT) vs proxied to SFCC. The same rules should be used in the eCDN rules for the same requests.

packages/template-retail-react-app/config/default.js

@@ -48,10 +48,13 @@ module.exports = {
                 landingPath: '/reset-password-landing'
             },
             passkey: {
-                enabled: false,
-                callbackURI: process.env.PASSKEY_CALLBACK_URI
+                enabled: true,
+                mode: 'callback',
+                callbackURI: 'https://webhook.site/1b592264-a9b1-4d75-a892-cf68fed334f1'
             }
         },
+        enableHybrid: true,
+        sfccOrigin: 'https://staging-realm26-qa223.demandware.net',
         defaultSite: 'RefArchGlobal',
         siteAliases: {
             RefArch: 'us',
@@ -61,9 +64,9 @@ module.exports = {
         commerceAPI: {
             proxyPath: `/mobify/proxy/api`,
             parameters: {
-                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
-                organizationId: 'f_ecom_zzrf_001',
-                shortCode: '8o7m175y',
+                clientId: '472f318c-8628-4b8d-81cf-b48c2352e9e5',
+                organizationId: 'f_ecom_tbdq_stg',
+                shortCode: 'sandbox-001',
                 siteId: 'RefArchGlobal'
             }
         },
@@ -111,10 +114,19 @@ module.exports = {
     ssrParameters: {
         ssrFunctionNodeVersion: '24.x',
         proxyConfigs: [
+            // {
+            //     host: 'kv7kzm78.api.commercecloud.salesforce.com',
+            //     path: 'api'
+            // },
+            // For bjmk_dev, tbdq_stg
             {
-                host: 'kv7kzm78.api.commercecloud.salesforce.com',
+                host: 'sandbox-001.api.commercecloud.salesforce.com',
                 path: 'api'
             },
+            {
+                host: 'staging-realm26-qa223.demandware.net',
+                path: 'dwrestatic'
+            },
             {
                 host: 'zzrf-001.dx.commercecloud.salesforce.com',
                 path: 'ocapi'