Implement passkey login hook and call it when the contact-info component renders

Author: hajinsuha1

packages/commerce-sdk-react/src/auth/index.ts

@@ -1532,12 +1532,14 @@ class Auth {
                 // Required params
                 client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId,
                 channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
-                user_id: parameters.user_id,
                 // Optional params
+                ...(parameters.user_id && {user_id: parameters.user_id}),
                 ...(parameters.tenant_id && {tenant_id: parameters.tenant_id})
             }
         }
 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TODO: user_id is optional, but commerce-sdk-isomorphic expects it to be required. Remove this comment after commerce-sdk-isomorphic is updated.
         return await slasClient.startWebauthnAuthentication(options)
     }
 

packages/template-retail-react-app/app/hooks/use-passkey-login.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
+
+/**
+ * This hook provides commerce-react-sdk hooks to simplify the passkey login flow.
+ */
+export const usePasskeyLogin = () => {
+    const startWebauthnAuthentication = useAuthHelper(AuthHelpers.StartWebauthnAuthentication)
+    const startPasskeyLogin = async () => {
+        const config = getConfig()
+
+        // Check if passkey is enabled in config
+        if (!config?.app?.login?.passkey?.enabled) {
+            return
+        }
+
+        // Availability of window.PublicKeyCredential means WebAuthn is usable
+        if (
+            !window.PublicKeyCredential ||
+            !window.PublicKeyCredential.isConditionalMediationAvailable
+        ) {
+            return
+        }
+
+        // Check if conditional mediation is available. Conditional mediation is a feature
+        // that allows the browser to prompt the user for a password only if the user has
+        // not already authenticated with the same device in the current session.
+        const isCMA = await window.PublicKeyCredential.isConditionalMediationAvailable()
+        if (!isCMA) {
+            return
+        }
+
+        try {
+            const startResponse = await startWebauthnAuthentication.mutateAsync({})
+            console.log('startResponse ->', startResponse)
+            return startResponse
+        } catch (error) {
+            console.error('Error starting passkey authentication:', error)
+        }
+    }
+
+    return {startPasskeyLogin}
+}

packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx

@@ -46,6 +46,7 @@ import {useAppOrigin} from '@salesforce/retail-react-app/app/hooks/use-app-origi
 import {AuthHelpers, useAuthHelper, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import {
     API_ERROR_MESSAGE,
     FEATURE_UNAVAILABLE_ERROR_MESSAGE,
@@ -63,6 +64,7 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const updateCustomerForBasket = useShopperBasketsMutation('updateCustomerForBasket')
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
+    const {startPasskeyLogin} = usePasskeyLogin()
 
     const {step, STEPS, goToStep, goToNextStep} = useCheckout()
 
@@ -79,7 +81,8 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
 
     const [authModalView, setAuthModalView] = useState(PASSWORD_VIEW)
     const authModal = useAuthModal(authModalView)
-    const passwordlessConfigCallback = getConfig().app.login?.passwordless?.callbackURI
+    const config = getConfig()
+    const passwordlessConfigCallback = config.app.login?.passwordless?.callbackURI
     const callbackURL = isAbsoluteURL(passwordlessConfigCallback)
         ? passwordlessConfigCallback
         : `${appOrigin}${getEnvBasePath()}${passwordlessConfigCallback}`
@@ -157,6 +160,10 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         }
     }, [showPasswordField])
 
+    useEffect(() => {
+        startPasskeyLogin()
+    }, [])
+
     const onPasswordlessLoginClick = async (e) => {
         const isValid = await form.trigger('email')
         const domForm = e.target.closest('form')