Refactor passkey registration handling in AuthModal and related components; replace showToast with showRegisterPasskeyToast for improved clarity and functionality. Update tests to validate passkey registration toast display after successful login, ensuring proper configuration checks and UI rendering.

Author: hajinsuha1

packages/template-retail-react-app/app/hooks/use-auth-modal.js

@@ -90,7 +90,6 @@ export const AuthModal = ({
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const register = useAuthHelper(AuthHelpers.Register)
     const {locale} = useMultiSite()
-    const config = getConfig()
 
     const {getPasswordResetToken} = usePasswordReset()
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
@@ -105,7 +104,7 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
-    const {showToast} = usePasskeyRegistration()
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
 
     const handlePasswordlessLogin = async (email) => {
         try {
@@ -281,23 +280,8 @@ export const AuthModal = ({
         onClose()
         setIsOtpAuthOpen(false)
 
-        if (config?.app?.login?.passkey?.enabled) {
-            // Show passkey registration modal only if Webauthn feature flag is enabled and compatible with the browser
-            if (
-                window.PublicKeyCredential &&
-                window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&
-                window.PublicKeyCredential.isConditionalMediationAvailable
-            ) {
-                Promise.all([
-                    window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
-                    window.PublicKeyCredential.isConditionalMediationAvailable()
-                ]).then((results) => {
-                    if (results.every((r) => r === true)) {
-                        showToast()
-                    }
-                })
-            }
-        }
+        // Show passkey registration prompt if supported
+        showRegisterPasskeyToast()
 
         // Show a toast only for those registed users returning to the site.
         // Only show toast when customer data is available (user is logged in and data is loaded)
@@ -431,7 +415,7 @@ AuthModal.propTypes = {
  */
 export const useAuthModal = (initialView = LOGIN_VIEW) => {
     const {isOpen, onOpen, onClose} = useDisclosure()
-    const {passwordless = {}, social = {}, passkey = {}} = getConfig().app.login || {}
+    const {passwordless = {}, social = {}} = getConfig().app.login || {}
 
     return {
         initialView,

packages/template-retail-react-app/app/hooks/use-auth-modal.test.js

@@ -922,6 +922,74 @@ describe('Passkey login', () => {
             expect(screen.queryByText(/Welcome back/i)).not.toBeInTheDocument()
         })
     })
+
+    describe('Passkey Registration', () => {
+        beforeEach(() => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {enabled: true}
+                    }
+                }
+            })
+
+            // Mock WebAuthn API
+            global.PublicKeyCredential = {
+                isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+                isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+            }
+            global.window.PublicKeyCredential = global.PublicKeyCredential
+
+            global.server.use(
+                rest.post('*/oauth2/token', (req, res, ctx) =>
+                    res(
+                        ctx.delay(0),
+                        ctx.json({
+                            customer_id: 'registeredCustomerId',
+                            access_token: registerUserToken,
+                            refresh_token: 'testrefeshtoken',
+                            usid: 'testusid',
+                            enc_user_id: 'testEncUserId',
+                            id_token: 'testIdToken'
+                        })
+                    )
+                )
+            )
+        })
+
+        afterEach(() => {
+            delete global.PublicKeyCredential
+            delete global.window.PublicKeyCredential
+        })
+
+        test('shows passkey registration toast after login', async () => {
+            const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
+            const validEmail = 'test@salesforce.com'
+            const validPassword = 'Password123!'
+
+            const trigger = screen.getByText(/open modal/i)
+            await user.click(trigger)
+
+            await waitFor(() => {
+                expect(screen.getByText(/Continue/i)).toBeInTheDocument()
+            })
+
+            await user.type(screen.getByLabelText('Email'), validEmail)
+            await user.click(screen.getByText(/password/i))
+            await user.type(screen.getByLabelText('Password'), validPassword)
+            await user.keyboard('{Enter}')
+
+            // Create passkey toast is shown after login
+            await waitFor(() => {
+                // 2 matches are found for the toast
+                const toasts = screen.getAllByText(/Create Passkey/i)
+                expect(toasts.length).toBeGreaterThanOrEqual(1)
+            })
+        })
+    })
 })
 
 describe('Reset password', function () {

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

@@ -33,7 +33,7 @@ export const usePasskeyLogin = () => {
         }
 
         // Check if conditional mediation is available. Conditional mediation is a feature of the WebAuthn API that allows passkeys to appear in the browser's standard autofill suggestions, alongside saved passwords. This allows users to sign in with a passkey using the standard username input field, rather than clicking a dedicated passkey login button.
-        // https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/isConditionalMediationAvailable
+        // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable_static
         const isCMA = await window.PublicKeyCredential.isConditionalMediationAvailable()
         if (!isCMA) {
             return

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

@@ -14,17 +14,47 @@ import {
     useToast
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {usePasskeyRegistrationContext} from '@salesforce/retail-react-app/app/contexts/passkey-registration-provider'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 /**
  * Custom hook to manage passkey registration prompt (toast and modal)
- * @returns {Object} Object containing showToast function and passkey modal state
+ * @returns {Object} Object containing showToast and passkey modal state
  */
 export const usePasskeyRegistration = () => {
     const toast = useToast()
     const {passkeyModal} = usePasskeyRegistrationContext()
     const {formatMessage} = useIntl()
 
-    const showToast = () => {
+    /**
+     * Shows the passkey registration toast only if passkey is enabled and the browser
+     * supports WebAuthn (platform authenticator and conditional mediation).
+     * Returns a Promise that resolves when the check (and optional toast) is complete.
+     * @returns {Promise<void>}
+     */
+    const showRegisterPasskeyToast = async () => {
+        const config = getConfig()
+
+        // Check if passkey is enabled in config
+        if (!config?.app?.login?.passkey?.enabled) return
+
+        // Check if the browser supports user verifying platform authenticator and conditional mediation
+        // User verifying platform authenticator is a feature of the WebAuthn API that allows the browser to use a platform authenticator to verify the user's identity.
+        // Conditional mediation is a feature of the WebAuthn API that allows passkeys to appear in the browser's standard autofill suggestions, alongside saved passwords. This allows users to sign in with a passkey using the standard username input field, rather than clicking a dedicated passkey login button.
+        // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isUserVerifyingPlatformAuthenticatorAvailable_static
+        // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/isConditionalMediationAvailable_static
+        if (
+            !window.PublicKeyCredential?.isUserVerifyingPlatformAuthenticatorAvailable ||
+            !window.PublicKeyCredential?.isConditionalMediationAvailable
+        ) {
+            return
+        }
+
+        const [platformAvailable, conditionalAvailable] = await Promise.all([
+            window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
+            window.PublicKeyCredential.isConditionalMediationAvailable()
+        ])
+        if (!platformAvailable || !conditionalAvailable) return
+
         toast({
             position: 'top-right',
             duration: 9000,
@@ -75,7 +105,7 @@ export const usePasskeyRegistration = () => {
     }
 
     return {
-        showToast,
+        showRegisterPasskeyToast,
         passkeyModal
     }
 }