configuration to test passkey with hybrid auth

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

@@ -12,9 +12,10 @@
 // we don't want it to count toward coverage until we figure out how to cover the `functions`
 // metric for this file in its test.
 
-import React from 'react'
+import React, {useEffect} from 'react'
 import loadable from '@loadable/component'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {withRouter} from 'react-router-dom'
 
 // Components
 import {Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
@@ -30,15 +31,6 @@ const Registration = loadable(() => import('./pages/registration'), {
 })
 const ResetPassword = loadable(() => import('./pages/reset-password'), {fallback})
 const Account = loadable(() => import('./pages/account'), {fallback})
-const Cart = loadable(() => import('./pages/cart'), {fallback})
-const Checkout = loadable(() => import('./pages/checkout'), {
-    fallback
-})
-const CheckoutOneClick = loadable(() => import('./pages/checkout-one-click'), {
-    fallback
-})
-const CheckoutConfirmation = loadable(() => import('./pages/confirmation'), {fallback})
-const SocialLoginRedirect = loadable(() => import('./pages/social-login-redirect'), {fallback})
 const LoginRedirect = loadable(() => import('./pages/login-redirect'), {fallback})
 const ProductDetail = loadable(() => import('./pages/product-detail'), {fallback})
 const ProductList = loadable(() => import('./pages/product-list'), {
@@ -58,6 +50,11 @@ export const routes = [
         component: Home,
         exact: true
     },
+    {
+        path: '/home',
+        component: Home,
+        exact: true
+    },
     {
         path: '/login',
         component: Login,
@@ -77,28 +74,11 @@ export const routes = [
         path: '/account',
         component: Account
     },
-    {
-        path: '/checkout',
-        component: (props) => {
-            const enabled = getConfig()?.app?.oneClickCheckout?.enabled
-            return enabled ? <CheckoutOneClick {...props} /> : <Checkout {...props} />
-        },
-        exact: true
-    },
-    {
-        path: '/checkout/confirmation/:orderNo',
-        component: CheckoutConfirmation
-    },
     {
         path: '/callback',
         component: LoginRedirect,
         exact: true
     },
-    {
-        path: '/cart',
-        component: Cart,
-        exact: true
-    },
     {
         path: '/product/:productId',
         component: ProductDetail
@@ -118,44 +98,31 @@ export const routes = [
     {
         path: '/store-locator',
         component: StoreLocator
+    },
+    {
+        path: '*',
+        component: withRouter((props) => {
+            const {location} = props
+            const urlParams = new URLSearchParams(location.search)
+
+            useEffect(() => {
+                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
+        })
     }
 ]
 
 export default () => {
     const config = getConfig()
-    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
-
-    // Add dynamic routes conditionally (only if features are enabled and paths are defined)
-    const dynamicRoutes = [
-        resetPasswordLandingPath && {
-            path: resetPasswordLandingPath,
-            component: ResetPassword,
-            exact: true
-        },
-        passwordlessLoginEnabled &&
-            passwordlessLoginLandingPath && {
-                path: passwordlessLoginLandingPath,
-                component: Login,
-                exact: true
-            },
-        socialLoginEnabled &&
-            socialRedirectURI && {
-                path: socialRedirectURI,
-                component: SocialLoginRedirect,
-                exact: true
-            }
-    ].filter(Boolean)
-
-    const allRoutes = configureRoutes([...routes, ...dynamicRoutes], config, {
-        ignoredRoutes: ['/callback'],
-        fuzzyPathMatching: true
+    return configureRoutes(routes, config, {
+        ignoredRoutes: ['/callback', '*']
     })
-
-    // Add catch-all route at the end so it doesn't match before dynamic routes
-    return [...allRoutes, {path: '*', component: PageNotFound}]
 }

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

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

@@ -48,23 +48,26 @@ 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'
             }
         },
-        defaultSite: 'RefArchGlobal',
-        siteAliases: {
-            RefArch: 'us',
-            RefArchGlobal: 'global'
-        },
+        defaultSite: 'RefArch',
+        // Provide aliases for your sites. These will be used in place of your site id when generating paths throughout the application.
+        // siteAliases: {
+        //    RefArch: 'us',
+        //    RefArchGlobal: 'global'
+        // },
+        // The sites for your app, which is imported from sites.js
         sites,
         commerceAPI: {
-            proxyPath: `/mobify/proxy/api`,
+            proxyPath: '/mobify/proxy/api',
             parameters: {
-                clientId: 'c9c45bfd-0ed3-4aa2-9971-40f88962b836',
-                organizationId: 'f_ecom_zzrf_001',
-                shortCode: '8o7m175y',
-                siteId: 'RefArchGlobal'
+                clientId: 'c8dd028e-e65e-4654-9a2d-4b471d0ae694',
+                organizationId: 'f_ecom_tbdq_stg',
+                shortCode: 'sandbox-001',
+                siteId: 'RefArch'
             }
         },
         einsteinAPI: {
@@ -109,14 +112,14 @@ module.exports = {
         '**/*.json'
     ],
     ssrParameters: {
-        ssrFunctionNodeVersion: '24.x',
+        ssrFunctionNodeVersion: '22.x',
         proxyConfigs: [
             {
-                host: 'kv7kzm78.api.commercecloud.salesforce.com',
+                host: 'sandbox-001.api.commercecloud.salesforce.com',
                 path: 'api'
             },
             {
-                host: 'zzrf-001.dx.commercecloud.salesforce.com',
+                host: 'ha-stg.phased-launch-testing.com',
                 path: 'ocapi'
             }
         ]