Merge branch 'feature/webauthn-login' into W-20224220-passkey-in-auth-modal

Signed-off-by: jeremy-jung1 <140001271+jeremy-jung1@users.noreply.github.com>

Author: jeremy-jung1

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

@@ -1400,6 +1400,7 @@ class Auth {
         if (authHeader) {
             options.headers.Authorization = authHeader
         }
+
         const res = await this.client.resetPassword(options)
         return res
     }

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx

@@ -32,6 +32,7 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
 
 // Utils
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {arrayBufferToBase64Url} from '@salesforce/retail-react-app/app/utils/utils'
 
 // SDK
 import {AuthHelpers, useAuthHelper} from '@salesforce/commerce-sdk-react'
@@ -84,19 +85,6 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
         }
     }
 
-    /**
-     * Convert ArrayBuffer to base64url string
-     */
-    const arrayBufferToBase64Url = (buffer) => {
-        const bytes = new Uint8Array(buffer)
-        let binary = ''
-        for (let i = 0; i < bytes.length; i++) {
-            binary += String.fromCharCode(bytes[i])
-        }
-        const base64 = btoa(binary)
-        return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-    }
-
     const handleOtpVerification = async (code) => {
         setIsLoading(true)
         setError(null)

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

@@ -1,12 +1,12 @@
 /*
- * Copyright (c) 2024, Salesforce, Inc.
+ * Copyright (c) 2026, 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, useUsid} from '@salesforce/commerce-sdk-react'
-import {encode as base64Encode} from 'base64-arraybuffer'
+import {arrayBufferToBase64Url} from '@salesforce/retail-react-app/app/utils/utils'
 
 /**
  * This hook provides commerce-react-sdk hooks to simplify the passkey login flow.
@@ -16,12 +16,6 @@ export const usePasskeyLogin = () => {
     const finishWebauthnAuthentication = useAuthHelper(AuthHelpers.FinishWebauthnAuthentication)
     const {usid} = useUsid()
 
-    const uint8arrayToBase64url = (input) => {
-        const uint8array = new Uint8Array(input)
-        const base64 = base64Encode(uint8array.buffer)
-        return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-    }
-
     const loginWithPasskey = async () => {
         const config = getConfig()
 
@@ -83,14 +77,16 @@ export const usePasskeyLogin = () => {
             // In this case, we manually encode the credential.
             encodedCredential = {
                 id: credential.id,
-                rawId: uint8arrayToBase64url(credential.rawId),
+                rawId: arrayBufferToBase64Url(credential.rawId),
                 type: credential.type,
                 clientExtensionResults: credential.getClientExtensionResults(),
                 response: {
-                    authenticatorData: uint8arrayToBase64url(credential.response.authenticatorData),
-                    clientDataJSON: uint8arrayToBase64url(credential.response.clientDataJSON),
-                    signature: uint8arrayToBase64url(credential.response.signature),
-                    userHandle: uint8arrayToBase64url(credential.response.userHandle)
+                    authenticatorData: arrayBufferToBase64Url(
+                        credential.response.authenticatorData
+                    ),
+                    clientDataJSON: arrayBufferToBase64Url(credential.response.clientDataJSON),
+                    signature: arrayBufferToBase64Url(credential.response.signature),
+                    userHandle: arrayBufferToBase64Url(credential.response.userHandle)
                 }
             }
         }

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2024, salesforce.com, inc.
+ * Copyright (c) 2026, salesforce.com, 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

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

@@ -43,9 +43,13 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {AuthHelpers, useAuthHelper, useShopperBasketsMutation} from '@salesforce/commerce-sdk-react'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {absoluteUrl} from '@salesforce/retail-react-app/app/utils/url'
-import {getPasswordlessErrorMessage} from '@salesforce/retail-react-app/app/utils/auth-utils'
-import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+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,
+    PASSWORDLESS_ERROR_MESSAGES
+} from '@salesforce/retail-react-app/app/constants'
 
 const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, idps = []}) => {
     const {formatMessage} = useIntl()
@@ -75,10 +79,11 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
 
     const [authModalView, setAuthModalView] = useState(PASSWORD_VIEW)
     const authModal = useAuthModal(authModalView)
-    const passwordlessConfig = getConfig().app.login?.passwordless
-    const passwordlessConfigMode = passwordlessConfig?.mode
-    const passwordlessConfigCallback = passwordlessConfig?.callbackURI
-    const callbackURL = absoluteUrl(passwordlessConfigCallback)
+    const config = getConfig()
+    const passwordlessConfigCallback = config.app.login?.passwordless?.callbackURI
+    const callbackURL = isAbsoluteURL(passwordlessConfigCallback)
+        ? passwordlessConfigCallback
+        : `${appOrigin}${getEnvBasePath()}${passwordlessConfigCallback}`
 
     const handlePasswordlessLogin = async (email) => {
         try {

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

@@ -57,19 +57,26 @@ jest.mock('@salesforce/retail-react-app/app/hooks/use-current-basket', () => {
     }
 })
 
-jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
-    getConfig: jest.fn()
-}))
+const mockLoginWithPasskey = jest.fn().mockResolvedValue(undefined)
 
-beforeEach(() => {
-    getConfig.mockImplementation(() => mockConfig)
-    global.server.use(
-        rest.post('*/oauth2/login', (req, res, ctx) => {
-            return res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
-        })
-    )
+jest.mock('@salesforce/retail-react-app/app/hooks/use-passkey-login', () => {
+    return {
+        __esModule: true,
+        usePasskeyLogin: jest.fn(() => ({
+            loginWithPasskey: mockLoginWithPasskey
+        }))
+    }
 })
 
+const mockUseCurrentCustomer = jest.fn(() => ({
+    data: {
+        isRegistered: false
+    }
+}))
+jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
+    useCurrentCustomer: () => mockUseCurrentCustomer()
+}))
+
 afterEach(() => {
     jest.resetModules()
     jest.restoreAllMocks()

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

@@ -6,6 +6,7 @@
  */
 
 import {getEnvBasePath} from '@salesforce/pwa-kit-runtime/utils/ssr-namespace-paths'
+import {encode as base64Encode} from 'base64-arraybuffer'
 
 /**
  * Call requestIdleCallback in supported browsers.
@@ -222,3 +223,16 @@ export const buildRedirectURI = (appOrigin = '', redirectPath = '') => {
         return ''
     }
 }
+
+/**
+ * Converts an ArrayBuffer or Uint8Array to a base64url-encoded string.
+ * Base64url encoding is URL-safe (uses '-' and '_' instead of '+' and '/', and omits padding).
+ *
+ * @param {ArrayBuffer|Uint8Array} input - The buffer to encode
+ * @returns {string} Base64url-encoded string
+ */
+export const arrayBufferToBase64Url = (input) => {
+    const uint8array = new Uint8Array(input)
+    const base64 = base64Encode(uint8array.buffer)
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+}

packages/template-retail-react-app/app/utils/utils.test.js

@@ -203,3 +203,39 @@ describe('buildRedirectURI', function () {
         expect(result).toBe('')
     })
 })
+
+describe('arrayBufferToBase64Url', () => {
+    test.each([
+        ['empty ArrayBuffer', new ArrayBuffer(0), ''],
+        ['single byte', new Uint8Array([65]).buffer, 'QQ'],
+        ['multiple bytes', new Uint8Array([72, 101, 108, 108, 111]).buffer, 'SGVsbG8'],
+        ['bytes with padding', new Uint8Array([77, 97, 110]).buffer, 'TWFu'],
+        ['binary data', new Uint8Array([0, 1, 2, 255, 254, 253]).buffer, 'AAEC__79']
+    ])('converts %s to base64url', (_, input, expected) => {
+        const result = utils.arrayBufferToBase64Url(input)
+        expect(result).toBe(expected)
+    })
+
+    test.each([
+        ['Uint8Array', new Uint8Array([72, 101, 108, 108, 111])],
+        ['ArrayBuffer', new Uint8Array([72, 101, 108, 108, 111]).buffer]
+    ])('accepts %s input type', (_, input) => {
+        const result = utils.arrayBufferToBase64Url(input)
+        expect(result).toBe('SGVsbG8')
+    })
+
+    test('produces URL-safe base64 (no +, /, or = characters)', () => {
+        // Use data that would produce +, /, or = in standard base64
+        const input = new Uint8Array([251, 239, 191]) // Produces base64 with + and /
+        const result = utils.arrayBufferToBase64Url(input)
+        expect(result).not.toMatch(/[+/=]/)
+        expect(result).toMatch(/^[A-Za-z0-9_-]*$/)
+    })
+
+    test('handles large buffers', () => {
+        const largeArray = new Uint8Array(1000).fill(65) // 1000 'A' characters
+        const result = utils.arrayBufferToBase64Url(largeArray)
+        expect(result.length).toBeGreaterThan(0)
+        expect(result).not.toMatch(/[+/=]/)
+    })
+})