diff --git a/e2e/scripts/pageHelpers.js b/e2e/scripts/pageHelpers.js
index 1269e427e0..3bcec94e73 100644
--- a/e2e/scripts/pageHelpers.js
+++ b/e2e/scripts/pageHelpers.js
@@ -7,6 +7,7 @@
 const {expect} = require('@playwright/test')
 const config = require('../config')
 const {getCreditCardExpiry, runAccessibilityTest} = require('../scripts/utils.js')
+const crypto = require('crypto')
 /**
  * Note: As a best practice, we should await the network call and assert on the network response rather than waiting for pageLoadState()
  * to avoid race conditions from lock in pageLoadState being released before network call resolves.
@@ -791,3 +792,85 @@ export const selectStoreFromPLP = async ({page}) => {
         await page.getByRole('button', {name: 'Close'}).click()
     }
 }
+
+/**
+ * Validates that a passkey login request is made to the /webAuthn/authenticate/finish endpoint.
+ * We can't register an actual passkey in the E2E environment because registration requires a token verification.
+ * Instead,we add a mock credential to the virtual authenticator to bypass the registration flow and verify the
+ * request to the /webAuthn/authenticate/finish endpoint.
+ *
+ * @param {Object} options.page - Playwright page object representing a browser tab/window
+ */
+export const validatePasskeyLogin = async ({page}) => {
+    // Start a CDP session to interact with WebAuthn
+    const client = await page.context().newCDPSession(page)
+    await client.send('WebAuthn.enable')
+    // Create a virtual authenticator to simulate a hardware authenticator for testing
+    const {authenticatorId} = await client.send('WebAuthn.addVirtualAuthenticator', {
+        options: {
+            protocol: 'ctap2',
+            transport: 'internal',
+            hasResidentKey: true,
+            hasUserVerification: true,
+            isUserVerified: true,
+            // Enabling automaticPresenceSimulation automatically completes the device's passkey prompt without user interaction
+            automaticPresenceSimulation: true
+        }
+    })
+
+    // Preload mock credential into the virtual authenticator
+    const rpId = new URL(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME).hostname
+    // Generate a valid EC key pair for WebAuthn (ES256/P-256)
+    const {privateKey} = crypto.generateKeyPairSync('ec', {namedCurve: 'P-256'})
+    const privateKeyBase64 = privateKey.export({format: 'der', type: 'pkcs8'}).toString('base64')
+
+    console.log('privateKeyBase64', privateKeyBase64)
+    const credentialIdBuffer = Buffer.from('mock-credential-id-' + Date.now())
+    const credentialIdBase64 = credentialIdBuffer.toString('base64') // For mock credential
+    const credentialId = credentialIdBuffer.toString('base64url') // For verifying the request
+    await client.send('WebAuthn.addCredential', {
+        authenticatorId,
+        credential: {
+            credentialId: credentialIdBase64,
+            isResidentCredential: true,
+            rpId,
+            privateKey: privateKeyBase64,
+            userHandle: Buffer.from('test-user-handle').toString('base64'),
+            signCount: 0,
+            transports: ['internal']
+        }
+    })
+
+    let interceptedRequest = null
+
+    // Intercept the WebAuthn authenticate/finish endpoint to verify the request
+    await page.route(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/webauthn/authenticate/finish',
+        (route) => {
+            interceptedRequest = route.request()
+            route.continue()
+        }
+    )
+
+    await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
+
+    // Wait for the WebAuthn authenticate/finish request
+    await page.waitForResponse(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/webauthn/authenticate/finish'
+    )
+
+    // Verify the /webAuthn/authenticate/finish request
+    expect(interceptedRequest).toBeTruthy()
+    expect(interceptedRequest.method()).toBe('POST')
+    const postData = interceptedRequest.postData()
+    expect(postData).toBeTruthy()
+    const requestBody = JSON.parse(postData)
+    expect(requestBody).toBeTruthy()
+
+    // Verify the request body structure matches expected format
+    expect(requestBody.client_id).toBeTruthy()
+    expect(requestBody.channel_id).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+    expect(requestBody.credential.id).toBe(credentialId)
+    expect(requestBody.credential.clientExtensionResults).toBeTruthy()
+    expect(requestBody.credential.response).toBeTruthy()
+}
diff --git a/e2e/tests/desktop/extra-features.spec.js b/e2e/tests/desktop/extra-features.spec.js
index b6f7b1e993..c8928f7066 100644
--- a/e2e/tests/desktop/extra-features.spec.js
+++ b/e2e/tests/desktop/extra-features.spec.js
@@ -5,192 +5,209 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-const {test, expect} = require('@playwright/test')
+const {test, expect, describe} = require('@playwright/test')
 const config = require('../../config.js')
 const {generateUserCredentials} = require('../../scripts/utils.js')
-const {answerConsentTrackingForm} = require('../../scripts/pageHelpers.js')
+const {answerConsentTrackingForm, validatePasskeyLogin} = require('../../scripts/pageHelpers.js')
 
 const GUEST_USER_CREDENTIALS = generateUserCredentials()
-/**
- * Test that a user can login with passwordless login on mobile. There is no programmatic way to check the email,
- * so we will check that the necessary API call is being made and expected UI is shown
- */
-test('Verify passwordless login request', async ({page}) => {
-    let interceptedRequest = null
-
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
-
-    await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
-
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-
-    await page.getByRole('button', {name: 'Continue'}).click()
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
-    )
-
-    // Verify the passwordless login request
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-
-    let postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
-
-    let params = new URLSearchParams(postData)
-
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
 
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
-
-    // Wait for OTP input fields to appear and fill the 8-digit code
-    const otpCode = '12345678' // Replace with actual OTP code
-    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
-    await otpInputs.first().waitFor()
-
-    // Fill each input field with one digit
-    for (let i = 0; i < 8; i++) {
-        await otpInputs.nth(i).fill(otpCode[i])
-    }
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
-    )
-
-    // Verify the passwordless login token request
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-    postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
-    params = new URLSearchParams(postData)
-    expect(params.get('pwdless_login_token')).toBe(otpCode)
-    expect(params.get('hint')).toBe('pwdless_login')
+describe('Passkey Login', () => {
+    test('Verify passkey login', async ({page}) => {
+        // Override the global test timeout to 70s to ensure the test can complete
+        test.setTimeout(70000)
+        // webauthn/authenticate/start has a 60s cooldown; wait 1 min to ensure it can be called again
+        await page.waitForTimeout(60000)
+        await validatePasskeyLogin({page})
+    })
 })
 
-test('Verify password reset request', async ({page}) => {
-    let interceptedRequest = null
-
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
+describe('Passwordless login', () => {
+    /**
+     * Test that a user can login with passwordless login. There is no programmatic way to check the email,
+     * so we will check that the necessary API call is being made and expected UI is shown
+     */
+    test('Verify passwordless login request', async ({page}) => {
+        let interceptedRequest = null
+
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
+
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+
+        await page.getByRole('button', {name: 'Continue'}).click()
+
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
+        )
+
+        // Verify the passwordless login request
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+
+        let postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+
+        let params = new URLSearchParams(postData)
+
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        // Wait for OTP input fields to appear and fill the 8-digit code
+        const otpCode = '12345678' // Replace with actual OTP code
+        const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+        await otpInputs.first().waitFor()
+
+        // Fill each input field with one digit
+        for (let i = 0; i < 8; i++) {
+            await otpInputs.nth(i).fill(otpCode[i])
         }
-    )
-
-    await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
-
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-
-    await page.getByRole('button', {name: 'Password'}).click()
-    await page.getByRole('button', {name: 'Forgot password?'}).click()
-
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-    await page.getByRole('button', {name: 'Reset Password'}).click()
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset'
-    )
-
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-
-    const postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
-
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
-    expect(params.get('hint')).toBe('cross_device')
-})
-
-// Verify on the login UI that looks different when extra login features are not enabled
-test('Verify password reset request when extra login features are not enabled', async ({page}) => {
-    let interceptedRequest = null
-
-    await page.route(
-        '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
-
-    await page.goto(config.RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
-
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-
-    await page.getByRole('button', {name: 'Forgot password?'}).click()
-
-    await page.waitForSelector('form[data-testid="sf-auth-modal-form"] >> text=Reset Password')
-    await page.fill('form[data-testid="sf-auth-modal-form"] #email', config.PWA_E2E_USER_EMAIL)
-    await page.getByRole('button', {name: /reset password/i}).click()
-    await page.waitForResponse(
-        '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset'
-    )
-
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-
-    const postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
-
-    const params = new URLSearchParams(postData)
-
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.RETAIL_APP_HOME_SITE)
-    expect(params.get('hint')).toBe('cross_device')
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+        )
+
+        // Verify the passwordless login token request
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+        postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+        params = new URLSearchParams(postData)
+        expect(params.get('pwdless_login_token')).toBe(otpCode)
+        expect(params.get('hint')).toBe('pwdless_login')
+    })
 })
 
-test('Verify password reset action request', async ({page}) => {
-    let interceptedRequest = null
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
-
-    await page.goto(
-        config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME +
-            `/reset-password-landing?token=1234567&email=${GUEST_USER_CREDENTIALS.email}`
-    )
-    await answerConsentTrackingForm(page)
-
-    await page.fill('#password', GUEST_USER_CREDENTIALS.password)
-    await page.fill('#confirmPassword', GUEST_USER_CREDENTIALS.password)
-
-    expect(await page.inputValue('#password')).toBe(GUEST_USER_CREDENTIALS.password)
-    expect(await page.inputValue('#confirmPassword')).toBe(GUEST_USER_CREDENTIALS.password)
-    await page.getByRole('button', {name: 'Reset Password'}).click()
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action'
-    )
+describe('Password reset', () => {
+    test('Verify password reset request', async ({page}) => {
+        let interceptedRequest = null
+
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
+
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+
+        await page.getByRole('button', {name: 'Password'}).click()
+        await page.getByRole('button', {name: 'Forgot password?'}).click()
+
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+        await page.getByRole('button', {name: 'Reset Password'}).click()
+
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset'
+        )
+
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+
+        const postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+
+        const params = new URLSearchParams(postData)
+
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+        expect(params.get('hint')).toBe('cross_device')
+    })
+
+    // Verify on the login UI that looks different when extra login features are not enabled
+    test('Verify password reset request when extra login features are not enabled', async ({
+        page
+    }) => {
+        let interceptedRequest = null
+
+        await page.route(
+            '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        await page.goto(config.RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
+
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+
+        await page.getByRole('button', {name: 'Forgot password?'}).click()
+
+        await page.waitForSelector('form[data-testid="sf-auth-modal-form"] >> text=Reset Password')
+        await page.fill('form[data-testid="sf-auth-modal-form"] #email', config.PWA_E2E_USER_EMAIL)
+        await page.getByRole('button', {name: /reset password/i}).click()
+        await page.waitForResponse(
+            '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset'
+        )
+
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+
+        const postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+
+        const params = new URLSearchParams(postData)
+
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.RETAIL_APP_HOME_SITE)
+        expect(params.get('hint')).toBe('cross_device')
+    })
+
+    test('Verify password reset action request', async ({page}) => {
+        let interceptedRequest = null
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        await page.goto(
+            config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME +
+                `/reset-password-landing?token=1234567&email=${GUEST_USER_CREDENTIALS.email}`
+        )
+        await answerConsentTrackingForm(page)
+
+        await page.fill('#password', GUEST_USER_CREDENTIALS.password)
+        await page.fill('#confirmPassword', GUEST_USER_CREDENTIALS.password)
+
+        expect(await page.inputValue('#password')).toBe(GUEST_USER_CREDENTIALS.password)
+        expect(await page.inputValue('#confirmPassword')).toBe(GUEST_USER_CREDENTIALS.password)
+        await page.getByRole('button', {name: 'Reset Password'}).click()
+
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action'
+        )
 
-    expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest).toBeTruthy()
+    })
 })
diff --git a/e2e/tests/mobile/extra-features.spec.js b/e2e/tests/mobile/extra-features.spec.js
index e521f9bd4d..29be2e41db 100644
--- a/e2e/tests/mobile/extra-features.spec.js
+++ b/e2e/tests/mobile/extra-features.spec.js
@@ -5,201 +5,215 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-const {test, expect} = require('@playwright/test')
+const {test, expect, describe} = require('@playwright/test')
 const config = require('../../config.js')
 const {generateUserCredentials} = require('../../scripts/utils.js')
-const {answerConsentTrackingForm} = require('../../scripts/pageHelpers.js')
+const {answerConsentTrackingForm, validatePasskeyLogin} = require('../../scripts/pageHelpers.js')
 
 const GUEST_USER_CREDENTIALS = generateUserCredentials()
 
-/**
- * Test that a user can login with passwordless login on mobile. There is no programmatic way to check the email,
- * so we will check that the necessary API call is being made and expected UI is shown
- */
-test('Verify passwordless login request on mobile', async ({page}) => {
-    let interceptedRequest = null
-
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
-
-    await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
-
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-
-    await page.getByRole('button', {name: 'Continue'}).scrollIntoViewIfNeeded()
-    await page.getByRole('button', {name: 'Continue'}).click()
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
-    )
-
-    // Verify the passwordless login request
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-
-    let postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
-
-    let params = new URLSearchParams(postData)
-
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+describe('Passkey Login', () => {
+    test('Verify passkey login', async ({page}) => {
+        // Override the global test timeout to 70s to ensure the test can complete
+        test.setTimeout(70000)
+        // webauthn/authenticate/start has a 60s cooldown; wait 1 min to ensure it can be called again
+        await page.waitForTimeout(60000)
+        await validatePasskeyLogin({page})
+    })
+})
 
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
+describe('Passwordless login', () => {
+    /**
+     * Test that a user can login with passwordless login on mobile. There is no programmatic way to check the email,
+     * so we will check that the necessary API call is being made and expected UI is shown
+     */
+    test('Verify passwordless login request on mobile', async ({page}) => {
+        let interceptedRequest = null
+
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
+
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+
+        await page.getByRole('button', {name: 'Continue'}).scrollIntoViewIfNeeded()
+        await page.getByRole('button', {name: 'Continue'}).click()
+
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
+        )
+
+        // Verify the passwordless login request
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+
+        let postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+
+        let params = new URLSearchParams(postData)
+
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
+
+        // Wait for OTP input fields to appear and fill the 8-digit code
+        const otpCode = '12345678' // Replace with actual OTP code
+        const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+        await otpInputs.first().waitFor()
+
+        // Fill each input field with one digit
+        for (let i = 0; i < 8; i++) {
+            await otpInputs.nth(i).fill(otpCode[i])
         }
-    )
-
-    // Wait for OTP input fields to appear and fill the 8-digit code
-    const otpCode = '12345678' // Replace with actual OTP code
-    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
-    await otpInputs.first().waitFor()
-
-    // Fill each input field with one digit
-    for (let i = 0; i < 8; i++) {
-        await otpInputs.nth(i).fill(otpCode[i])
-    }
-
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
-    )
-
-    // Verify the passwordless login token request
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
-    postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
-    params = new URLSearchParams(postData)
-    expect(params.get('pwdless_login_token')).toBe(otpCode)
-    expect(params.get('hint')).toBe('pwdless_login')
+
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+        )
+
+        // Verify the passwordless login token request
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
+        postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
+        params = new URLSearchParams(postData)
+        expect(params.get('pwdless_login_token')).toBe(otpCode)
+        expect(params.get('hint')).toBe('pwdless_login')
+    })
 })
 
-test('Verify password reset request on mobile (extra features enabled)', async ({page}) => {
-    let interceptedRequest = null
+describe('Password reset', () => {
+    test('Verify password reset request on mobile (extra features enabled)', async ({page}) => {
+        let interceptedRequest = null
 
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
 
-    await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
+        await page.goto(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
 
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
 
-    await page.getByRole('button', {name: 'Password'}).click()
-    await page.getByRole('button', {name: 'Forgot password?'}).click()
+        await page.getByRole('button', {name: 'Password'}).click()
+        await page.getByRole('button', {name: 'Forgot password?'}).click()
 
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
-    await page.getByRole('button', {name: /reset password/i}).click()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+        await page.getByRole('button', {name: /reset password/i}).click()
 
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset'
-    )
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/reset'
+        )
 
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
+        const postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+        const params = new URLSearchParams(postData)
 
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
-    expect(params.get('hint')).toBe('cross_device')
-})
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+        expect(params.get('hint')).toBe('cross_device')
+    })
 
-test('Verify password reset request on mobile when extra login features are not enabled', async ({
-    page
-}) => {
-    let interceptedRequest = null
+    test('Verify password reset request on mobile when extra login features are not enabled', async ({
+        page
+    }) => {
+        let interceptedRequest = null
 
-    await page.route(
-        '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
+        await page.route(
+            '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
 
-    await page.goto(config.RETAIL_APP_HOME + '/login')
-    await answerConsentTrackingForm(page)
+        await page.goto(config.RETAIL_APP_HOME + '/login')
+        await answerConsentTrackingForm(page)
 
-    await page.locator('#email').scrollIntoViewIfNeeded()
-    await page.fill('#email', config.PWA_E2E_USER_EMAIL)
+        await page.locator('#email').scrollIntoViewIfNeeded()
+        await page.fill('#email', config.PWA_E2E_USER_EMAIL)
 
-    await page.getByRole('button', {name: 'Forgot password?'}).click()
+        await page.getByRole('button', {name: 'Forgot password?'}).click()
 
-    await page.waitForSelector('form[data-testid="sf-auth-modal-form"] >> text=Reset Password')
-    await page.fill('form[data-testid="sf-auth-modal-form"] #email', config.PWA_E2E_USER_EMAIL)
-    await page.getByRole('button', {name: /reset password/i}).click()
+        await page.waitForSelector('form[data-testid="sf-auth-modal-form"] >> text=Reset Password')
+        await page.fill('form[data-testid="sf-auth-modal-form"] #email', config.PWA_E2E_USER_EMAIL)
+        await page.getByRole('button', {name: /reset password/i}).click()
 
-    await page.waitForResponse(
-        '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset'
-    )
+        await page.waitForResponse(
+            '**/mobify/proxy/api/shopper/auth/v1/organizations/*/oauth2/password/reset'
+        )
 
-    expect(interceptedRequest).toBeTruthy()
-    expect(interceptedRequest.method()).toBe('POST')
+        expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
-    expect(postData).toBeTruthy()
+        const postData = interceptedRequest.postData()
+        expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+        const params = new URLSearchParams(postData)
 
-    expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
-    expect(params.get('mode')).toBe('email')
-    expect(params.get('channel_id')).toBe(config.RETAIL_APP_HOME_SITE)
-    expect(params.get('hint')).toBe('cross_device')
-})
+        expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
+        expect(params.get('mode')).toBe('email')
+        expect(params.get('channel_id')).toBe(config.RETAIL_APP_HOME_SITE)
+        expect(params.get('hint')).toBe('cross_device')
+    })
 
-test('Verify password reset action request on mobile', async ({page}) => {
-    let interceptedRequest = null
-    await page.route(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action',
-        (route) => {
-            interceptedRequest = route.request()
-            route.continue()
-        }
-    )
+    test('Verify password reset action request on mobile', async ({page}) => {
+        let interceptedRequest = null
+        await page.route(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action',
+            (route) => {
+                interceptedRequest = route.request()
+                route.continue()
+            }
+        )
 
-    await page.goto(
-        config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME +
-            `/reset-password-landing?token=1234567&email=${GUEST_USER_CREDENTIALS.email}`
-    )
-    await answerConsentTrackingForm(page)
+        await page.goto(
+            config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME +
+                `/reset-password-landing?token=1234567&email=${GUEST_USER_CREDENTIALS.email}`
+        )
+        await answerConsentTrackingForm(page)
 
-    await page.locator('#password').scrollIntoViewIfNeeded()
-    await page.fill('#password', GUEST_USER_CREDENTIALS.password)
+        await page.locator('#password').scrollIntoViewIfNeeded()
+        await page.fill('#password', GUEST_USER_CREDENTIALS.password)
 
-    await page.locator('#confirmPassword').scrollIntoViewIfNeeded()
-    await page.fill('#confirmPassword', GUEST_USER_CREDENTIALS.password)
+        await page.locator('#confirmPassword').scrollIntoViewIfNeeded()
+        await page.fill('#confirmPassword', GUEST_USER_CREDENTIALS.password)
 
-    expect(await page.inputValue('#password')).toBe(GUEST_USER_CREDENTIALS.password)
-    expect(await page.inputValue('#confirmPassword')).toBe(GUEST_USER_CREDENTIALS.password)
+        expect(await page.inputValue('#password')).toBe(GUEST_USER_CREDENTIALS.password)
+        expect(await page.inputValue('#confirmPassword')).toBe(GUEST_USER_CREDENTIALS.password)
 
-    await page.getByRole('button', {name: 'Reset Password'}).scrollIntoViewIfNeeded()
-    await page.getByRole('button', {name: 'Reset Password'}).click()
+        await page.getByRole('button', {name: 'Reset Password'}).scrollIntoViewIfNeeded()
+        await page.getByRole('button', {name: 'Reset Password'}).click()
 
-    await page.waitForResponse(
-        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action'
-    )
+        await page.waitForResponse(
+            '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/password/action'
+        )
 
-    expect(interceptedRequest).toBeTruthy()
+        expect(interceptedRequest).toBeTruthy()
+    })
 })
diff --git a/packages/commerce-sdk-react/package-lock.json b/packages/commerce-sdk-react/package-lock.json
index 4495c35674..d2dba8386c 100644
--- a/packages/commerce-sdk-react/package-lock.json
+++ b/packages/commerce-sdk-react/package-lock.json
@@ -9,7 +9,7 @@
       "version": "5.1.0-dev",
       "license": "See license in LICENSE",
       "dependencies": {
-        "commerce-sdk-isomorphic": "5.0.0",
+        "commerce-sdk-isomorphic": "5.0.0-unstable-20260202081607",
         "js-cookie": "^3.0.1",
         "jwt-decode": "^4.0.0"
       },
@@ -920,9 +920,9 @@
       "license": "MIT"
     },
     "node_modules/commerce-sdk-isomorphic": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/commerce-sdk-isomorphic/-/commerce-sdk-isomorphic-5.0.0.tgz",
-      "integrity": "sha512-9E0wEKq3pBoAdmjLByBdDVfcNbmo+G61WdxpMpHKtRzIlzbVhjLTNIrxxzRGP+267iTCbJg9sgB8SJLjG2hxTg==",
+      "version": "5.0.0-unstable-20260202081607",
+      "resolved": "https://registry.npmjs.org/commerce-sdk-isomorphic/-/commerce-sdk-isomorphic-5.0.0-unstable-20260202081607.tgz",
+      "integrity": "sha512-Q7RCT8QIIgqy7vHzKvAGaOBAURZ3JkdfG1KvhE9/zNfrgMTKx63QvyICVsaStOOkvKZML5hTOrgQ/Q4jqZubBA==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "nanoid": "^3.3.8",
diff --git a/packages/commerce-sdk-react/package.json b/packages/commerce-sdk-react/package.json
index c82d251d10..20e6f50ad9 100644
--- a/packages/commerce-sdk-react/package.json
+++ b/packages/commerce-sdk-react/package.json
@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "5.0.0",
+    "commerce-sdk-isomorphic": "5.0.0-unstable-20260202081607",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },
diff --git a/packages/commerce-sdk-react/src/auth/index.test.ts b/packages/commerce-sdk-react/src/auth/index.test.ts
index d8331ea5a2..cc06da04b9 100644
--- a/packages/commerce-sdk-react/src/auth/index.test.ts
+++ b/packages/commerce-sdk-react/src/auth/index.test.ts
@@ -66,6 +66,13 @@ jest.mock('commerce-sdk-isomorphic', () => {
                     credentials: config?.fetchOptions?.credentials || 'same-origin'
                 }
             },
+            authorizeWebauthnRegistration: jest.fn().mockResolvedValue({}),
+            startWebauthnUserRegistration: jest.fn().mockResolvedValue({}),
+            finishWebauthnUserRegistration: jest.fn().mockResolvedValue({}),
+            startWebauthnAuthentication: jest.fn().mockResolvedValue({}),
+            finishWebauthnAuthentication: jest
+                .fn()
+                .mockResolvedValue({tokenResponse: TOKEN_RESPONSE}),
             getPasswordResetToken: jest.fn().mockResolvedValue({}),
             resetPassword: jest.fn().mockResolvedValue({})
         }))
@@ -1502,3 +1509,286 @@ describe('hybridAuthEnabled property toggles clearECOMSession', () => {
         expect(auth.get('dwsid')).toBe('test-dwsid-value')
     })
 })
+
+describe('Webauthn', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+    })
+
+    const PUBLIC_KEY_CREDENTIAL_JSON: ShopperLoginTypes.PublicKeyCredentialJson = {
+        id: 'credential-id',
+        rawId: 'raw-credential-id',
+        type: 'public-key',
+        response: {
+            authenticatorData: [],
+            clientDataJSON: [],
+            signature: [],
+            userHandle: null
+        } as ShopperLoginTypes.AuthenticatorAssertionResponseJson
+    }
+
+    test.each([
+        [
+            'with all parameters specified',
+            {
+                user_id: 'user@example.com',
+                mode: 'email',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                locale: 'en-GB',
+                code_challenge: 'test-code-challenge',
+                callback_uri: 'https://example.com/callback',
+                idp_name: 'customIdp',
+                hint: 'custom_hint'
+            },
+            {
+                user_id: 'user@example.com',
+                mode: 'email',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                locale: 'en-GB',
+                code_challenge: 'test-code-challenge',
+                callback_uri: 'https://example.com/callback',
+                idp_name: 'customIdp',
+                hint: 'custom_hint'
+            }
+        ],
+        [
+            'defaults optional parameters when only required parameters are specified',
+            {
+                user_id: 'user@example.com',
+                mode: 'email'
+            },
+            {
+                user_id: 'user@example.com',
+                mode: 'email',
+                channel_id: config.siteId
+            }
+        ]
+    ])(
+        'authorizeWebauthnRegistration %s',
+        async (
+            _,
+            input: Partial<ShopperLoginTypes.authorizeWebauthnRegistrationBodyType>,
+            expectedBody: Partial<ShopperLoginTypes.authorizeWebauthnRegistrationBodyType>
+        ) => {
+            const auth = new Auth(config)
+            await auth.authorizeWebauthnRegistration(
+                input as ShopperLoginTypes.authorizeWebauthnRegistrationBodyType
+            )
+
+            expect((auth as any).client.authorizeWebauthnRegistration).toHaveBeenCalledWith({
+                headers: {
+                    Authorization: ''
+                },
+                body: expectedBody
+            })
+        }
+    )
+
+    test.each([
+        [
+            'with all parameters specified',
+            {
+                user_id: 'user@example.com',
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                display_name: 'Test Display Name',
+                nick_name: 'Test Nick Name'
+            },
+            {
+                user_id: 'user@example.com',
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                display_name: 'Test Display Name',
+                nick_name: 'Test Nick Name'
+            }
+        ],
+        [
+            'defaults optional parameters when only required parameters are specified',
+            {
+                user_id: 'user@example.com',
+                pwd_action_token: 'test-pwd-action-token'
+            },
+            {
+                user_id: 'user@example.com',
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: config.siteId
+            }
+        ]
+    ])(
+        'startWebauthnUserRegistration %s',
+        async (
+            _,
+            input: Partial<ShopperLoginTypes.startWebauthnUserRegistrationBodyType>,
+            expectedBody: Partial<ShopperLoginTypes.startWebauthnUserRegistrationBodyType>
+        ) => {
+            const auth = new Auth(config)
+            await auth.startWebauthnUserRegistration(
+                input as ShopperLoginTypes.startWebauthnUserRegistrationBodyType
+            )
+
+            expect((auth as any).client.startWebauthnUserRegistration).toHaveBeenCalledWith({
+                headers: {
+                    Authorization: ''
+                },
+                body: expectedBody
+            })
+        }
+    )
+
+    test.each([
+        [
+            'with all parameters specified',
+            {
+                username: 'user@example.com',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON,
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id'
+            },
+            {
+                username: 'user@example.com',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON,
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id'
+            }
+        ],
+        [
+            'defaults optional parameters when only required parameters are specified',
+            {
+                username: 'user@example.com',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON,
+                pwd_action_token: 'test-pwd-action-token'
+            },
+            {
+                username: 'user@example.com',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON,
+                pwd_action_token: 'test-pwd-action-token',
+                channel_id: config.siteId,
+                client_id: config.clientId
+            }
+        ]
+    ])(
+        'finishWebauthnUserRegistration %s',
+        async (
+            _,
+            input: Partial<ShopperLoginTypes.RegistrationFinishRequest>,
+            expectedBody: Partial<ShopperLoginTypes.RegistrationFinishRequest>
+        ) => {
+            const auth = new Auth(config)
+            await auth.finishWebauthnUserRegistration(
+                input as ShopperLoginTypes.RegistrationFinishRequest
+            )
+
+            expect((auth as any).client.finishWebauthnUserRegistration).toHaveBeenCalledWith({
+                headers: {
+                    Authorization: ''
+                },
+                body: expectedBody
+            })
+        }
+    )
+
+    test.each([
+        [
+            'with all parameters specified',
+            {
+                user_id: 'user@example.com',
+                tenant_id: 'tenant-123',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id'
+            },
+            {
+                user_id: 'user@example.com',
+                tenant_id: 'tenant-123',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id'
+            }
+        ],
+        [
+            'defaults optional parameters when empty object is provided',
+            {},
+            {
+                channel_id: config.siteId,
+                client_id: config.clientId
+            }
+        ]
+    ])(
+        'startWebauthnAuthentication %s',
+        async (
+            _,
+            input: Partial<ShopperLoginTypes.startWebauthnAuthenticationBodyType>,
+            expectedBody: Partial<ShopperLoginTypes.startWebauthnAuthenticationBodyType>
+        ) => {
+            const auth = new Auth(config)
+            await auth.startWebauthnAuthentication(
+                input as ShopperLoginTypes.startWebauthnAuthenticationBodyType
+            )
+
+            expect((auth as any).client.startWebauthnAuthentication).toHaveBeenCalledWith({
+                headers: {
+                    Authorization: ''
+                },
+                body: expectedBody
+            })
+        }
+    )
+
+    test.each([
+        [
+            'with all parameters specified',
+            {
+                user_id: 'user@example.com',
+                email: 'user@example.com',
+                tenant_id: 'tenant-123',
+                usid: 'usid-123',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON
+            },
+            {
+                user_id: 'user@example.com',
+                email: 'user@example.com',
+                tenant_id: 'tenant-123',
+                usid: 'usid-123',
+                channel_id: 'custom-channel-id',
+                client_id: 'custom-client-id',
+                credential: PUBLIC_KEY_CREDENTIAL_JSON
+            }
+        ],
+        [
+            'defaults optional parameters when only required parameters are specified',
+            {
+                credential: PUBLIC_KEY_CREDENTIAL_JSON
+            },
+            {
+                channel_id: config.siteId,
+                client_id: config.clientId,
+                credential: PUBLIC_KEY_CREDENTIAL_JSON
+            }
+        ]
+    ])(
+        'finishWebauthnAuthentication %s',
+        async (
+            _,
+            input: Partial<ShopperLoginTypes.AuthenticateFinishRequest>,
+            expectedBody: Partial<ShopperLoginTypes.AuthenticateFinishRequest>
+        ) => {
+            const auth = new Auth(config)
+            await auth.finishWebauthnAuthentication(
+                input as ShopperLoginTypes.AuthenticateFinishRequest
+            )
+
+            expect((auth as any).client.finishWebauthnAuthentication).toHaveBeenCalledWith({
+                headers: {
+                    Authorization: ''
+                },
+                body: expectedBody
+            })
+        }
+    )
+})
diff --git a/packages/commerce-sdk-react/src/auth/index.ts b/packages/commerce-sdk-react/src/auth/index.ts
index a9712a9373..a40aaa52aa 100644
--- a/packages/commerce-sdk-react/src/auth/index.ts
+++ b/packages/commerce-sdk-react/src/auth/index.ts
@@ -1348,6 +1348,19 @@ class Auth {
         return token
     }
 
+    /**
+     * Get Basic auth header for private client requests.
+     * Returns undefined if not using a private client.
+     */
+    private getBasicAuthHeader(client: ShopperLogin<ApiClientConfigParams>): string | undefined {
+        return (
+            this.clientSecret &&
+            `Basic ${stringToBase64(
+                `${client.clientConfig.parameters.clientId}:${this.clientSecret}`
+            )}`
+        )
+    }
+
     /**
      * A wrapper method for the SLAS endpoint: getPasswordResetToken.
      *
@@ -1373,10 +1386,9 @@ class Auth {
         }
 
         // Only set authorization header if using private client
-        if (this.clientSecret) {
-            options.headers.Authorization = `Basic ${stringToBase64(
-                `${slasClient.clientConfig.parameters.clientId}:${this.clientSecret}`
-            )}`
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        if (authHeader) {
+            options.headers.Authorization = authHeader
         }
 
         // Set rawResponse to true to access the response body message for error handling
@@ -1415,10 +1427,9 @@ class Auth {
         }
 
         // Only set authorization header if using private client
-        if (this.clientSecret) {
-            options.headers.Authorization = `Basic ${stringToBase64(
-                `${slasClient.clientConfig.parameters.clientId}:${this.clientSecret}`
-            )}`
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        if (authHeader) {
+            options.headers.Authorization = authHeader
         }
         const res = await this.client.resetPassword(options)
         return res
@@ -1464,6 +1475,146 @@ class Auth {
             uido
         }
     }
-}
 
+    /**
+     * A wrapper method for the SLAS endpoint: authorizeWebauthnRegistration.
+     */
+    async authorizeWebauthnRegistration(
+        parameters: ShopperLoginTypes.authorizeWebauthnRegistrationBodyType
+    ) {
+        const slasClient = this.client
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        const options = {
+            headers: {
+                Authorization: authHeader ?? ''
+            },
+            body: {
+                // Required params
+                user_id: parameters.user_id,
+                mode: parameters.mode,
+                channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
+                // Optional params
+                ...(parameters.locale && {locale: parameters.locale}),
+                ...(parameters.client_id && {client_id: parameters.client_id}),
+                ...(parameters.code_challenge && {code_challenge: parameters.code_challenge}),
+                ...(parameters.callback_uri && {callback_uri: parameters.callback_uri}),
+                ...(parameters.idp_name && {idp_name: parameters.idp_name}),
+                ...(parameters.hint && {hint: parameters.hint})
+            }
+        }
+
+        return await slasClient.authorizeWebauthnRegistration(options)
+    }
+
+    /**
+     * A wrapper method for the SLAS endpoint: startWebauthnUserRegistration.
+     */
+    async startWebauthnUserRegistration(
+        parameters: ShopperLoginTypes.startWebauthnUserRegistrationBodyType
+    ) {
+        const slasClient = this.client
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        const options = {
+            headers: {
+                Authorization: authHeader ?? ''
+            },
+            body: {
+                // Required params
+                channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
+                pwd_action_token: parameters.pwd_action_token,
+                user_id: parameters.user_id,
+                // Optional params
+                ...(parameters.display_name && {display_name: parameters.display_name}),
+                ...(parameters.nick_name && {nick_name: parameters.nick_name}),
+                ...(parameters.client_id && {client_id: parameters.client_id})
+            }
+        }
+
+        return await slasClient.startWebauthnUserRegistration(options)
+    }
+
+    /**
+     * A wrapper method for the SLAS endpoint: finishWebauthnUserRegistration.
+     */
+    async finishWebauthnUserRegistration(parameters: ShopperLoginTypes.RegistrationFinishRequest) {
+        const slasClient = this.client
+        const authHeader = this.getBasicAuthHeader(slasClient)
+
+        const options = {
+            headers: {
+                Authorization: authHeader ?? ''
+            },
+            body: {
+                // Required params
+                client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId,
+                username: parameters.username,
+                credential: parameters.credential,
+                channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
+                pwd_action_token: parameters.pwd_action_token
+            }
+        }
+
+        return await slasClient.finishWebauthnUserRegistration(options)
+    }
+
+    /**
+     * A wrapper method for the SLAS endpoint: startWebauthnAuthentication.
+     */
+    async startWebauthnAuthentication(
+        parameters: ShopperLoginTypes.startWebauthnAuthenticationBodyType
+    ) {
+        const slasClient = this.client
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        const options = {
+            headers: {
+                Authorization: authHeader ?? ''
+            },
+            body: {
+                // Required params
+                client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId,
+                channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
+                // Optional params
+                ...(parameters.user_id && {user_id: parameters.user_id}),
+                ...(parameters.tenant_id && {tenant_id: parameters.tenant_id})
+            }
+        }
+
+        return await slasClient.startWebauthnAuthentication(options)
+    }
+
+    /**
+     * A wrapper method for the SLAS endpoint: finishWebauthnAuthentication.
+     */
+    async finishWebauthnAuthentication(parameters: ShopperLoginTypes.AuthenticateFinishRequest) {
+        const slasClient = this.client
+        const authHeader = this.getBasicAuthHeader(slasClient)
+        const options = {
+            headers: {
+                Authorization: authHeader ?? ''
+            },
+            body: {
+                // Required params
+                client_id: parameters.client_id || slasClient.clientConfig.parameters.clientId,
+                channel_id: parameters.channel_id || slasClient.clientConfig.parameters.siteId,
+                credential: parameters.credential,
+                // Optional params
+                ...(parameters.user_id && {user_id: parameters.user_id}),
+                ...(parameters.email && {email: parameters.email}),
+                ...(parameters.tenant_id && {tenant_id: parameters.tenant_id}),
+                ...(parameters.usid && {usid: parameters.usid})
+            }
+        }
+
+        const res = await slasClient.finishWebauthnAuthentication(options)
+
+        const tokenResponse = res.tokenResponse
+        if (!tokenResponse) {
+            throw new Error('finishWebauthnAuthentication did not return a tokenResponse.')
+        }
+
+        this.handleTokenResponse(tokenResponse, false)
+
+        return tokenResponse
+    }
+}
 export default Auth
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperLogin/cache.ts b/packages/commerce-sdk-react/src/hooks/ShopperLogin/cache.ts
index 23c3d86c5c..e8ca0df4c1 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperLogin/cache.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperLogin/cache.ts
@@ -28,5 +28,11 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
     resetPassword: noop,
     getPasswordLessAccessToken: noop,
     revokeToken: noop,
-    introspectToken: noop
+    introspectToken: noop,
+    // WebAuthn methods - these will be available when commerce-sdk-isomorphic is updated
+    startWebauthnUserRegistration: noop,
+    finishWebauthnUserRegistration: noop,
+    authorizeWebauthnRegistration: noop,
+    startWebauthnAuthentication: noop,
+    finishWebauthnAuthentication: noop
 }
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperLogin/index.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperLogin/index.test.ts
index cf1ce4712d..65dd7b8967 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperLogin/index.test.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperLogin/index.test.ts
@@ -20,12 +20,7 @@ describe('Shopper Login hooks', () => {
             // These endpoints all return data in the response headers, rather than body, so they
             // don't work well with the current implementation of mutation hooks.
             'authenticateCustomer',
-            'authorizeWebauthnRegistration',
-            'finishWebauthnAuthentication',
-            'finishWebauthnUserRegistration',
-            'getTrustedAgentAuthorizationToken',
-            'startWebauthnAuthentication',
-            'startWebauthnUserRegistration'
+            'getTrustedAgentAuthorizationToken'
         ])
     })
     test('all mutations have cache update logic', () => {
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.test.ts
index dd14131491..dd00b3e640 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.test.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.test.ts
@@ -28,6 +28,19 @@ const CLIENT_KEY = CLIENT_KEYS.SHOPPER_LOGIN
 type Client = NonNullable<ApiClients[typeof CLIENT_KEY]>
 
 const loginEndpoint = '/shopper/auth/'
+
+const PUBLIC_KEY_CREDENTIAL_JSON: ShopperLoginTypes.PublicKeyCredentialJson = {
+    id: 'credential-id',
+    rawId: 'raw-credential-id',
+    type: 'public-key',
+    response: {
+        authenticatorData: [],
+        clientDataJSON: [],
+        signature: [],
+        userHandle: null
+    } as ShopperLoginTypes.AuthenticatorAssertionResponseJson
+}
+
 // Additional properties are ignored, so we can use this mega-options object for all endpoints
 const OPTIONS = {
     parameters: {
@@ -46,6 +59,7 @@ const OPTIONS = {
         code: 'code',
         code_challenge: 'code_challenge',
         code_verifier: 'code_verifier',
+        credential: PUBLIC_KEY_CREDENTIAL_JSON,
         dwsid: 'dwsid',
         grant_type: 'client_credentials' as const,
         hint: 'hint',
@@ -56,6 +70,7 @@ const OPTIONS = {
         pwd_action_token: 'pwd_action_token',
         pwdless_login_token: 'pwdless_login_token',
         redirect_uri: 'redirect_uri',
+        username: 'username',
         token: 'token',
         user_id: 'user_id'
     }
@@ -73,6 +88,14 @@ const TOKEN_RESPONSE: ShopperLoginTypes.TokenResponse = {
     refresh_token_expires_in: 0
 }
 
+const PUBLIC_KEY_CREDENTIAL_REQUEST_OPTIONS: ShopperLoginTypes.PublicKeyCredentialRequestOptions = {
+    challenge: 'challenge',
+    timeout: 60000,
+    rpId: 'rp-id',
+    allowCredentials: [],
+    userVerification: 'preferred'
+}
+
 // --- TEST CASES --- //
 type Implemented = ShopperLoginMutation
 // This is an object rather than an array to more easily ensure we cover all mutations
@@ -91,7 +114,12 @@ const testMap: TestMap = {
     introspectToken: [OPTIONS, {token: 'token'}],
     resetPassword: [OPTIONS, undefined],
     revokeToken: [OPTIONS, {token: 'token'}],
-    logoutCustomer: [OPTIONS, TOKEN_RESPONSE]
+    logoutCustomer: [OPTIONS, TOKEN_RESPONSE],
+    startWebauthnUserRegistration: [OPTIONS, PUBLIC_KEY_CREDENTIAL_REQUEST_OPTIONS],
+    finishWebauthnUserRegistration: [OPTIONS, undefined],
+    authorizeWebauthnRegistration: [OPTIONS, undefined],
+    startWebauthnAuthentication: [OPTIONS, PUBLIC_KEY_CREDENTIAL_REQUEST_OPTIONS],
+    finishWebauthnAuthentication: [OPTIONS, TOKEN_RESPONSE]
 }
 // Type assertion is necessary because `Object.entries` is limited
 const testCases = Object.entries(testMap) as Array<[Implemented, TestMap[Implemented]]>
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.ts b/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.ts
index 07acfc6fad..49d6b1614e 100644
--- a/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.ts
+++ b/packages/commerce-sdk-react/src/hooks/ShopperLogin/mutation.ts
@@ -97,7 +97,32 @@ The value of the `_sfdc_client_auth` header must be a Base64-encoded string. The
      * Returns the token properties. A basic auth header with Base64-encoded `clientId:secret` is required in the Authorization header, as well as an access token or refresh token. Use `token_type_hint` to help identify the token.
      * @returns A TanStack Query mutation hook for interacting with the Shopper Login `introspectToken` endpoint.
      */
-    IntrospectToken: 'introspectToken'
+    IntrospectToken: 'introspectToken',
+    /**
+     * Start WebAuthn passkey registration. Starts the WebAuthn registration process by generating credential creation options. Returns the challenge and other parameters needed by the authenticator to create a new credential.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Login `startWebauthnRegistration` endpoint.
+     */
+    StartWebauthnUserRegistration: 'startWebauthnUserRegistration',
+    /**
+     * Finish WebAuthn passkey registration. Completes the WebAuthn registration process by verifying the credential created by the authenticator. Stores the public key and credential information for future authentication.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Login `finishWebauthnRegistration` endpoint.
+     */
+    FinishWebauthnUserRegistration: 'finishWebauthnUserRegistration',
+    /**
+     * Authorize WebAuthn passkey registration. Authorizes a user to register a WebAuthn credential (passkey). This endpoint validates the user's credentials and creates a password action token that can be used to start the registration process. The token is sent to the user via the specified channel (email or SMS).
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Login `authorizeWebauthnRegistration` endpoint.
+     */
+    AuthorizeWebauthnRegistration: 'authorizeWebauthnRegistration',
+    /**
+     * Start WebAuthn passkey authentication. Starts the WebAuthn authentication process by generating credential request options. Returns the challenge and allowed credentials for the user to authenticate with.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Login `startWebauthnAuthentication` endpoint.
+     */
+    StartWebauthnAuthentication: 'startWebauthnAuthentication',
+    /**
+     * Finish WebAuthn passkey authentication. Completes the WebAuthn authentication process by verifying the assertion from the authenticator. Returns OAuth tokens upon successful authentication.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Login `finishWebauthnAuthentication` endpoint.
+     */
+    FinishWebauthnAuthentication: 'finishWebauthnAuthentication'
 } as const
 
 /**
diff --git a/packages/commerce-sdk-react/src/hooks/useAuthHelper.ts b/packages/commerce-sdk-react/src/hooks/useAuthHelper.ts
index bd4a33f316..85f9c835f6 100644
--- a/packages/commerce-sdk-react/src/hooks/useAuthHelper.ts
+++ b/packages/commerce-sdk-react/src/hooks/useAuthHelper.ts
@@ -31,7 +31,12 @@ export const AuthHelpers = {
     Logout: 'logout',
     Register: 'register',
     ResetPassword: 'resetPassword',
-    UpdateCustomerPassword: 'updateCustomerPassword'
+    UpdateCustomerPassword: 'updateCustomerPassword',
+    StartWebauthnUserRegistration: 'startWebauthnUserRegistration',
+    FinishWebauthnUserRegistration: 'finishWebauthnUserRegistration',
+    AuthorizeWebauthnRegistration: 'authorizeWebauthnRegistration',
+    StartWebauthnAuthentication: 'startWebauthnAuthentication',
+    FinishWebauthnAuthentication: 'finishWebauthnAuthentication'
 } as const
 /**
  * @group Helpers
diff --git a/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs b/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs
index c59809fc7b..4e337ec648 100644
--- a/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs
+++ b/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs
@@ -102,6 +102,16 @@ module.exports = {
                 // callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback',
                 // The landing path for reset password
                 landingPath: '/reset-password-landing'
+            },
+            passkey: {
+                // Enables or disables passkey login for the site. Defaults to: false
+                {{#if answers.project.demo.enableDemoSettings}}
+                enabled: true,
+                {{else}}
+                enabled: false,
+                {{/if}}
+                // The callback URI must be an absolute URL (i.e. third-party URI) set up by the developer.
+                callbackURI: process.env.PASSKEY_CALLBACK_URI
             }
         },
         // The default site for your app. This value will be used when a siteRef could not be determined from the url
diff --git a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs
index 59b6bcb016..013179a9a6 100644
--- a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs
+++ b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs
@@ -102,6 +102,16 @@ module.exports = {
                 // callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback',
                 // The landing path for reset password
                 landingPath: '/reset-password-landing'
+            },
+            passkey: {
+                // Enables or disables passkey login for the site. Defaults to: false
+                {{#if answers.project.demo.enableDemoSettings}}
+                enabled: true,
+                {{else}}
+                enabled: false,
+                {{/if}}
+                // The callback URI must be an absolute URL (i.e. third-party URI) set up by the developer.
+                callbackURI: process.env.PASSKEY_CALLBACK_URI
             }
         },
         // The default site for your app. This value will be used when a siteRef could not be determined from the url
diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
index 565418dd43..f03cbc72a6 100644
--- a/packages/template-retail-react-app/app/components/_app/index.jsx
+++ b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -33,7 +33,10 @@ import {
 import {SkipNavLink, SkipNavContent} from '@chakra-ui/skip-nav'
 
 // Contexts
-import {CurrencyProvider} from '@salesforce/retail-react-app/app/contexts'
+import {
+    CurrencyProvider,
+    PasskeyRegistrationProvider
+} from '@salesforce/retail-react-app/app/contexts'
 
 // Local Project Components
 import Header from '@salesforce/retail-react-app/app/components/header'
@@ -328,145 +331,156 @@ const App = (props) => {
                     defaultLocale={DEFAULT_LOCALE}
                 >
                     <CurrencyProvider currency={currency}>
-                        <Seo>
-                            <meta name="theme-color" content={THEME_COLOR} />
-                            <meta name="apple-mobile-web-app-title" content={DEFAULT_SITE_TITLE} />
-                            <link
-                                rel="apple-touch-icon"
-                                href={getAssetUrl('static/img/global/apple-touch-icon.png')}
-                            />
-                            <link rel="manifest" href={getAssetUrl('static/manifest.json')} />
-
-                            {/* Urls for all localized versions of this page (including current page)
-                            For more details on hrefLang, see https://developers.google.com/search/docs/advanced/crawling/localized-versions */}
-                            {site.l10n?.supportedLocales.map((locale) => (
+                        <PasskeyRegistrationProvider>
+                            <Seo>
+                                <meta name="theme-color" content={THEME_COLOR} />
+                                <meta
+                                    name="apple-mobile-web-app-title"
+                                    content={DEFAULT_SITE_TITLE}
+                                />
+                                <link
+                                    rel="apple-touch-icon"
+                                    href={getAssetUrl('static/img/global/apple-touch-icon.png')}
+                                />
+                                <link rel="manifest" href={getAssetUrl('static/manifest.json')} />
+
+                                {/* Urls for all localized versions of this page (including current page)
+                                For more details on hrefLang, see https://developers.google.com/search/docs/advanced/crawling/localized-versions */}
+                                {site.l10n?.supportedLocales.map((locale) => (
+                                    <link
+                                        rel="alternate"
+                                        hrefLang={locale.id.toLowerCase()}
+                                        href={`${appOrigin}${getPathWithLocale(
+                                            locale.id,
+                                            buildUrl,
+                                            {
+                                                location: {
+                                                    ...location,
+                                                    search: ''
+                                                }
+                                            }
+                                        )}`}
+                                        key={locale.id}
+                                    />
+                                ))}
+                                {/* A general locale as fallback. For example: "en" if default locale is "en-GB" */}
                                 <link
                                     rel="alternate"
-                                    hrefLang={locale.id.toLowerCase()}
+                                    hrefLang={site.l10n.defaultLocale.slice(0, 2)}
                                     href={`${appOrigin}${getPathWithLocale(locale.id, buildUrl, {
                                         location: {
                                             ...location,
                                             search: ''
                                         }
                                     })}`}
-                                    key={locale.id}
                                 />
-                            ))}
-                            {/* A general locale as fallback. For example: "en" if default locale is "en-GB" */}
-                            <link
-                                rel="alternate"
-                                hrefLang={site.l10n.defaultLocale.slice(0, 2)}
-                                href={`${appOrigin}${getPathWithLocale(locale.id, buildUrl, {
-                                    location: {
-                                        ...location,
-                                        search: ''
-                                    }
-                                })}`}
-                            />
-                            {/* A wider fallback for user locales that the app does not support */}
-                            <link rel="alternate" hrefLang="x-default" href={`${appOrigin}/`} />
-                        </Seo>
-
-                        {commerceAgentConfiguration?.enabled === 'true' && (
-                            <ShopperAgent
-                                commerceAgentConfiguration={commerceAgentConfiguration}
-                                basketDoneLoading={basketQueryLastUpdateTime > 0}
-                            />
-                        )}
-
-                        <ScrollToTop />
-
-                        <Box id="app" display="flex" flexDirection="column" flex={1}>
-                            <SkipNavLink zIndex="skipLink">Skip to Content</SkipNavLink>
-                            {storeLocatorEnabled && (
-                                <StoreLocatorModal
-                                    isOpen={isStoreLocatorOpen}
-                                    onClose={onCloseStoreLocator}
+                                {/* A wider fallback for user locales that the app does not support */}
+                                <link rel="alternate" hrefLang="x-default" href={`${appOrigin}/`} />
+                            </Seo>
+
+                            {commerceAgentConfiguration?.enabled === 'true' && (
+                                <ShopperAgent
+                                    commerceAgentConfiguration={commerceAgentConfiguration}
+                                    basketDoneLoading={basketQueryLastUpdateTime > 0}
                                 />
                             )}
-                            <Island hydrateOn={'visible'}>
-                                <Box {...styles.headerWrapper}>
-                                    {!isCheckout ? (
-                                        <>
-                                            <AboveHeader />
-                                            <Header
-                                                onMenuClick={onOpen}
-                                                onLogoClick={onLogoClick}
-                                                onMyCartClick={onCartClick}
-                                                onMyAccountClick={onAccountClick}
-                                                onWishlistClick={onWishlistClick}
-                                                onStoreLocatorClick={onOpenStoreLocator}
-                                                onAgentClick={shopperAgentActions.open}
-                                            >
-                                                <HideOnDesktop>
-                                                    <DrawerMenu
-                                                        isOpen={isOpen}
-                                                        onClose={onClose}
-                                                        onLogoClick={onLogoClick}
-                                                        root={
-                                                            categories?.[
-                                                                CAT_MENU_DEFAULT_ROOT_CATEGORY
-                                                            ]
-                                                        }
-                                                        itemsKey="categories"
-                                                        itemsCountKey="onlineSubCategoriesCount"
-                                                        itemComponent={DrawerMenuItemWithData}
-                                                    />
-                                                </HideOnDesktop>
-
-                                                <HideOnMobile>
-                                                    <ListMenu
-                                                        root={
-                                                            categories?.[
-                                                                CAT_MENU_DEFAULT_ROOT_CATEGORY
-                                                            ]
-                                                        }
-                                                        itemsKey="categories"
-                                                        itemsCountKey="onlineSubCategoriesCount"
-                                                        contentComponent={ListMenuContentWithData}
-                                                    />
-                                                </HideOnMobile>
-                                            </Header>
-                                        </>
-                                    ) : (
-                                        <CheckoutHeader />
-                                    )}
-                                </Box>
-                            </Island>
-                            {!isOnline && <OfflineBanner />}
-                            <AddToCartModalProvider>
-                                <BonusProductSelectionModalProvider>
-                                    <SkipNavContent
-                                        style={{
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            flex: 1,
-                                            outline: 0
-                                        }}
-                                    >
-                                        <Box
-                                            as="main"
-                                            id="app-main"
-                                            role="main"
-                                            display="flex"
-                                            flexDirection="column"
-                                            flex="1"
+
+                            <ScrollToTop />
+
+                            <Box id="app" display="flex" flexDirection="column" flex={1}>
+                                <SkipNavLink zIndex="skipLink">Skip to Content</SkipNavLink>
+                                {storeLocatorEnabled && (
+                                    <StoreLocatorModal
+                                        isOpen={isStoreLocatorOpen}
+                                        onClose={onCloseStoreLocator}
+                                    />
+                                )}
+                                <Island hydrateOn={'visible'}>
+                                    <Box {...styles.headerWrapper}>
+                                        {!isCheckout ? (
+                                            <>
+                                                <AboveHeader />
+                                                <Header
+                                                    onMenuClick={onOpen}
+                                                    onLogoClick={onLogoClick}
+                                                    onMyCartClick={onCartClick}
+                                                    onMyAccountClick={onAccountClick}
+                                                    onWishlistClick={onWishlistClick}
+                                                    onStoreLocatorClick={onOpenStoreLocator}
+                                                    onAgentClick={shopperAgentActions.open}
+                                                >
+                                                    <HideOnDesktop>
+                                                        <DrawerMenu
+                                                            isOpen={isOpen}
+                                                            onClose={onClose}
+                                                            onLogoClick={onLogoClick}
+                                                            root={
+                                                                categories?.[
+                                                                    CAT_MENU_DEFAULT_ROOT_CATEGORY
+                                                                ]
+                                                            }
+                                                            itemsKey="categories"
+                                                            itemsCountKey="onlineSubCategoriesCount"
+                                                            itemComponent={DrawerMenuItemWithData}
+                                                        />
+                                                    </HideOnDesktop>
+
+                                                    <HideOnMobile>
+                                                        <ListMenu
+                                                            root={
+                                                                categories?.[
+                                                                    CAT_MENU_DEFAULT_ROOT_CATEGORY
+                                                                ]
+                                                            }
+                                                            itemsKey="categories"
+                                                            itemsCountKey="onlineSubCategoriesCount"
+                                                            contentComponent={
+                                                                ListMenuContentWithData
+                                                            }
+                                                        />
+                                                    </HideOnMobile>
+                                                </Header>
+                                            </>
+                                        ) : (
+                                            <CheckoutHeader />
+                                        )}
+                                    </Box>
+                                </Island>
+                                {!isOnline && <OfflineBanner />}
+                                <AddToCartModalProvider>
+                                    <BonusProductSelectionModalProvider>
+                                        <SkipNavContent
+                                            style={{
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                flex: 1,
+                                                outline: 0
+                                            }}
                                         >
-                                            <OfflineBoundary isOnline={false}>
-                                                {children}
-                                            </OfflineBoundary>
-                                        </Box>
-                                    </SkipNavContent>
-
-                                    <Island hydrateOn={'visible'}>
-                                        {!isCheckout ? <Footer /> : <CheckoutFooter />}
-                                    </Island>
-
-                                    <AuthModal {...authModal} />
-                                    <DntNotification {...dntNotification} />
-                                </BonusProductSelectionModalProvider>
-                            </AddToCartModalProvider>
-                        </Box>
+                                            <Box
+                                                as="main"
+                                                id="app-main"
+                                                role="main"
+                                                display="flex"
+                                                flexDirection="column"
+                                                flex="1"
+                                            >
+                                                <OfflineBoundary isOnline={false}>
+                                                    {children}
+                                                </OfflineBoundary>
+                                            </Box>
+                                        </SkipNavContent>
+
+                                        <Island hydrateOn={'visible'}>
+                                            {!isCheckout ? <Footer /> : <CheckoutFooter />}
+                                        </Island>
+
+                                        <AuthModal {...authModal} />
+                                        <DntNotification {...dntNotification} />
+                                    </BonusProductSelectionModalProvider>
+                                </AddToCartModalProvider>
+                            </Box>
+                        </PasskeyRegistrationProvider>
                     </CurrencyProvider>
                 </IntlProvider>
             </StorefrontPreview>
diff --git a/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx b/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx
index c820d136c5..b026eb871b 100644
--- a/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx
+++ b/packages/template-retail-react-app/app/components/forms/useLoginFields.jsx
@@ -21,7 +21,8 @@ export default function useLoginFields({
             placeholder: 'you@email.com',
             defaultValue: '',
             type: 'email',
-            autoComplete: 'email',
+            // Include 'webauthn' for passkey autofill support
+            autoComplete: 'email webauthn',
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please enter your email address.',
diff --git a/packages/template-retail-react-app/app/components/otp-auth/index.jsx b/packages/template-retail-react-app/app/components/otp-auth/index.jsx
index 5bd939a59e..d97f898649 100644
--- a/packages/template-retail-react-app/app/components/otp-auth/index.jsx
+++ b/packages/template-retail-react-app/app/components/otp-auth/index.jsx
@@ -38,6 +38,7 @@ const OtpAuth = ({
     handleOtpVerification,
     onCheckoutAsGuest,
     isGuestRegistration = false,
+    isPasskeyRegistration = false,
     hideCheckoutAsGuestButton = false,
     resendCooldownDuration = 30
 }) => {
@@ -227,6 +228,12 @@ const OtpAuth = ({
                                     id="otp.message.enter_code_for_account_guest"
                                     values={{otpLength: OTP_LENGTH}}
                                 />
+                            ) : isPasskeyRegistration ? (
+                                <FormattedMessage
+                                    defaultMessage="We sent a one-time password (OTP) to your email to confirm your identity. Enter the {otpLength}-digit code below to continue."
+                                    id="otp.message.enter_code_for_passkey_registration"
+                                    values={{otpLength: OTP_LENGTH}}
+                                />
                             ) : (
                                 <FormattedMessage
                                     defaultMessage="To log in to your account, enter the code sent to your email."
@@ -366,6 +373,7 @@ OtpAuth.propTypes = {
     handleOtpVerification: PropTypes.func.isRequired,
     onCheckoutAsGuest: PropTypes.func,
     isGuestRegistration: PropTypes.bool,
+    isPasskeyRegistration: PropTypes.bool,
     hideCheckoutAsGuestButton: PropTypes.bool,
     /** Resend cooldown (in seconds). Default 30. */
     resendCooldownDuration: PropTypes.number
diff --git a/packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx
new file mode 100644
index 0000000000..f48190fcf9
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx
@@ -0,0 +1,259 @@
+/*
+ * 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
+ */
+
+import React, {useState, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {useIntl} from 'react-intl'
+
+// Components
+import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth'
+import {
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalHeader,
+    ModalOverlay,
+    Alert,
+    AlertIcon
+} from '@salesforce/retail-react-app/app/components/shared/ui'
+
+// Hooks
+import {useForm} from 'react-hook-form'
+import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+
+// 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'
+
+// Constants
+import {
+    API_ERROR_MESSAGE,
+    INVALID_TOKEN_ERROR_MESSAGE
+} from '@salesforce/retail-react-app/app/constants'
+
+/**
+ * Modal for registering a new passkey with a nickname
+ */
+const PasskeyRegistrationModal = ({isOpen, onClose}) => {
+    const {data: customer} = useCurrentCustomer()
+    const {formatMessage} = useIntl()
+    const [passkeyNickname, setPasskeyNickname] = useState('')
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState(null)
+    const [isOtpAuthOpen, setIsOtpAuthOpen] = useState(false)
+
+    const form = useForm()
+
+    const config = getConfig()
+    const webauthnConfig = config.app.login.passkey
+    const authorizeWebauthnRegistration = useAuthHelper(AuthHelpers.AuthorizeWebauthnRegistration)
+    const startWebauthnUserRegistration = useAuthHelper(AuthHelpers.StartWebauthnUserRegistration)
+    const finishWebauthnUserRegistration = useAuthHelper(AuthHelpers.FinishWebauthnUserRegistration)
+
+    const handleRegisterPasskey = async () => {
+        setIsLoading(true)
+        setError(null)
+
+        try {
+            await authorizeWebauthnRegistration.mutateAsync({
+                user_id: customer.email,
+                mode: webauthnConfig.mode,
+                ...(webauthnConfig.mode === 'callback' && {
+                    callback_uri: webauthnConfig.callbackURI
+                })
+            })
+
+            // Open OTP auth modal
+            onClose()
+            setIsOtpAuthOpen(true)
+        } catch (err) {
+            // Set error message for the passkey registration modal
+            setError(formatMessage(API_ERROR_MESSAGE))
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleOtpVerification = async (code) => {
+        setIsLoading(true)
+        setError(null)
+
+        try {
+            // Step 1: Start WebAuthn registration
+            const response = await startWebauthnUserRegistration.mutateAsync({
+                user_id: customer.email,
+                pwd_action_token: code,
+                ...(passkeyNickname && {nick_name: passkeyNickname})
+            })
+
+            // Step 2: Convert response to WebAuthn PublicKeyCredentialCreationOptions format
+            const publicKey = window.PublicKeyCredential.parseCreationOptionsFromJSON(response)
+
+            // Step 3: Call navigator.credentials.create()
+            if (!navigator.credentials || !navigator.credentials.create) {
+                throw new Error('WebAuthn API not available in this browser')
+            }
+
+            // navigator.credentials.create() will show a browser/system prompt
+            // This may appear to hang if the user doesn't interact with the prompt
+            const credential = await navigator.credentials.create({publicKey})
+
+            if (!credential) {
+                throw new Error('Failed to create credential: user cancelled or operation failed')
+            }
+
+            // Step 4: Convert credential to JSON format before sending to SLAS
+            // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/toJSON
+            let credentialJson
+            try {
+                credentialJson = credential.toJSON()
+            } catch (error) {
+                // Fallback to manual encoding if toJSON() fails
+                // Some passkey providers (e.g., 1Password) may not support the toJSON() method and return an error
+                const clientExtensionResults = credential.getClientExtensionResults?.() || {}
+                credentialJson = {
+                    type: credential.type,
+                    id: credential.id,
+                    rawId: arrayBufferToBase64Url(credential.rawId),
+                    response: {
+                        attestationObject: arrayBufferToBase64Url(
+                            credential.response.attestationObject
+                        ),
+                        clientDataJSON: arrayBufferToBase64Url(credential.response.clientDataJSON)
+                    },
+                    ...(Object.keys(clientExtensionResults).length > 0 && {clientExtensionResults})
+                }
+            }
+
+            // Step 5: Finish WebAuthn registration
+            await finishWebauthnUserRegistration.mutateAsync({
+                username: customer.email,
+                credential: credentialJson,
+                pwd_action_token: code
+            })
+
+            // Step 6: Close OTP modal and main modal on success
+            setIsOtpAuthOpen(false)
+            onClose()
+
+            return {success: true}
+        } catch (err) {
+            console.error('Error registering passkey:', err)
+            const message = /401/.test(err.message)
+                ? formatMessage(INVALID_TOKEN_ERROR_MESSAGE)
+                : formatMessage(API_ERROR_MESSAGE)
+
+            // Return error result for OTP component to display
+            return {
+                success: false,
+                error: message
+            }
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const resetState = () => {
+        setPasskeyNickname('')
+        setError(null)
+    }
+
+    const handleClose = () => {
+        resetState()
+        onClose()
+    }
+
+    // Reset state when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            resetState()
+        }
+    }, [isOpen])
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={handleClose} size="md">
+                <ModalOverlay />
+                <ModalContent>
+                    <ModalHeader>
+                        {formatMessage({
+                            defaultMessage: 'Create Passkey',
+                            id: 'passkey_registration.modal.title'
+                        })}
+                    </ModalHeader>
+                    <ModalCloseButton
+                        aria-label={formatMessage({
+                            id: 'passkey_registration.modal.button.close.assistive_msg',
+                            defaultMessage: 'Close passkey form'
+                        })}
+                        data-testid="passkey-registration-modal-close-button"
+                    />
+                    <ModalBody pb={6}>
+                        {error && (
+                            <Alert status="error" mb={4}>
+                                <AlertIcon />
+                                {error}
+                            </Alert>
+                        )}
+
+                        <FormControl>
+                            <FormLabel>
+                                {formatMessage({
+                                    defaultMessage: 'Passkey Nickname (optional)',
+                                    id: 'passkey_registration.modal.label.nickname'
+                                })}
+                            </FormLabel>
+                            <Input
+                                placeholder="e.g., 'iPhone', 'Personal Laptop'"
+                                value={passkeyNickname}
+                                onChange={(e) => setPasskeyNickname(e.target.value)}
+                                mb={4}
+                                isDisabled={isLoading}
+                            />
+                            <Button
+                                width="full"
+                                colorScheme="blue"
+                                onClick={handleRegisterPasskey}
+                                isLoading={isLoading}
+                                loadingText="Registering..."
+                            >
+                                {formatMessage({
+                                    defaultMessage: 'Register Passkey',
+                                    id: 'passkey_registration.modal.button.register'
+                                })}
+                            </Button>
+                        </FormControl>
+                    </ModalBody>
+                </ModalContent>
+            </Modal>
+            <OtpAuth
+                isOpen={isOtpAuthOpen}
+                onClose={() => setIsOtpAuthOpen(false)}
+                form={form}
+                handleSendEmailOtp={handleRegisterPasskey}
+                handleOtpVerification={handleOtpVerification}
+                isPasskeyRegistration={true}
+                hideCheckoutAsGuestButton={true}
+            />
+        </>
+    )
+}
+
+PasskeyRegistrationModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+}
+
+export default PasskeyRegistrationModal
diff --git a/packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js
new file mode 100644
index 0000000000..f3f97feeb1
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/passkey-registration-modal/index.test.js
@@ -0,0 +1,695 @@
+/*
+ * 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
+ */
+import React from 'react'
+import {screen, waitFor} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {rest} from 'msw'
+
+// Unmock the component so we can test it
+jest.unmock('@salesforce/retail-react-app/app/components/passkey-registration-modal')
+import PasskeyRegistrationModal from '@salesforce/retail-react-app/app/components/passkey-registration-modal/index'
+
+// Mock Commerce SDK hooks
+const mockMutateAsync = jest.fn()
+const mockUseAuthHelper = jest.fn()
+
+jest.mock('@salesforce/commerce-sdk-react', () => ({
+    ...jest.requireActual('@salesforce/commerce-sdk-react'),
+    useAuthHelper: (param) => mockUseAuthHelper(param),
+    AuthHelpers: {
+        AuthorizeWebauthnRegistration: 'AuthorizeWebauthnRegistration',
+        StartWebauthnUserRegistration: 'StartWebauthnUserRegistration',
+        FinishWebauthnUserRegistration: 'FinishWebauthnUserRegistration'
+    }
+}))
+
+// Mock useCurrentCustomer
+const mockUseCurrentCustomer = jest.fn()
+jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
+    useCurrentCustomer: () => mockUseCurrentCustomer()
+}))
+
+// Mock OtpAuth component - expose handleOtpVerification for testing
+let otpVerificationHandler = null
+jest.mock('@salesforce/retail-react-app/app/components/otp-auth', () => {
+    const PropTypes = jest.requireActual('prop-types')
+    const React = jest.requireActual('react')
+    const MockOtpAuth = ({isOpen, handleOtpVerification}) => {
+        React.useEffect(() => {
+            if (handleOtpVerification) {
+                otpVerificationHandler = handleOtpVerification
+            }
+        }, [handleOtpVerification])
+        return isOpen ? <div data-testid="otp-auth-modal">OTP Auth Modal</div> : null
+    }
+    MockOtpAuth.propTypes = {
+        isOpen: PropTypes.bool,
+        handleOtpVerification: PropTypes.func
+    }
+    return MockOtpAuth
+})
+
+describe('PasskeyRegistrationModal', () => {
+    const mockOnClose = jest.fn()
+    const mockCustomer = {
+        email: 'test@example.com'
+    }
+
+    function PasskeyRegistrationModalWrapper() {
+        const [isOpen, setIsOpen] = React.useState(true)
+
+        return <PasskeyRegistrationModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    }
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        otpVerificationHandler = null
+        mockUseCurrentCustomer.mockReturnValue({
+            data: mockCustomer
+        })
+        mockUseAuthHelper.mockReturnValue({
+            mutateAsync: mockMutateAsync
+        })
+
+        // Mock WebAuthn API
+        global.navigator.credentials = {
+            create: jest.fn()
+        }
+
+        // Mock PublicKeyCredential API
+        global.PublicKeyCredential = {
+            parseCreationOptionsFromJSON: jest.fn((options) => ({
+                challenge: new Uint8Array([1, 2, 3]),
+                rp: {name: 'Test RP', id: 'example.com'},
+                user: {
+                    id: new Uint8Array([4, 5, 6]),
+                    name: 'test@example.com',
+                    displayName: 'Test User'
+                },
+                pubKeyCredParams: [{type: 'public-key', alg: -7}],
+                ...options
+            })),
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+        }
+
+        // Mock product API calls that may be triggered by components in the provider tree
+        global.server.use(
+            rest.get('*/products*', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(200), ctx.json({data: []}))
+            })
+        )
+    })
+
+    afterEach(() => {
+        delete global.PublicKeyCredential
+    })
+
+    describe('Rendering', () => {
+        test('renders modal when isOpen is true', () => {
+            renderWithProviders(<PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />, {
+                wrapperProps: {appConfig: mockConfig.app}
+            })
+
+            expect(screen.getByText('Create Passkey')).toBeInTheDocument()
+            expect(screen.getByText(/Passkey Nickname/)).toBeInTheDocument()
+            expect(
+                screen.getByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+            ).toBeInTheDocument()
+            expect(screen.getByText('Register Passkey')).toBeInTheDocument()
+        })
+
+        test('does not render modal when isOpen is false', () => {
+            renderWithProviders(<PasskeyRegistrationModal isOpen={false} onClose={mockOnClose} />)
+
+            expect(screen.queryByText('Create Passkey')).not.toBeInTheDocument()
+        })
+    })
+
+    describe('User Interactions', () => {
+        test('allows user to type in nickname input', async () => {
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const input = screen.getByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+            await user.type(input, 'My iPhone')
+
+            expect(input).toHaveValue('My iPhone')
+        })
+
+        test('calls onClose when close button is clicked', async () => {
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const closeButton = screen.getByLabelText('Close passkey form')
+            await user.click(closeButton)
+
+            expect(mockOnClose).toHaveBeenCalledTimes(1)
+        })
+
+        test('resets form state when modal opens', async () => {
+            const {user} = renderWithProviders(<PasskeyRegistrationModalWrapper />)
+
+            const input = screen.getByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+            await user.type(input, 'Test Nickname')
+            expect(input).toHaveValue('Test Nickname')
+
+            // Close modal
+            const closeButton = screen.getByTestId('passkey-registration-modal-close-button')
+            await user.click(closeButton)
+
+            await waitFor(() => {
+                expect(
+                    screen.queryByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+                ).not.toBeInTheDocument()
+            })
+
+            // Reopen modal - state should be reset
+            renderWithProviders(<PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />)
+            const newInput = screen.getByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+            expect(newInput).toHaveValue('')
+        })
+    })
+
+    describe('Passkey Registration', () => {
+        test('calls authorizeWebauthnRegistration on register button click', async () => {
+            mockMutateAsync.mockResolvedValue({})
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(mockMutateAsync).toHaveBeenCalledWith({
+                    user_id: 'test@example.com',
+                    mode: 'callback',
+                    callback_uri: 'https://webhook.site/ee47be40-e9fc-4313-8b56-18e4fe819043'
+                })
+            })
+        })
+
+        test('closes modal and opens OTP auth modal on successful registration', async () => {
+            mockMutateAsync.mockResolvedValue({})
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(mockOnClose).toHaveBeenCalled()
+                expect(screen.getByTestId('otp-auth-modal')).toBeInTheDocument()
+            })
+        })
+
+        test('displays error message when registration fails', async () => {
+            const errorMessage = 'Registration failed'
+            mockMutateAsync.mockRejectedValue(new Error(errorMessage))
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(screen.getByText('Something went wrong. Try again!')).toBeInTheDocument()
+            })
+        })
+
+        test('shows loading state during registration', async () => {
+            mockMutateAsync.mockImplementation(
+                () => new Promise((resolve) => setTimeout(resolve, 100))
+            )
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            expect(screen.getByText('Registering...')).toBeInTheDocument()
+            expect(registerButton).toBeDisabled()
+        })
+    })
+
+    describe('handleOtpVerification', () => {
+        let mockStartWebauthnRegistration
+        let mockFinishWebauthnRegistration
+        let mockAuthorizeWebauthnRegistration
+
+        beforeEach(() => {
+            // Setup separate mocks for each auth helper
+            mockStartWebauthnRegistration = jest.fn()
+            mockFinishWebauthnRegistration = jest.fn()
+            mockAuthorizeWebauthnRegistration = jest.fn()
+
+            mockUseAuthHelper.mockImplementation((helperType) => {
+                if (helperType === 'StartWebauthnUserRegistration') {
+                    return {mutateAsync: mockStartWebauthnRegistration}
+                }
+                if (helperType === 'FinishWebauthnUserRegistration') {
+                    return {mutateAsync: mockFinishWebauthnRegistration}
+                }
+                if (helperType === 'AuthorizeWebauthnRegistration') {
+                    return {mutateAsync: mockAuthorizeWebauthnRegistration}
+                }
+                return {mutateAsync: mockMutateAsync}
+            })
+        })
+
+        test('successfully completes OTP verification and passkey registration flow', async () => {
+            const otpCode = '12345678'
+            const mockChallenge = 'dGVzdC1jaGFsbGVuZ2U='
+            const mockUserId = 'dGVzdC11c2VyLWlk'
+
+            // Mock startWebauthnUserRegistration response
+            const mockStartResponse = {
+                challenge: mockChallenge,
+                rp: {
+                    name: 'Test RP',
+                    id: 'example.com'
+                },
+                user: {
+                    id: mockUserId,
+                    name: 'test@example.com',
+                    displayName: 'Test User'
+                },
+                pubKeyCredParams: [
+                    {
+                        type: 'public-key',
+                        alg: -7
+                    }
+                ],
+                authenticatorSelection: {
+                    authenticatorAttachment: 'platform',
+                    userVerification: 'required'
+                },
+                timeout: 60000,
+                attestation: 'none'
+            }
+
+            // Mock WebAuthn credential
+            const mockCredential = {
+                type: 'public-key',
+                id: 'test-credential-id',
+                rawId: new ArrayBuffer(8),
+                response: {
+                    attestationObject: new ArrayBuffer(16),
+                    clientDataJSON: new ArrayBuffer(16)
+                }
+            }
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockResolvedValue(mockCredential)
+            mockFinishWebauthnRegistration.mockResolvedValue({})
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal first
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(screen.getByTestId('otp-auth-modal')).toBeInTheDocument()
+            })
+
+            // Wait for handler to be set
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            // Call handleOtpVerification
+            const result = await otpVerificationHandler(otpCode)
+
+            // Verify startWebauthnUserRegistration was called correctly
+            expect(mockStartWebauthnRegistration).toHaveBeenCalledWith({
+                user_id: 'test@example.com',
+                pwd_action_token: otpCode
+            })
+
+            // Verify navigator.credentials.create was called
+            expect(global.navigator.credentials.create).toHaveBeenCalled()
+            const publicKeyOptions = global.navigator.credentials.create.mock.calls[0][0].publicKey
+
+            // Verify structure and key properties
+            expect(publicKeyOptions.challenge).toBeDefined()
+            expect(publicKeyOptions.rp).toMatchObject({
+                name: 'Test RP',
+                id: 'example.com'
+            })
+            expect(publicKeyOptions.user.id).toBeDefined()
+            expect(Array.isArray(publicKeyOptions.pubKeyCredParams)).toBe(true)
+            expect(publicKeyOptions.authenticatorSelection).toBeDefined()
+            expect(typeof publicKeyOptions.timeout).toBe('number')
+            expect(publicKeyOptions.attestation).toBe('none')
+
+            // Verify finishWebauthnUserRegistration was called correctly
+            expect(mockFinishWebauthnRegistration).toHaveBeenCalledWith({
+                username: 'test@example.com',
+                credential: expect.objectContaining({
+                    type: 'public-key',
+                    id: 'test-credential-id'
+                }),
+                pwd_action_token: otpCode
+            })
+
+            // Verify success result
+            expect(result).toEqual({success: true})
+
+            // Verify modals are closed
+            await waitFor(() => {
+                expect(mockOnClose).toHaveBeenCalled()
+            })
+        })
+
+        test('includes nickname in startWebauthnUserRegistration when provided', async () => {
+            const otpCode = '12345678'
+            const nickname = 'My iPhone'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            const mockCredential = {
+                type: 'public-key',
+                id: 'test-id',
+                rawId: new ArrayBuffer(8),
+                response: {
+                    attestationObject: new ArrayBuffer(16),
+                    clientDataJSON: new ArrayBuffer(16)
+                }
+            }
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockResolvedValue(mockCredential)
+            mockFinishWebauthnRegistration.mockResolvedValue({})
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Set nickname
+            const input = screen.getByPlaceholderText("e.g., 'iPhone', 'Personal Laptop'")
+            await user.type(input, nickname)
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            await otpVerificationHandler(otpCode)
+
+            // Verify nickname was included
+            expect(mockStartWebauthnRegistration).toHaveBeenCalledWith({
+                user_id: 'test@example.com',
+                pwd_action_token: otpCode,
+                nick_name: nickname
+            })
+        })
+
+        test('returns error when startWebauthnUserRegistration fails', async () => {
+            const otpCode = '12345678'
+            const errorMessage = 'Failed to start registration'
+
+            mockStartWebauthnRegistration.mockRejectedValue(new Error(errorMessage))
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+
+            // Verify modals are not closed on error
+            // mockOnClose was called once when opening OTP modal, but not again after error
+            expect(mockOnClose).toHaveBeenCalledTimes(1)
+        })
+
+        test('returns error when WebAuthn API is not available', async () => {
+            const otpCode = '12345678'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            // Remove credentials API
+            delete global.navigator.credentials
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('returns error when user cancels WebAuthn prompt', async () => {
+            const otpCode = '12345678'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            const notAllowedError = new Error('User cancelled')
+            notAllowedError.name = 'NotAllowedError'
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockRejectedValue(notAllowedError)
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('returns error when WebAuthn create returns null credential', async () => {
+            const otpCode = '12345678'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockResolvedValue(null)
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('returns error when finishWebauthnUserRegistration fails', async () => {
+            const otpCode = '12345678'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            const mockCredential = {
+                type: 'public-key',
+                id: 'test-id',
+                rawId: new ArrayBuffer(8),
+                response: {
+                    attestationObject: new ArrayBuffer(16),
+                    clientDataJSON: new ArrayBuffer(16)
+                }
+            }
+
+            const errorMessage = 'Failed to finish registration'
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockResolvedValue(mockCredential)
+            mockFinishWebauthnRegistration.mockRejectedValue(new Error(errorMessage))
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('handles AbortError from WebAuthn API', async () => {
+            const otpCode = '12345678'
+            const mockStartResponse = {
+                challenge: 'dGVzdA==',
+                rp: {name: 'Test', id: 'example.com'},
+                user: {id: 'dGVzdA==', name: 'test@example.com'},
+                pubKeyCredParams: [],
+                timeout: 60000
+            }
+
+            const abortError = new Error('Operation aborted')
+            abortError.name = 'AbortError'
+
+            mockStartWebauthnRegistration.mockResolvedValue(mockStartResponse)
+            global.navigator.credentials.create.mockRejectedValue(abortError)
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            // Open OTP modal
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Something went wrong. Try again!'
+            })
+        })
+
+        test('returns INVALID_TOKEN_ERROR_MESSAGE when startWebauthnUserRegistration fails with 401', async () => {
+            const otpCode = '12345678'
+
+            mockStartWebauthnRegistration.mockRejectedValue(new Error('401'))
+
+            const {user} = renderWithProviders(
+                <PasskeyRegistrationModal isOpen={true} onClose={mockOnClose} />,
+                {
+                    wrapperProps: {appConfig: mockConfig.app}
+                }
+            )
+
+            const registerButton = screen.getByText('Register Passkey')
+            await user.click(registerButton)
+
+            await waitFor(() => {
+                expect(otpVerificationHandler).toBeTruthy()
+            })
+
+            const result = await otpVerificationHandler(otpCode)
+
+            expect(result).toEqual({
+                success: false,
+                error: 'Invalid token, please try again.'
+            })
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/contexts/index.js b/packages/template-retail-react-app/app/contexts/index.js
index d542c27cfb..cc16f6d3ac 100644
--- a/packages/template-retail-react-app/app/contexts/index.js
+++ b/packages/template-retail-react-app/app/contexts/index.js
@@ -11,6 +11,11 @@ export {
     StoreLocatorContext,
     StoreLocatorProvider
 } from '@salesforce/retail-react-app/app/contexts/store-locator-provider'
+export {
+    PasskeyRegistrationContext,
+    PasskeyRegistrationProvider,
+    usePasskeyRegistrationContext
+} from '@salesforce/retail-react-app/app/contexts/passkey-registration-provider'
 
 /**
  * This is the global state for the multiples sites and locales supported in the App.
diff --git a/packages/template-retail-react-app/app/contexts/passkey-registration-provider.jsx b/packages/template-retail-react-app/app/contexts/passkey-registration-provider.jsx
new file mode 100644
index 0000000000..e3d96a5867
--- /dev/null
+++ b/packages/template-retail-react-app/app/contexts/passkey-registration-provider.jsx
@@ -0,0 +1,46 @@
+/*
+ * 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
+ */
+
+import React, {createContext, useContext} from 'react'
+import PropTypes from 'prop-types'
+import {useDisclosure} from '@salesforce/retail-react-app/app/components/shared/ui'
+import PasskeyRegistrationModal from '@salesforce/retail-react-app/app/components/passkey-registration-modal'
+
+export const PasskeyRegistrationContext = createContext(null)
+
+export const PasskeyRegistrationProvider = ({children}) => {
+    const passkeyModal = useDisclosure()
+
+    const value = {
+        passkeyModal: {
+            isOpen: passkeyModal.isOpen,
+            onOpen: passkeyModal.onOpen,
+            onClose: passkeyModal.onClose
+        }
+    }
+
+    return (
+        <PasskeyRegistrationContext.Provider value={value}>
+            {children}
+            <PasskeyRegistrationModal isOpen={passkeyModal.isOpen} onClose={passkeyModal.onClose} />
+        </PasskeyRegistrationContext.Provider>
+    )
+}
+
+PasskeyRegistrationProvider.propTypes = {
+    children: PropTypes.node.isRequired
+}
+
+export const usePasskeyRegistrationContext = () => {
+    const context = useContext(PasskeyRegistrationContext)
+    if (!context) {
+        throw new Error(
+            'usePasskeyRegistrationContext must be used within a PasskeyRegistrationProvider'
+        )
+    }
+    return context
+}
diff --git a/packages/template-retail-react-app/app/contexts/passkey-registration-provider.test.jsx b/packages/template-retail-react-app/app/contexts/passkey-registration-provider.test.jsx
new file mode 100644
index 0000000000..a1228559cf
--- /dev/null
+++ b/packages/template-retail-react-app/app/contexts/passkey-registration-provider.test.jsx
@@ -0,0 +1,188 @@
+/*
+ * 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
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import {render, act, screen} from '@testing-library/react'
+import {
+    PasskeyRegistrationProvider,
+    PasskeyRegistrationContext,
+    usePasskeyRegistrationContext
+} from '@salesforce/retail-react-app/app/contexts/passkey-registration-provider'
+
+// Mock PasskeyRegistrationModal
+jest.mock('@salesforce/retail-react-app/app/components/passkey-registration-modal', () => {
+    const PropTypes = jest.requireActual('prop-types')
+    const MockPasskeyRegistrationModal = ({isOpen, onClose}) => {
+        return isOpen ? (
+            <div data-testid="passkey-registration-modal">
+                <button data-testid="modal-close" onClick={onClose}>
+                    Close
+                </button>
+            </div>
+        ) : null
+    }
+    MockPasskeyRegistrationModal.propTypes = {
+        isOpen: PropTypes.bool.isRequired,
+        onClose: PropTypes.func.isRequired
+    }
+    return MockPasskeyRegistrationModal
+})
+
+describe('PasskeyRegistrationProvider', () => {
+    const TestWrapper = ({children}) => (
+        <PasskeyRegistrationProvider>{children}</PasskeyRegistrationProvider>
+    )
+
+    TestWrapper.propTypes = {
+        children: PropTypes.node
+    }
+
+    it('provides the expected context value', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(PasskeyRegistrationContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        expect(contextValue).toBeTruthy()
+        expect(contextValue?.passkeyModal).toBeDefined()
+        expect(typeof contextValue?.passkeyModal.isOpen).toBe('boolean')
+        expect(typeof contextValue?.passkeyModal.onOpen).toBe('function')
+        expect(typeof contextValue?.passkeyModal.onClose).toBe('function')
+    })
+
+    it('initializes with modal closed', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(PasskeyRegistrationContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        expect(contextValue?.passkeyModal.isOpen).toBe(false)
+    })
+
+    it('handles modal state correctly', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(PasskeyRegistrationContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        // Initially modal should be closed
+        expect(contextValue?.passkeyModal.isOpen).toBe(false)
+        expect(screen.queryByTestId('passkey-registration-modal')).not.toBeInTheDocument()
+
+        // Open modal
+        act(() => {
+            contextValue?.passkeyModal.onOpen()
+        })
+        expect(contextValue?.passkeyModal.isOpen).toBe(true)
+        expect(screen.getByTestId('passkey-registration-modal')).toBeInTheDocument()
+
+        // Close modal
+        act(() => {
+            contextValue?.passkeyModal.onClose()
+        })
+        expect(contextValue?.passkeyModal.isOpen).toBe(false)
+        expect(screen.queryByTestId('passkey-registration-modal')).not.toBeInTheDocument()
+    })
+
+    it('renders children correctly', () => {
+        const TestChild = () => <div data-testid="test-child">Test Child</div>
+
+        const {getByTestId} = render(
+            <TestWrapper>
+                <TestChild />
+            </TestWrapper>
+        )
+
+        expect(getByTestId('test-child')).toBeTruthy()
+        expect(getByTestId('test-child')).toHaveTextContent('Test Child')
+    })
+
+    it('renders PasskeyRegistrationModal component', () => {
+        let contextValue
+        const TestComponent = () => {
+            contextValue = React.useContext(PasskeyRegistrationContext)
+            return null
+        }
+
+        render(
+            <TestWrapper>
+                <TestComponent />
+            </TestWrapper>
+        )
+
+        // Modal should be rendered but not visible initially
+        expect(contextValue?.passkeyModal.isOpen).toBe(false)
+
+        // Open modal to verify it's rendered
+        act(() => {
+            contextValue?.passkeyModal.onOpen()
+        })
+        expect(screen.getByTestId('passkey-registration-modal')).toBeInTheDocument()
+    })
+
+    describe('usePasskeyRegistrationContext', () => {
+        it('returns context value when used within provider', () => {
+            let hookValue
+            const TestComponent = () => {
+                hookValue = usePasskeyRegistrationContext()
+                return null
+            }
+
+            render(
+                <TestWrapper>
+                    <TestComponent />
+                </TestWrapper>
+            )
+
+            expect(hookValue).toBeTruthy()
+            expect(hookValue?.passkeyModal).toBeDefined()
+            expect(typeof hookValue?.passkeyModal.isOpen).toBe('boolean')
+            expect(typeof hookValue?.passkeyModal.onOpen).toBe('function')
+            expect(typeof hookValue?.passkeyModal.onClose).toBe('function')
+        })
+
+        it('throws error when used outside provider', () => {
+            // Suppress console.error for this test
+            const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+            const TestComponent = () => {
+                usePasskeyRegistrationContext()
+                return null
+            }
+
+            expect(() => {
+                render(<TestComponent />)
+            }).toThrow(
+                'usePasskeyRegistrationContext must be used within a PasskeyRegistrationProvider'
+            )
+
+            consoleError.mockRestore()
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/hooks/use-auth-modal.js b/packages/template-retail-react-app/app/hooks/use-auth-modal.js
index d81b62ddea..d1b0c555a1 100644
--- a/packages/template-retail-react-app/app/hooks/use-auth-modal.js
+++ b/packages/template-retail-react-app/app/hooks/use-auth-modal.js
@@ -43,6 +43,8 @@ import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
 import {usePasswordReset} from '@salesforce/retail-react-app/app/hooks/use-password-reset'
 import {isServer} from '@salesforce/retail-react-app/app/utils/utils'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {usePasskeyRegistration} from '@salesforce/retail-react-app/app/hooks/use-passkey-registration'
+import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import {getPasswordlessCallbackUrl} from '@salesforce/retail-react-app/app/utils/auth-utils'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 
@@ -73,7 +75,7 @@ export const AuthModal = ({
     const customerId = useCustomerId()
     const {isRegistered, customerType} = useCustomerType()
     const prevAuthType = usePrevious(customerType)
-
+    const {loginWithPasskey, abortPasskeyLogin} = usePasskeyLogin()
     const customer = useCustomer(
         {parameters: {customerId}},
         {enabled: !!customerId && isRegistered}
@@ -101,6 +103,8 @@ export const AuthModal = ({
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
 
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
+
     const handlePasswordlessLogin = async (email) => {
         try {
             const redirectPath = window.location.pathname + (window.location.search || '')
@@ -233,6 +237,15 @@ export const AuthModal = ({
         if (isOpen) {
             setCurrentView(initialView)
             form.reset()
+            // Prompt user to login without username (discoverable credentials)
+            loginWithPasskey().catch(() => {
+                form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)})
+            })
+        }
+
+        // Cleanup: abort passkey login when modal closes or component unmounts
+        return () => {
+            abortPasskeyLogin()
         }
     }, [isOpen])
 
@@ -270,6 +283,9 @@ export const AuthModal = ({
         onClose()
         setIsOtpAuthOpen(false)
 
+        // Show passkey registration prompt if supported
+        showRegisterPasskeyToast()
+
         // Show a toast only for those registed users returning to the site.
         if (loggingIn) {
             toast({
@@ -280,7 +296,7 @@ export const AuthModal = ({
                         id: 'auth_modal.info.welcome_user'
                     },
                     {
-                        name: customer.data?.firstName || ''
+                        name: customer.data?.firstName || 'back'
                     }
                 )}`,
                 description: `${formatMessage({
diff --git a/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js b/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
index 6d94d4554f..be48968b9d 100644
--- a/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
+++ b/packages/template-retail-react-app/app/hooks/use-auth-modal.test.js
@@ -25,8 +25,12 @@ import Account from '@salesforce/retail-react-app/app/pages/account'
 import {rest} from 'msw'
 import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import * as ReactHookForm from 'react-hook-form'
-import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
 
 jest.setTimeout(60000)
 
@@ -55,10 +59,6 @@ const mockRegisteredCustomer = {
     login: 'customer@test.com'
 }
 
-jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
-    getConfig: jest.fn()
-}))
-
 let authModal = undefined
 const MockedComponent = (props) => {
     const {initialView, isPasswordlessEnabled = false} = props
@@ -84,7 +84,8 @@ MockedComponent.propTypes = {
 // Set up and clean up
 beforeEach(() => {
     authModal = undefined
-    getConfig.mockImplementation(() => mockConfig)
+    // Set default config mock (passkey enabled by default in mockConfig)
+    getConfig.mockReturnValue(mockConfig)
     global.server.use(
         rest.post('*/customers', (req, res, ctx) => {
             return res(ctx.delay(0), ctx.status(200), ctx.json(mockRegisteredCustomer))
@@ -237,11 +238,23 @@ describe('Passwordless enabled', () => {
     })
 
     test('Allows passwordless login', async () => {
+        // Disable passkey to test passwordless in isolation
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: false}
+                }
+            }
+        })
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
             wrapperProps: {
                 bypassAuth: false
             }
         })
+
         const validEmail = 'test@salesforce.com'
 
         // open the modal
@@ -291,6 +304,21 @@ describe('Passwordless enabled', () => {
     })
 
     test('allows passwordless login via Enter key', async () => {
+        jest.spyOn(window, 'location', 'get').mockReturnValue({
+            pathname: '/',
+            origin: 'https://example.com'
+        })
+        // Disable passkey to test passwordless in isolation
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: false}
+                }
+            }
+        })
         const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />)
         const validEmail = 'test@salesforce.com'
 
@@ -588,6 +616,484 @@ test.skip('Allows customer to sign in to their account', async () => {
     )
 })
 
+describe('Passkey login', () => {
+    let mockCredentialsGet
+    let mockPublicKeyCredential
+
+    beforeEach(() => {
+        // Clear all mocks
+        jest.clearAllMocks()
+
+        // Override getConfig to return config with passkey enabled
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: {
+                ...mockConfig.app,
+                login: {
+                    ...mockConfig.app.login,
+                    passkey: {enabled: true}
+                }
+            }
+        })
+
+        // Mock WebAuthn API - default to never resolving (simulating no user action)
+        mockCredentialsGet = jest.fn().mockImplementation(() => new Promise(() => {}))
+        mockPublicKeyCredential = {
+            parseRequestOptionsFromJSON: jest.fn(),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true),
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true)
+        }
+
+        global.PublicKeyCredential = mockPublicKeyCredential
+        global.window.PublicKeyCredential = mockPublicKeyCredential
+        global.navigator.credentials = {
+            get: mockCredentialsGet
+        }
+
+        // Mock parseRequestOptionsFromJSON to return mock options
+        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
+            challenge: 'mock-challenge',
+            allowCredentials: []
+        })
+
+        // Setup MSW handlers for WebAuthn API endpoints
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.json({
+                        publicKey: {
+                            challenge: 'mock-challenge-data',
+                            rpId: 'example.com',
+                            allowCredentials: [],
+                            timeout: 60000
+                        }
+                    })
+                )
+            }),
+            rest.post('*/oauth2/webauthn/authenticate/finish', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.json({
+                        tokenResponse: {
+                            customer_id: 'customerid_passkey',
+                            access_token: registerUserToken,
+                            refresh_token: 'testrefeshtoken_passkey',
+                            usid: 'testusid_passkey',
+                            enc_user_id: 'testEncUserId_passkey',
+                            id_token: 'testIdToken_passkey'
+                        }
+                    })
+                )
+            })
+        )
+    })
+
+    afterEach(() => {
+        delete global.PublicKeyCredential
+        delete global.window.PublicKeyCredential
+    })
+
+    test('Triggers passkey login when modal opens with passkey enabled', async () => {
+        // Mock credential that will be returned from navigator.credentials.get
+        const mockCredential = {
+            id: 'mock-credential-id',
+            rawId: new ArrayBuffer(32),
+            type: 'public-key',
+            response: {
+                authenticatorData: new ArrayBuffer(37),
+                clientDataJSON: new ArrayBuffer(128),
+                signature: new ArrayBuffer(64),
+                userHandle: new ArrayBuffer(16)
+            },
+            getClientExtensionResults: jest.fn().mockReturnValue({}),
+            toJSON: jest.fn().mockReturnValue({
+                id: 'mock-credential-id',
+                rawId: 'mock-raw-id',
+                type: 'public-key',
+                response: {
+                    authenticatorData: 'mock-auth-data',
+                    clientDataJSON: 'mock-client-data',
+                    signature: 'mock-signature',
+                    userHandle: 'mock-user-handle'
+                }
+            })
+        }
+
+        mockCredentialsGet.mockResolvedValue(mockCredential)
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Wait for passkey flow to be triggered
+        await waitFor(
+            () => {
+                expect(mockCredentialsGet).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        mediation: 'conditional'
+                    })
+                )
+            },
+            {timeout: 2000}
+        )
+    })
+
+    test('User can login with other method when passkey login is cancelled', async () => {
+        // Simulate user cancelling passkey selection (NotAllowedError)
+        const notAllowedError = new Error('User cancelled')
+        notAllowedError.name = 'NotAllowedError'
+        mockCredentialsGet.mockRejectedValue(notAllowedError)
+
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Login form should be shown
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
+            expect(screen.getByLabelText(/email/i)).toBeInTheDocument()
+            expect(screen.getByText(/continue/i)).toBeInTheDocument()
+            expect(screen.getByText(/password/i)).toBeInTheDocument()
+        })
+    })
+
+    test('Shows error when passkey authentication fails with error from the browser', async () => {
+        // Simulate error in loginWithPasskey hook
+        mockCredentialsGet.mockRejectedValue(new Error('Authentication failed'))
+
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Should show error - passkey error should be caught and handled
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/Something went wrong. Try again!/i)).toBeInTheDocument()
+        })
+    })
+
+    test('Shows error when passkey authentication fails with error from the WebAuthn API', async () => {
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(401),
+                    ctx.json({message: 'Authentication failed'})
+                )
+            })
+        )
+
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Should show error - 401 error from WebAuthn API should be caught and converted to user-friendly message
+        await waitFor(() => {
+            expect(screen.getByText(/Something went wrong. Try again!/i)).toBeInTheDocument()
+        })
+    })
+
+    test('Passkey prompt is aborted when modal is closed', async () => {
+        // Capture the abort signal passed to credentials.get
+        let capturedSignal = null
+
+        // Mock credentials.get to capture the abort signal and stay pending
+        mockCredentialsGet.mockImplementation(({signal}) => {
+            capturedSignal = signal
+            return new Promise(() => {
+                // Never resolve - simulates passkey prompt staying open
+            })
+        })
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Wait for passkey conditional mediation to start and capture the signal
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    mediation: 'conditional',
+                    signal: expect.any(AbortSignal)
+                })
+            )
+            expect(capturedSignal).not.toBeNull()
+        })
+
+        // Verify signal is not yet aborted
+        expect(capturedSignal.aborted).toBe(false)
+
+        // Close the modal by clicking the close button
+        const closeButton = screen.getByLabelText(/close login form/i)
+        await user.click(closeButton)
+
+        // Verify the signal was aborted when modal closed
+        expect(capturedSignal.aborted).toBe(true)
+    })
+
+    test('Passkey prompt is aborted when user logs in', async () => {
+        // This test verifies that when the user logs in while the passkey
+        // prompt is pending, the modal closes (login succeeds) and the passkey flow is
+        // aborted via the cleanup that runs when the modal closes.
+        let capturedSignal = null
+
+        mockCredentialsGet.mockImplementation(({signal}) => {
+            expect(signal).toBeInstanceOf(AbortSignal)
+            capturedSignal = signal
+            return new Promise(() => {
+                // Never resolve - simulates passkey prompt staying open
+            })
+        })
+
+        // Successful email/password login
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            ),
+            rest.post('*/baskets/actions/merge', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.json(mockMergedBasket))
+            })
+        )
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal - passkey flow starts and stays pending
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    mediation: 'conditional',
+                    signal: expect.any(AbortSignal)
+                })
+            )
+            expect(capturedSignal).not.toBeNull()
+        })
+
+        // User logs in with password while passkey prompt is still open
+        await user.type(screen.getByLabelText(/email/i), 'customer@test.com')
+        await user.type(screen.getByLabelText(/^password$/i), 'Password!1')
+        await user.click(screen.getByRole('button', {name: /sign in/i}))
+
+        await waitFor(
+            () => {
+                // Verify the passkey prompt was aborted
+                expect(capturedSignal.aborted).toBe(true)
+                // Verify the modal was closed
+                expect(screen.queryByRole('button', {name: /sign in/i})).not.toBeInTheDocument()
+                // Verify the user was signed in
+                expect(screen.getByText(/You're now signed in./i)).toBeInTheDocument()
+            },
+            {timeout: 3000}
+        )
+    })
+
+    test('Does not trigger passkey when not enabled', async () => {
+        const mockAppConfig = {
+            ...mockConfig.app,
+            login: {
+                ...mockConfig.app.login,
+                passkey: {enabled: false}
+            }
+        }
+
+        // Override getConfig to return config with passkey disabled
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Wait for modal to open
+        await waitFor(() => {
+            expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
+        })
+
+        // Should not have called WebAuthn APIs
+        expect(mockCredentialsGet).not.toHaveBeenCalled()
+    })
+
+    test('Successfully logs in with passkey', async () => {
+        const mockCredential = {
+            id: 'mock-credential-id',
+            rawId: new ArrayBuffer(32),
+            type: 'public-key',
+            response: {
+                authenticatorData: new ArrayBuffer(37),
+                clientDataJSON: new ArrayBuffer(128),
+                signature: new ArrayBuffer(64),
+                userHandle: new ArrayBuffer(16)
+            },
+            getClientExtensionResults: jest.fn().mockReturnValue({}),
+            toJSON: jest.fn().mockReturnValue({
+                id: 'mock-credential-id',
+                rawId: 'mock-raw-id',
+                type: 'public-key',
+                response: {
+                    authenticatorData: 'mock-auth-data',
+                    clientDataJSON: 'mock-client-data',
+                    signature: 'mock-signature',
+                    userHandle: 'mock-user-handle'
+                }
+            })
+        }
+
+        mockCredentialsGet.mockResolvedValue(mockCredential)
+
+        // Mock customer as registered after passkey login
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            )
+        )
+
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+
+        // Open the modal - this should trigger passkey login automatically
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        // Wait for passkey flow to be triggered when modal opens
+        await waitFor(
+            () => {
+                expect(mockCredentialsGet).toHaveBeenCalled()
+            },
+            {timeout: 5000}
+        )
+
+        // login successfully and close the modal
+        await waitFor(() => {
+            expect(screen.queryByRole('button', {name: /Sign in/i})).not.toBeInTheDocument()
+            expect(screen.getByText(/You're now signed in./i)).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
+    })
+
+    afterEach(() => {
+        delete global.PublicKeyCredential
+        delete global.window.PublicKeyCredential
+    })
+
+    test('shows passkey registration toast after login', async () => {
+        const {user} = renderWithProviders(<MockedComponent isPasswordlessEnabled={true} />, {
+            wrapperProps: {
+                bypassAuth: false
+            }
+        })
+        const validEmail = 'test@salesforce.com'
+        const validPassword = 'Password123!'
+
+        const trigger = screen.getByText(/open modal/i)
+        await user.click(trigger)
+
+        await waitFor(() => {
+            expect(screen.getByText(/Welcome Back/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(() => {
+            expect(screen.getByText(/Create Passkey/i)).toBeInTheDocument()
+        })
+    })
+})
+
 describe('Reset password', function () {
     beforeEach(() => {
         global.server.use(
diff --git a/packages/template-retail-react-app/app/hooks/use-passkey-login.js b/packages/template-retail-react-app/app/hooks/use-passkey-login.js
new file mode 100644
index 0000000000..9cff1a6771
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-passkey-login.js
@@ -0,0 +1,134 @@
+/*
+ * 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 {useRef} from 'react'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useAuthHelper, AuthHelpers, useUsid} from '@salesforce/commerce-sdk-react'
+import {arrayBufferToBase64Url} from '@salesforce/retail-react-app/app/utils/utils'
+
+/**
+ * This hook provides commerce-react-sdk hooks to simplify the passkey login flow.
+ */
+export const usePasskeyLogin = () => {
+    const startWebauthnAuthentication = useAuthHelper(AuthHelpers.StartWebauthnAuthentication)
+    const finishWebauthnAuthentication = useAuthHelper(AuthHelpers.FinishWebauthnAuthentication)
+    const {usid} = useUsid()
+    const abortControllerRef = useRef(null)
+
+    /**
+     * Aborts any pending passkey login request.
+     * This is useful when the user logs in with a different method (e.g., password)
+     * while a passkey prompt (e.g., Touch ID, Face ID, etc.) is still open.
+     */
+    const abortPasskeyLogin = () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort()
+            abortControllerRef.current = null
+        }
+    }
+
+    const loginWithPasskey = 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 supported in this browser
+        if (
+            !window.PublicKeyCredential ||
+            !window.PublicKeyCredential.isConditionalMediationAvailable
+        ) {
+            return
+        }
+
+        // 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/PublicKeyCredential/isConditionalMediationAvailable_static
+        const isCMA = await window.PublicKeyCredential.isConditionalMediationAvailable()
+        if (!isCMA) {
+            return
+        }
+
+        let startWebauthnAuthenticationResponse
+        try {
+            startWebauthnAuthenticationResponse = await startWebauthnAuthentication.mutateAsync({})
+        } catch (error) {
+            // 412 is returned when user attempts to authenticate within 1 minute of a previous attempt
+            // We return early in this case to avoid showing an error to the user
+            if (error.response?.status === 412) {
+                return
+            }
+            throw error
+        }
+
+        // Transform response for WebAuthn API to send to navigator.credentials.get()
+        // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/parseRequestOptionsFromJSON_static
+        const options = window.PublicKeyCredential.parseRequestOptionsFromJSON(
+            startWebauthnAuthenticationResponse.publicKey
+        )
+
+        // Create an AbortController to allow cancelling the passkey prompt
+        // This is needed when the user logs in with a different method or
+        // navigates away from the page while the passkey prompt is open
+        abortControllerRef.current = new AbortController()
+
+        // Get passkey credential from browser
+        // https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get
+        let credential
+        try {
+            credential = await navigator.credentials.get({
+                publicKey: options,
+                mediation: 'conditional',
+                signal: abortControllerRef.current.signal
+            })
+        } catch (error) {
+            // NotAllowedError is thrown when the user cancels the passkey login
+            // AbortError is thrown when the passkey login is aborted programmatically (e.g., user logged in with password)
+            // We return early in these cases to avoid showing an error to the user
+            if (error.name === 'NotAllowedError' || error.name === 'AbortError') {
+                return
+            }
+            console.error('Error getting passkey credential from browser:', error)
+            throw error
+        } finally {
+            abortControllerRef.current = null
+        }
+
+        // Encode credential before sending to SLAS
+        // https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential/toJSON
+        let encodedCredential
+        try {
+            encodedCredential = credential.toJSON()
+        } catch (error) {
+            // Fallback to manual encoding if toJSON() fails.
+            // Some passkey providers (e.g., 1Password) may not support the toJSON() method and return an error.
+            // In this case, we manually encode the credential.
+            encodedCredential = {
+                id: credential.id,
+                rawId: arrayBufferToBase64Url(credential.rawId),
+                type: credential.type,
+                clientExtensionResults: credential.getClientExtensionResults(),
+                response: {
+                    authenticatorData: arrayBufferToBase64Url(
+                        credential.response.authenticatorData
+                    ),
+                    clientDataJSON: arrayBufferToBase64Url(credential.response.clientDataJSON),
+                    signature: arrayBufferToBase64Url(credential.response.signature),
+                    userHandle: arrayBufferToBase64Url(credential.response.userHandle)
+                }
+            }
+        }
+
+        await finishWebauthnAuthentication.mutateAsync({
+            credential: encodedCredential,
+            usid
+        })
+        return
+    }
+
+    return {loginWithPasskey, abortPasskeyLogin}
+}
diff --git a/packages/template-retail-react-app/app/hooks/use-passkey-login.test.js b/packages/template-retail-react-app/app/hooks/use-passkey-login.test.js
new file mode 100644
index 0000000000..04c1fffe02
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-passkey-login.test.js
@@ -0,0 +1,401 @@
+/*
+ * 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
+ */
+import React from 'react'
+import {rest} from 'msw'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
+import {
+    renderWithProviders,
+    registerUserToken
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+
+const mockCredential = {
+    id: 'test-credential-id',
+    rawId: new ArrayBuffer(8),
+    type: 'public-key',
+    getClientExtensionResults: () => ({}),
+    toJSON: () => ({
+        id: 'test-credential-id',
+        rawId: 'AAAAAAAAAAA',
+        type: 'public-key',
+        clientExtensionResults: {},
+        response: {
+            authenticatorData: 'AAAAAAAAAAA',
+            clientDataJSON: 'AAAAAAAAAAA',
+            signature: 'AAAAAAAAAAA',
+            userHandle: 'AAAAAAAAAAA'
+        }
+    }),
+    response: {
+        authenticatorData: new ArrayBuffer(8),
+        clientDataJSON: new ArrayBuffer(8),
+        signature: new ArrayBuffer(8),
+        userHandle: new ArrayBuffer(8)
+    }
+}
+
+const mockStartWebauthnAuthenticationResponse = {
+    publicKey: {
+        challenge: 'DZdUeRgEm5m1D8Fqp8pzZZesdHkf1Pqoe-MqCA8gVw8',
+        timeout: 60000,
+        rpId: 'localhost',
+        allowCredentials: [
+            {
+                id: 'test-credential-id',
+                type: 'public-key',
+                transports: []
+            }
+        ]
+    }
+}
+
+const mockFinishWebauthnAuthenticationResponse = {
+    tokenResponse: {
+        access_token: registerUserToken,
+        customer_id: 'customerid',
+        refresh_token: 'testrefeshtoken',
+        usid: 'testusid',
+        enc_user_id: 'testEncUserId',
+        id_token: 'testIdToken'
+    }
+}
+
+// Mock getConfig to enable passkey
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
+
+// Mock WebAuthn APIs
+const mockGetCredentials = jest.fn()
+
+// Mock PublicKeyCredential static methods
+const mockIsConditionalMediationAvailable = jest.fn()
+const mockParseRequestOptionsFromJSON = jest.fn()
+
+const MockComponent = () => {
+    const {loginWithPasskey, abortPasskeyLogin} = usePasskeyLogin()
+    const [result, setResult] = React.useState(null)
+
+    const handleLogin = () => {
+        loginWithPasskey()
+            .then(() => setResult('resolved'))
+            .catch(() => setResult('rejected'))
+    }
+    const handleAbort = () => {
+        abortPasskeyLogin()
+    }
+    return (
+        <div>
+            <button data-testid="login-with-passkey" onClick={handleLogin} />
+            <button data-testid="abort-passkey-login" onClick={handleAbort} />
+            {result && <span data-testid="login-result">{result}</span>}
+        </div>
+    )
+}
+
+describe('usePasskeyLogin', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json(mockStartWebauthnAuthenticationResponse)
+                )
+            }),
+            rest.post('*/oauth2/webauthn/authenticate/finish', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(200),
+                    ctx.json(mockFinishWebauthnAuthenticationResponse)
+                )
+            })
+        )
+
+        getConfig.mockReturnValue(mockConfig)
+
+        // Mock PublicKeyCredential with static methods
+        const mockPublicKeyCredential = {
+            isConditionalMediationAvailable: mockIsConditionalMediationAvailable,
+            parseRequestOptionsFromJSON: mockParseRequestOptionsFromJSON
+        }
+        global.window.PublicKeyCredential = mockPublicKeyCredential
+        global.PublicKeyCredential = mockPublicKeyCredential
+
+        // Default mock implementations for PublicKeyCredential static methods
+        mockIsConditionalMediationAvailable.mockResolvedValue(true)
+        // parseRequestOptionsFromJSON should return parsed options, not a credential
+        mockParseRequestOptionsFromJSON.mockReturnValue({
+            challenge: mockStartWebauthnAuthenticationResponse.publicKey.challenge,
+            timeout: mockStartWebauthnAuthenticationResponse.publicKey.timeout,
+            rpId: mockStartWebauthnAuthenticationResponse.publicKey.rpId
+        })
+
+        // Mock navigator.credentials.get
+        global.navigator.credentials = {
+            get: mockGetCredentials
+        }
+
+        // Mock navigator.credentials.get to return a mock credential
+        mockGetCredentials.mockResolvedValue(mockCredential)
+    })
+
+    describe('loginWithPasskey', () => {
+        test('calls navigator.credentials.get with the correct parameters when all conditions are met', async () => {
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            // Check that credentials.get is called with the correct parameters
+            await waitFor(() => {
+                expect(mockGetCredentials).toHaveBeenCalledWith({
+                    publicKey: expect.objectContaining({
+                        challenge: expect.any(String),
+                        timeout: expect.any(Number),
+                        rpId: expect.any(String)
+                    }),
+                    mediation: 'conditional',
+                    signal: expect.any(AbortSignal)
+                })
+            })
+        })
+
+        test('does not call navigator.credentials.get when passkey is not enabled', async () => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {
+                            enabled: false
+                        }
+                    }
+                }
+            })
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            expect(mockGetCredentials).not.toHaveBeenCalled()
+        })
+
+        test('does not start passkey login when PublicKeyCredential is not available', async () => {
+            delete global.window.PublicKeyCredential
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            expect(mockGetCredentials).not.toHaveBeenCalled()
+        })
+
+        test('does not start passkey login when conditional mediation is not available', async () => {
+            mockIsConditionalMediationAvailable.mockResolvedValue(false)
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            await waitFor(() => {
+                expect(mockIsConditionalMediationAvailable).toHaveBeenCalled()
+            })
+
+            expect(mockGetCredentials).not.toHaveBeenCalled()
+        })
+
+        test('falls back to manual encoding when toJSON() is not supported', async () => {
+            // Create a credential mock where toJSON() throws an error (e.g., 1Password)
+            const credentialWithoutToJSON = {
+                ...mockCredential,
+                toJSON: jest.fn(() => {
+                    throw new Error('toJSON is not supported')
+                })
+            }
+
+            // Reset and set the mock for this specific test to ensure it returns the credential
+            mockGetCredentials.mockResolvedValue(credentialWithoutToJSON)
+
+            global.server.use(
+                rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                    return res(
+                        ctx.delay(0),
+                        ctx.status(200),
+                        ctx.json(mockStartWebauthnAuthenticationResponse)
+                    )
+                }),
+                rest.post('*/oauth2/webauthn/authenticate/finish', async (req, res, ctx) => {
+                    const body = await req.json()
+                    // Assert: credential is still manually encoded when toJSON() is not supported
+                    expect(body).toEqual(
+                        expect.objectContaining({
+                            credential: expect.objectContaining({
+                                id: 'test-credential-id',
+                                rawId: expect.any(String),
+                                type: 'public-key',
+                                clientExtensionResults: {},
+                                response: expect.objectContaining({
+                                    authenticatorData: expect.any(String),
+                                    clientDataJSON: expect.any(String),
+                                    signature: expect.any(String),
+                                    userHandle: expect.any(String)
+                                })
+                            }),
+                            // usid used in the test environment
+                            usid: '8e883973-68eb-41fe-a3c5-756232652ff5'
+                        })
+                    )
+                    return res(
+                        ctx.delay(0),
+                        ctx.status(200),
+                        ctx.json(mockFinishWebauthnAuthenticationResponse)
+                    )
+                })
+            )
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            await waitFor(() => {
+                expect(mockGetCredentials).toHaveBeenCalled()
+            })
+        })
+
+        test.each(['NotAllowedError', 'AbortError'])(
+            'returns early without error when %s is thrown from navigator.credentials.get',
+            async (errorName) => {
+                const error = new Error()
+                error.name = errorName
+                mockGetCredentials.mockRejectedValue(error)
+
+                renderWithProviders(<MockComponent />)
+
+                const trigger = screen.getByTestId('login-with-passkey')
+                fireEvent.click(trigger)
+
+                await waitFor(() => expect(mockGetCredentials).toHaveBeenCalled())
+                await waitFor(() =>
+                    expect(screen.getByTestId('login-result')).toHaveTextContent('resolved')
+                )
+            }
+        )
+
+        test('returns early without error when 412 is returned from startWebauthnAuthentication', async () => {
+            global.server.use(
+                rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                    return res(
+                        ctx.delay(0),
+                        ctx.status(412),
+                        ctx.json({message: 'Authenticate not started for: user@example.com"'})
+                    )
+                })
+            )
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            expect(mockGetCredentials).not.toHaveBeenCalled()
+            await waitFor(() =>
+                expect(screen.getByTestId('login-result')).toHaveTextContent('resolved')
+            )
+        })
+
+        test('throws error when other error is returned from startWebauthnAuthentication', async () => {
+            global.server.use(
+                rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                    return res(ctx.delay(0), ctx.status(500), ctx.json({message: '500 Error'}))
+                })
+            )
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            await waitFor(() =>
+                expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+            )
+        })
+
+        test('throws error when other error is returned from finishWebauthnAuthentication', async () => {
+            global.server.use(
+                rest.post('*/oauth2/webauthn/authenticate/finish', (req, res, ctx) => {
+                    return res(ctx.delay(0), ctx.status(500), ctx.json({message: '500 Error'}))
+                })
+            )
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            await waitFor(() =>
+                expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+            )
+        })
+
+        test('throws error when other error is returned from navigator.credentials.get', async () => {
+            const networkError = new Error('NetworkError')
+            networkError.name = 'NetworkError'
+            mockGetCredentials.mockRejectedValue(networkError)
+
+            renderWithProviders(<MockComponent />)
+
+            const trigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(trigger)
+
+            await waitFor(() =>
+                expect(screen.getByTestId('login-result')).toHaveTextContent('rejected')
+            )
+        })
+    })
+
+    describe('abortPasskeyLogin', () => {
+        test('aborts the pending passkey request', async () => {
+            // Return a promise that rejects with AbortError when the abort signal fires
+            mockGetCredentials.mockImplementation(({signal}) => {
+                return new Promise((resolve, reject) => {
+                    signal.addEventListener('abort', () => {
+                        const abortError = new Error('Aborted')
+                        abortError.name = 'AbortError'
+                        reject(abortError)
+                    })
+                })
+            })
+
+            renderWithProviders(<MockComponent />)
+
+            const loginTrigger = screen.getByTestId('login-with-passkey')
+            fireEvent.click(loginTrigger)
+
+            // Wait for credentials.get to be called (passkey prompt is "waiting")
+            await waitFor(() => expect(mockGetCredentials).toHaveBeenCalled())
+
+            // Abort while navigator.credentials.get is pending
+            const abortTrigger = screen.getByTestId('abort-passkey-login')
+            fireEvent.click(abortTrigger)
+
+            // Hook catches AbortError and returns, so loginWithPasskey resolves
+            await waitFor(() =>
+                expect(screen.getByTestId('login-result')).toHaveTextContent('resolved')
+            )
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/hooks/use-passkey-registration.js b/packages/template-retail-react-app/app/hooks/use-passkey-registration.js
new file mode 100644
index 0000000000..26c8b8193d
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-passkey-registration.js
@@ -0,0 +1,111 @@
+/*
+ * 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
+ */
+
+import React from 'react'
+import {useIntl} from 'react-intl'
+import {
+    Box,
+    Button,
+    CloseButton,
+    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 and passkey modal state
+ */
+export const usePasskeyRegistration = () => {
+    const toast = useToast()
+    const {passkeyModal} = usePasskeyRegistrationContext()
+    const {formatMessage} = useIntl()
+
+    /**
+     * 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,
+            isClosable: true,
+            render: ({onClose}) => (
+                <Box
+                    color="white"
+                    p={4}
+                    bg="green.500"
+                    borderRadius="md"
+                    boxShadow="lg"
+                    maxWidth="400px"
+                    position="relative"
+                >
+                    <CloseButton
+                        position="absolute"
+                        right={2}
+                        top={2}
+                        color="white"
+                        onClick={onClose}
+                        aria-label={formatMessage({
+                            id: 'passkey_registration.toast.button.close.assistive_msg',
+                            defaultMessage: 'Close toast'
+                        })}
+                    />
+                    <Box mb={3} fontWeight="medium">
+                        {formatMessage({
+                            id: 'passkey_registration.toast.message',
+                            defaultMessage: 'Create a passkey for a more secure and easier login'
+                        })}
+                    </Box>
+                    <Button
+                        size="sm"
+                        colorScheme="whiteAlpha"
+                        onClick={() => {
+                            onClose()
+                            passkeyModal.onOpen()
+                        }}
+                    >
+                        {formatMessage({
+                            id: 'passkey_registration.toast.button.create',
+                            defaultMessage: 'Create Passkey'
+                        })}
+                    </Button>
+                </Box>
+            )
+        })
+    }
+
+    return {
+        showRegisterPasskeyToast,
+        passkeyModal
+    }
+}
diff --git a/packages/template-retail-react-app/app/hooks/use-passkey-registration.test.js b/packages/template-retail-react-app/app/hooks/use-passkey-registration.test.js
new file mode 100644
index 0000000000..79aefd81f6
--- /dev/null
+++ b/packages/template-retail-react-app/app/hooks/use-passkey-registration.test.js
@@ -0,0 +1,361 @@
+/*
+ * 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
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {rest} from 'msw'
+import {screen, waitFor} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {usePasskeyRegistration} from '@salesforce/retail-react-app/app/hooks/use-passkey-registration'
+import {PasskeyRegistrationProvider} from '@salesforce/retail-react-app/app/contexts/passkey-registration-provider'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
+
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
+
+// Mock PasskeyRegistrationModal
+jest.mock('@salesforce/retail-react-app/app/components/passkey-registration-modal/index', () => {
+    const PropTypes = jest.requireActual('prop-types')
+    const MockPasskeyRegistrationModal = ({isOpen, onClose}) => {
+        return isOpen ? (
+            <div data-testid="passkey-registration-modal">
+                <button data-testid="modal-close" onClick={onClose}>
+                    Close
+                </button>
+            </div>
+        ) : null
+    }
+    MockPasskeyRegistrationModal.propTypes = {
+        isOpen: PropTypes.bool,
+        onClose: PropTypes.func
+    }
+    return MockPasskeyRegistrationModal
+})
+
+// Mock Commerce SDK hooks
+const mockMutateAsync = jest.fn()
+const mockUseAuthHelper = jest.fn()
+jest.mock('@salesforce/commerce-sdk-react', () => ({
+    ...jest.requireActual('@salesforce/commerce-sdk-react'),
+    useAuthHelper: (param) => mockUseAuthHelper(param)
+}))
+
+// Mock useCurrentCustomer
+const mockUseCurrentCustomer = jest.fn()
+jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
+    useCurrentCustomer: () => mockUseCurrentCustomer()
+}))
+
+const TestComponent = () => {
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
+
+    return (
+        <div>
+            <button data-testid="show-toast-button" onClick={showRegisterPasskeyToast}>
+                Show Toast
+            </button>
+        </div>
+    )
+}
+
+const TestComponentWithProvider = ({children}) => (
+    <PasskeyRegistrationProvider>{children}</PasskeyRegistrationProvider>
+)
+
+TestComponentWithProvider.propTypes = {
+    children: PropTypes.node.isRequired
+}
+
+describe('usePasskeyRegistration', () => {
+    beforeEach(() => {
+        jest.clearAllMocks()
+        getConfig.mockReturnValue(mockConfig)
+        mockUseCurrentCustomer.mockReturnValue({
+            data: {email: 'test@example.com'}
+        })
+        mockUseAuthHelper.mockReturnValue({
+            mutateAsync: mockMutateAsync
+        })
+
+        // Mock product API calls that may be triggered by components in the provider tree
+        global.server.use(
+            rest.get('*/products*', (req, res, ctx) => {
+                return res(ctx.delay(0), ctx.status(200), ctx.json({data: []}))
+            })
+        )
+    })
+
+    describe('Hook Return Values', () => {
+        test('returns showRegisterPasskeyToast function and passkeyModal state', () => {
+            renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            expect(screen.getByTestId('show-toast-button')).toBeInTheDocument()
+            expect(screen.queryByTestId('passkey-registration-modal')).not.toBeInTheDocument()
+        })
+
+        test('initializes with modal closed', () => {
+            renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            expect(screen.queryByTestId('passkey-registration-modal')).not.toBeInTheDocument()
+        })
+    })
+
+    describe('Toast Functionality', () => {
+        beforeEach(() => {
+            getConfig.mockReturnValue(mockConfig)
+            global.PublicKeyCredential = {
+                isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+                isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+            }
+            global.window.PublicKeyCredential = global.PublicKeyCredential
+        })
+
+        afterEach(() => {
+            delete global.PublicKeyCredential
+            delete global.window.PublicKeyCredential
+        })
+
+        test('displays toast when showRegisterPasskeyToast is called', async () => {
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            const showToastButton = screen.getByTestId('show-toast-button')
+            await user.click(showToastButton)
+
+            await waitFor(() => {
+                expect(
+                    screen.getByText('Create a passkey for a more secure and easier login')
+                ).toBeInTheDocument()
+            })
+        })
+
+        test('toast contains Create Passkey button', async () => {
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            const showToastButton = screen.getByTestId('show-toast-button')
+            await user.click(showToastButton)
+
+            await waitFor(() => {
+                expect(screen.getByText('Create Passkey')).toBeInTheDocument()
+            })
+        })
+    })
+
+    describe('Modal Integration', () => {
+        beforeEach(() => {
+            getConfig.mockReturnValue(mockConfig)
+            global.PublicKeyCredential = {
+                isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true),
+                isConditionalMediationAvailable: jest.fn().mockResolvedValue(true)
+            }
+            global.window.PublicKeyCredential = global.PublicKeyCredential
+        })
+
+        afterEach(() => {
+            delete global.PublicKeyCredential
+            delete global.window.PublicKeyCredential
+        })
+
+        test('clicking Create Passkey button in toast opens modal', async () => {
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            // Show toast
+            const showToastButton = screen.getByTestId('show-toast-button')
+            await user.click(showToastButton)
+
+            // Wait for toast to appear and click Create Passkey button
+            await waitFor(() => {
+                expect(screen.getByText('Create Passkey')).toBeInTheDocument()
+            })
+
+            const createPasskeyButton = screen.getByText('Create Passkey')
+            await user.click(createPasskeyButton)
+
+            // Modal should open
+            await waitFor(() => {
+                expect(screen.getByTestId('passkey-registration-modal')).toBeInTheDocument()
+            })
+        })
+
+        test('can close modal using onClose', async () => {
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            // Show toast and open modal
+            const showToastButton = screen.getByTestId('show-toast-button')
+            await user.click(showToastButton)
+
+            await waitFor(() => {
+                expect(screen.getByText('Create Passkey')).toBeInTheDocument()
+            })
+
+            const createPasskeyButton = screen.getByText('Create Passkey')
+            await user.click(createPasskeyButton)
+
+            await waitFor(() => {
+                expect(screen.getByTestId('passkey-registration-modal')).toBeInTheDocument()
+            })
+
+            // Close modal
+            const closeButton = screen.getByTestId('modal-close')
+            await user.click(closeButton)
+
+            await waitFor(() => {
+                expect(screen.queryByTestId('passkey-registration-modal')).not.toBeInTheDocument()
+            })
+        })
+    })
+
+    describe('Preconditions for showing the toast', () => {
+        let mockIsUserVerifying
+        let mockIsConditionalMediation
+
+        beforeEach(() => {
+            mockIsUserVerifying = jest.fn().mockResolvedValue(true)
+            mockIsConditionalMediation = jest.fn().mockResolvedValue(true)
+            global.PublicKeyCredential = {
+                isUserVerifyingPlatformAuthenticatorAvailable: mockIsUserVerifying,
+                isConditionalMediationAvailable: mockIsConditionalMediation
+            }
+            global.window.PublicKeyCredential = global.PublicKeyCredential
+        })
+
+        afterEach(() => {
+            delete global.PublicKeyCredential
+            delete global.window.PublicKeyCredential
+        })
+
+        test('does not display toast when passkey is disabled in config', async () => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {enabled: false}
+                    }
+                }
+            })
+
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            await user.click(screen.getByTestId('show-toast-button'))
+            await waitFor(() => {
+                expect(mockIsUserVerifying).not.toHaveBeenCalled()
+            })
+            expect(
+                screen.queryByText('Create a passkey for a more secure and easier login')
+            ).not.toBeInTheDocument()
+        })
+
+        test('does not display toast when PublicKeyCredential is not available', async () => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {enabled: true}
+                    }
+                }
+            })
+            delete global.PublicKeyCredential
+            delete global.window.PublicKeyCredential
+
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            await user.click(screen.getByTestId('show-toast-button'))
+
+            expect(
+                screen.queryByText('Create a passkey for a more secure and easier login')
+            ).not.toBeInTheDocument()
+        })
+
+        test('does not display toast when isUserVerifyingPlatformAuthenticatorAvailable returns false', async () => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {enabled: true}
+                    }
+                }
+            })
+            mockIsUserVerifying.mockResolvedValue(false)
+
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            await user.click(screen.getByTestId('show-toast-button'))
+
+            expect(
+                screen.queryByText('Create a passkey for a more secure and easier login')
+            ).not.toBeInTheDocument()
+        })
+
+        test('does not display toast when isConditionalMediationAvailable returns false', async () => {
+            getConfig.mockReturnValue({
+                ...mockConfig,
+                app: {
+                    ...mockConfig.app,
+                    login: {
+                        ...mockConfig.app.login,
+                        passkey: {enabled: true}
+                    }
+                }
+            })
+            mockIsConditionalMediation.mockResolvedValue(false)
+
+            const {user} = renderWithProviders(
+                <TestComponentWithProvider>
+                    <TestComponent />
+                </TestComponentWithProvider>
+            )
+
+            await user.click(screen.getByTestId('show-toast-button'))
+
+            expect(
+                screen.queryByText('Create a passkey for a more secure and easier login')
+            ).not.toBeInTheDocument()
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/pages/checkout/index.jsx b/packages/template-retail-react-app/app/pages/checkout/index.jsx
index cbc300c7f3..8d9627d28a 100644
--- a/packages/template-retail-react-app/app/pages/checkout/index.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/index.jsx
@@ -51,12 +51,13 @@ const Checkout = () => {
     const {data: basket, derivedData} = useCurrentBasket()
     const [isLoading, setIsLoading] = useState(false)
     const {mutateAsync: createOrder} = useShopperOrdersMutation('createOrder')
-    const {passwordless = {}, social = {}} = getConfig().app.login || {}
+    const config = getConfig()
+    const {passwordless = {}, social = {}} = config.app.login || {}
     const idps = social?.idps
     const isSocialEnabled = !!social?.enabled
     const isPasswordlessEnabled = !!passwordless?.enabled
     const {removeEmptyShipments} = useMultiship(basket)
-    const multishipEnabled = getConfig()?.app?.multishipEnabled ?? true
+    const multishipEnabled = config?.app?.multishipEnabled ?? true
 
     // cart has both pickup and delivery orders
     const isDeliveryAndPickupOrder =
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
index 05e0eebd6c..edac001d69 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx
@@ -43,11 +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 {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import {
     getPasswordlessCallbackUrl,
     getAuthorizePasswordlessErrorMessage
 } from '@salesforce/retail-react-app/app/utils/auth-utils'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 
 const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, idps = []}) => {
     const {formatMessage} = useIntl()
@@ -60,6 +62,7 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
     const updateCustomerForBasket = useShopperBasketsMutation('updateCustomerForBasket')
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
+    const {loginWithPasskey, abortPasskeyLogin} = usePasskeyLogin()
 
     const {step, STEPS, goToStep, goToNextStep} = useCheckout()
 
@@ -107,15 +110,7 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
                 })
             } else {
                 await login.mutateAsync({username: data.email, password: data.password})
-
-                const hasBasketItem = basket.productItems?.length > 0
-                if (hasBasketItem) {
-                    mergeBasket.mutate({
-                        parameters: {
-                            createDestinationBasket: true
-                        }
-                    })
-                }
+                handleMergeBasket()
             }
             goToNextStep()
         } catch (error) {
@@ -147,12 +142,43 @@ const ContactInfo = ({isSocialEnabled = false, isPasswordlessEnabled = false, id
         authModal.onOpen()
     }
 
+    const handleMergeBasket = () => {
+        const hasBasketItem = basket.productItems?.length > 0
+        if (hasBasketItem) {
+            mergeBasket.mutate({
+                parameters: {
+                    createDestinationBasket: true
+                }
+            })
+        }
+    }
+
     useEffect(() => {
         if (!showPasswordField) {
             form.unregister('password')
         }
     }, [showPasswordField])
 
+    useEffect(() => {
+        const handlePasskeyLogin = async () => {
+            try {
+                await loginWithPasskey()
+                handleMergeBasket()
+            } catch (error) {
+                setError(formatMessage(API_ERROR_MESSAGE))
+            }
+        }
+
+        if (step === STEPS.CONTACT_INFO) {
+            handlePasskeyLogin()
+        }
+
+        // Cleanup: abort passkey login when navigating away from checkout
+        return () => {
+            abortPasskeyLogin()
+        }
+    }, [step])
+
     const onPasswordlessLoginClick = async (e) => {
         const isValid = await form.trigger('email')
         const domForm = e.target.closest('form')
diff --git a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js
index 06791ed1e1..893cc90f45 100644
--- a/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js
+++ b/packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js
@@ -16,7 +16,8 @@ import {
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
 import {
     mockGoToStep,
-    mockGoToNextStep
+    mockGoToNextStep,
+    useCheckout
 } from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
@@ -50,14 +51,6 @@ jest.mock('../util/checkout-context', () => {
     }
 })
 
-jest.mock('@salesforce/retail-react-app/app/hooks/use-current-basket', () => {
-    const defaultReturn = {data: {}, derivedData: {totalItems: 0}}
-    return {
-        __esModule: true,
-        useCurrentBasket: jest.fn().mockReturnValue(defaultReturn)
-    }
-})
-
 jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
     getConfig: jest.fn()
 }))
@@ -71,6 +64,36 @@ beforeEach(() => {
     )
 })
 
+jest.mock('@salesforce/retail-react-app/app/hooks/use-current-basket', () => {
+    const defaultReturn = {data: {}, derivedData: {totalItems: 0}}
+    return {
+        __esModule: true,
+        useCurrentBasket: jest.fn().mockReturnValue(defaultReturn)
+    }
+})
+
+const mockLoginWithPasskey = jest.fn().mockResolvedValue(undefined)
+const mockAbortPasskeyLogin = jest.fn()
+
+jest.mock('@salesforce/retail-react-app/app/hooks/use-passkey-login', () => {
+    return {
+        __esModule: true,
+        usePasskeyLogin: jest.fn(() => ({
+            loginWithPasskey: mockLoginWithPasskey,
+            abortPasskeyLogin: mockAbortPasskeyLogin
+        }))
+    }
+})
+
+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()
@@ -406,3 +429,142 @@ describe('navigation based on shipment context', () => {
         expect(mockGoToStep).not.toHaveBeenCalled()
     })
 })
+
+describe('passkey login', () => {
+    let currentBasket = JSON.parse(JSON.stringify(scapiBasketWithItem))
+    const MOCK_STEPS = {CONTACT_INFO: 0, PAYMENT: 2}
+
+    beforeEach(() => {
+        jest.clearAllMocks()
+        // Reset useCheckout mock to default values
+        useCheckout.mockReturnValue({
+            customer: null,
+            basket: {},
+            isGuestCheckout: true,
+            setIsGuestCheckout: jest.fn(),
+            step: MOCK_STEPS.CONTACT_INFO,
+            login: null,
+            STEPS: MOCK_STEPS,
+            goToStep: mockGoToStep,
+            goToNextStep: mockGoToNextStep
+        })
+        global.server.use(
+            rest.put('*/baskets/:basketId/customer', (req, res, ctx) => {
+                currentBasket.customerInfo.email = validEmail
+                return res(ctx.json(currentBasket))
+            })
+        )
+        // Provide basket with basketId and items for tests in this suite
+        useCurrentBasket.mockReturnValue({
+            data: currentBasket,
+            derivedData: {totalItems: currentBasket.productItems?.length || 0}
+        })
+        // Default to guest user (not registered)
+        mockUseCurrentCustomer.mockReturnValue({
+            data: {
+                isRegistered: false
+            }
+        })
+    })
+
+    test('calls loginWithPasskey on component render', async () => {
+        renderWithProviders(<ContactInfo />)
+
+        await waitFor(() => {
+            expect(mockLoginWithPasskey).toHaveBeenCalled()
+        })
+    })
+
+    test('sets error when loginWithPasskey fails', async () => {
+        mockLoginWithPasskey.mockRejectedValue(new Error('Passkey authentication failed'))
+        renderWithProviders(<ContactInfo />)
+
+        await waitFor(() => {
+            expect(screen.getByText('Something went wrong. Try again!')).toBeInTheDocument()
+        })
+    })
+
+    test('does not prompt for passkey when not on contact info step', async () => {
+        // When step is not CONTACT_INFO, we must not trigger passkey (no prompt)
+        useCheckout.mockReturnValue({
+            customer: null,
+            basket: {},
+            isGuestCheckout: true,
+            setIsGuestCheckout: jest.fn(),
+            step: MOCK_STEPS.PAYMENT,
+            login: null,
+            STEPS: MOCK_STEPS,
+            goToStep: mockGoToStep,
+            goToNextStep: mockGoToNextStep
+        })
+
+        renderWithProviders(<ContactInfo />)
+
+        await waitFor(() => {
+            expect(mockLoginWithPasskey).not.toHaveBeenCalled()
+        })
+    })
+
+    test('calls abortPasskeyLogin when component unmounts', async () => {
+        const {unmount} = renderWithProviders(<ContactInfo />)
+
+        // Wait for passkey login to be triggered
+        await waitFor(() => {
+            expect(mockLoginWithPasskey).toHaveBeenCalled()
+        })
+
+        // Verify abort hasn't been called yet
+        expect(mockAbortPasskeyLogin).not.toHaveBeenCalled()
+
+        // Unmount the component (simulates navigating away)
+        unmount()
+
+        // Verify abort was called during cleanup
+        expect(mockAbortPasskeyLogin).toHaveBeenCalled()
+    })
+
+    test('Passkey prompt is aborted when user logs in with password', async () => {
+        // This test verifies that when the user logs in with password while the passkey
+        // flow is pending, the useEffect cleanup runs (step changes) and
+        // abortPasskeyLogin is called.
+        useCheckout.mockImplementation(() => ({
+            customer: null,
+            basket: {},
+            isGuestCheckout: true,
+            setIsGuestCheckout: jest.fn(),
+            step:
+                // Make step "change" after goToNextStep is called so the effect cleanup runs.
+                mockGoToNextStep.mock.calls.length > 0
+                    ? MOCK_STEPS.PAYMENT
+                    : MOCK_STEPS.CONTACT_INFO,
+            login: null,
+            STEPS: MOCK_STEPS,
+            goToStep: mockGoToStep,
+            goToNextStep: mockGoToNextStep
+        }))
+
+        const {user} = renderWithProviders(<ContactInfo />)
+
+        // Wait for passkey login to be triggered (passkey prompt is "pending")
+        await waitFor(() => {
+            expect(mockLoginWithPasskey).toHaveBeenCalled()
+        })
+        expect(mockAbortPasskeyLogin).not.toHaveBeenCalled()
+
+        // User switches to login and logs in with password
+        const trigger = screen.getByText(/Already have an account\? Log in/i)
+        await user.click(trigger)
+
+        await user.type(screen.getByLabelText('Email'), validEmail)
+        await user.type(screen.getByLabelText('Password'), password)
+
+        const loginButton = screen.getByText('Log In')
+        await user.click(loginButton)
+
+        // Login succeeds; goToNextStep is called. Next render will see step change
+        await waitFor(() => {
+            expect(mockGoToNextStep).toHaveBeenCalled()
+            expect(mockAbortPasskeyLogin).toHaveBeenCalled()
+        })
+    })
+})
diff --git a/packages/template-retail-react-app/app/pages/login/index.jsx b/packages/template-retail-react-app/app/pages/login/index.jsx
index 62c5ff40cb..9d51dcf41c 100644
--- a/packages/template-retail-react-app/app/pages/login/index.jsx
+++ b/packages/template-retail-react-app/app/pages/login/index.jsx
@@ -25,6 +25,8 @@ import {useLocation} from 'react-router-dom'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
 import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import LoginForm from '@salesforce/retail-react-app/app/components/login'
+import {usePasskeyRegistration} from '@salesforce/retail-react-app/app/hooks/use-passkey-registration'
+import {usePasskeyLogin} from '@salesforce/retail-react-app/app/hooks/use-passkey-login'
 import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
 import {usePrevious} from '@salesforce/retail-react-app/app/hooks/use-previous'
@@ -54,12 +56,13 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     const {path} = useRouteMatch()
     const einstein = useEinstein()
     const dataCloud = useDataCloud()
-    const {isRegistered, customerType} = useCustomerType()
+    const {isRegistered, customerType, isGuest} = useCustomerType()
     const {locale} = useMultiSite()
     const login = useAuthHelper(AuthHelpers.LoginRegisteredUserB2C)
     const loginPasswordless = useAuthHelper(AuthHelpers.LoginPasswordlessUser)
     const authorizePasswordlessLogin = useAuthHelper(AuthHelpers.AuthorizePasswordless)
-    const {passwordless = {}, social = {}} = getConfig().app.login || {}
+    const config = getConfig()
+    const {passwordless = {}, social = {}} = config.app.login || {}
     const isPasswordlessEnabled = !!passwordless?.enabled
     const passwordlessMode = passwordless?.mode
     const passwordlessLoginLandingPath = passwordless?.landingPath
@@ -77,6 +80,8 @@ const Login = ({initialView = LOGIN_VIEW}) => {
     )
     const mergeBasket = useShopperBasketsMutation('mergeBasket')
     const [redirectPath, setRedirectPath] = useState('')
+    const {showRegisterPasskeyToast} = usePasskeyRegistration()
+    const {loginWithPasskey, abortPasskeyLogin} = usePasskeyLogin()
     const [isOtpAuthOpen, setIsOtpAuthOpen] = useState(false)
 
     const handleMergeBasket = () => {
@@ -171,14 +176,33 @@ const Login = ({initialView = LOGIN_VIEW}) => {
 
     // If customer is registered push to account page and merge the basket
     useEffect(() => {
-        if (isRegistered) {
-            setIsOtpAuthOpen(false)
-            handleMergeBasket()
-            const redirectTo = redirectPath ? redirectPath : '/account'
-            navigate(redirectTo)
+        if (!isRegistered) {
+            return
         }
+
+        setIsOtpAuthOpen(false)
+        handleMergeBasket()
+        const redirectTo = redirectPath ? redirectPath : '/account'
+
+        // Show passkey registration prompt if supported
+        showRegisterPasskeyToast()
+
+        navigate(redirectTo)
     }, [isRegistered, redirectPath])
 
+    useEffect(() => {
+        if (isGuest) {
+            loginWithPasskey().catch(() => {
+                form.setError('global', {type: 'manual', message: formatMessage(API_ERROR_MESSAGE)})
+            })
+        }
+
+        // Cleanup: abort passkey login when navigating away from login page
+        return () => {
+            abortPasskeyLogin()
+        }
+    }, [isGuest])
+
     /**************** Einstein ****************/
     useEffect(() => {
         einstein.sendViewPage(location.pathname)
diff --git a/packages/template-retail-react-app/app/pages/login/index.test.js b/packages/template-retail-react-app/app/pages/login/index.test.js
index 6f6e3edf67..cb79a8b82e 100644
--- a/packages/template-retail-react-app/app/pages/login/index.test.js
+++ b/packages/template-retail-react-app/app/pages/login/index.test.js
@@ -10,7 +10,9 @@ import {rest} from 'msw'
 import {
     renderWithProviders,
     createPathWithDefaults,
-    guestToken
+    guestToken,
+    registerUserToken,
+    clearAllCookies
 } from '@salesforce/retail-react-app/app/utils/test-utils'
 import Login from '.'
 import {BrowserRouter as Router, Route} from 'react-router-dom'
@@ -20,6 +22,22 @@ import ResetPassword from '@salesforce/retail-react-app/app/pages/reset-password
 import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {mockedRegisteredCustomer} from '@salesforce/retail-react-app/app/mocks/mock-data'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useCustomerType} from '@salesforce/commerce-sdk-react'
+
+// Mock getConfig for passkey tests
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
+
+// Allows overriding useCustomerType for tests that need a specific auth
+// state (e.g. simulate a user being already authenticated on page load.
+jest.mock('@salesforce/commerce-sdk-react', () => {
+    const actual = jest.requireActual('@salesforce/commerce-sdk-react')
+    return {
+        ...actual,
+        useCustomerType: jest.fn(actual.useCustomerType)
+    }
+})
 
 const mockMergedBasket = {
     basketId: 'a10ff320829cb0eef93ca5310a',
@@ -58,6 +76,7 @@ const MockedComponent = () => {
 // Set up and clean up
 beforeEach(() => {
     jest.resetModules()
+    // Setup getConfig mock with default config for all tests
     getConfig.mockReturnValue(mockConfig)
     global.server.use(
         rest.post('*/customers', (req, res, ctx) => {
@@ -82,6 +101,8 @@ beforeEach(() => {
 afterEach(() => {
     jest.resetModules()
     localStorage.clear()
+    // Ensures authenticated state from previous tests don't leak into subsequent tests
+    clearAllCookies()
 })
 
 describe('Logging in tests', function () {
@@ -274,6 +295,523 @@ describe('Error while logging in', function () {
         ).toBeInTheDocument()
     })
 })
+
+describe('Passkey login', () => {
+    let mockCredentialsGet
+    let mockPublicKeyCredential
+    let mockAppConfig
+
+    beforeEach(() => {
+        // Clear all mocks
+        jest.clearAllMocks()
+
+        // Override getConfig to return config with passkey enabled
+        mockAppConfig = {
+            ...mockConfig.app,
+            login: {
+                ...mockConfig.app.login,
+                passkey: {enabled: true}
+            }
+        }
+
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
+
+        // Mock WebAuthn API - default to never resolving (simulating no user action)
+        mockCredentialsGet = jest.fn().mockImplementation(() => new Promise(() => {}))
+        mockPublicKeyCredential = {
+            parseRequestOptionsFromJSON: jest.fn(),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true),
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true)
+        }
+
+        global.PublicKeyCredential = mockPublicKeyCredential
+        global.window.PublicKeyCredential = mockPublicKeyCredential
+        global.navigator.credentials = {
+            get: mockCredentialsGet
+        }
+
+        // Mock parseRequestOptionsFromJSON to return mock options
+        mockPublicKeyCredential.parseRequestOptionsFromJSON.mockReturnValue({
+            challenge: 'mock-challenge',
+            allowCredentials: []
+        })
+
+        // Clear localStorage
+        localStorage.clear()
+
+        // Setup MSW handlers for WebAuthn API endpoints
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.json({
+                        publicKey: {
+                            challenge: 'mock-challenge-data',
+                            rpId: 'example.com',
+                            allowCredentials: [],
+                            timeout: 60000
+                        }
+                    })
+                )
+            }),
+            rest.post('*/oauth2/webauthn/authenticate/finish', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.json({
+                        tokenResponse: {
+                            customer_id: 'customerid_passkey',
+                            access_token:
+                                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                            refresh_token: 'testrefeshtoken_passkey',
+                            usid: 'testusid_passkey',
+                            enc_user_id: 'testEncUserId_passkey',
+                            id_token: 'testIdToken_passkey'
+                        }
+                    })
+                )
+            })
+        )
+    })
+
+    afterEach(() => {
+        delete global.PublicKeyCredential
+        delete global.window.PublicKeyCredential
+    })
+
+    test('Sets up conditional mediation on page load when passkey enabled', async () => {
+        // Mock that conditional mediation starts but user doesn't select
+        mockCredentialsGet.mockImplementation(
+            () =>
+                new Promise(() => {
+                    // Never resolves - simulating conditional mediation waiting
+                })
+        )
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Wait for component to mount and setup conditional mediation
+        await waitFor(() => {
+            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+        })
+
+        // Conditional mediation should be initiated
+        await waitFor(
+            () => {
+                expect(mockCredentialsGet).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        mediation: 'conditional'
+                    })
+                )
+            },
+            {timeout: 2000}
+        )
+    })
+
+    test('Does not trigger passkey when passkey is disabled', async () => {
+        const mockAppConfig = {
+            ...mockConfig.app,
+            login: {
+                ...mockConfig.app.login,
+                passkey: {enabled: false}
+            }
+        }
+
+        // Override getConfig to return config with passkey disabled
+        getConfig.mockReturnValue({
+            ...mockConfig,
+            app: mockAppConfig
+        })
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        await waitFor(() => {
+            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+        })
+
+        // Give it a moment for any async effects to run
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Should not call credentials API when passkey is disabled
+        expect(mockCredentialsGet).not.toHaveBeenCalled()
+    })
+
+    test('Does not trigger passkey when user is already signed in', async () => {
+        // Simulates a user being already authenticated on page load
+        const realUseCustomerType = useCustomerType.getMockImplementation()
+        useCustomerType.mockReturnValue({
+            isRegistered: true,
+            customerType: 'registered',
+            isGuest: false,
+            isExternal: false
+        })
+        try {
+            renderWithProviders(<MockedComponent />, {
+                wrapperProps: {
+                    siteAlias: 'uk',
+                    locale: {id: 'en-GB'},
+                    appConfig: mockAppConfig,
+                    bypassAuth: true,
+                    isGuest: false
+                }
+            })
+
+            await waitFor(() => {
+                expect(screen.getByTestId('login-page')).toBeInTheDocument()
+            })
+
+            // Give it a moment for any async effects to run
+            await new Promise((resolve) => setTimeout(resolve, 100))
+
+            // Rendering the login page should not trigger navigator.credentials.get when user is already registered
+            expect(mockCredentialsGet).not.toHaveBeenCalled()
+        } finally {
+            useCustomerType.mockImplementation(realUseCustomerType)
+        }
+    })
+
+    test('Successfully logs in with passkey', async () => {
+        const mockCredential = {
+            id: 'mock-credential-id',
+            rawId: new ArrayBuffer(32),
+            type: 'public-key',
+            response: {
+                authenticatorData: new ArrayBuffer(37),
+                clientDataJSON: new ArrayBuffer(128),
+                signature: new ArrayBuffer(64),
+                userHandle: new ArrayBuffer(16)
+            },
+            getClientExtensionResults: jest.fn().mockReturnValue({}),
+            toJSON: jest.fn().mockReturnValue({
+                id: 'mock-credential-id',
+                rawId: 'mock-raw-id',
+                type: 'public-key',
+                response: {
+                    authenticatorData: 'mock-auth-data',
+                    clientDataJSON: 'mock-client-data',
+                    signature: 'mock-signature',
+                    userHandle: 'mock-user-handle'
+                }
+            })
+        }
+
+        mockCredentialsGet.mockResolvedValue(mockCredential)
+
+        // Mock customer as registered after passkey login
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token:
+                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            )
+        )
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Wait for passkey flow to be triggered when modal opens
+        await waitFor(
+            () => {
+                expect(mockCredentialsGet).toHaveBeenCalled()
+            },
+            {timeout: 5000}
+        )
+
+        // login successfully and navigate to account page
+        await waitFor(() => {
+            expect(window.location.pathname).toBe('/uk/en-GB/account')
+            expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+        })
+    })
+
+    test('User can select other login method when passkey login is cancelled', async () => {
+        // User cancels passkey selection
+        const notAllowedError = new Error('User cancelled')
+        notAllowedError.name = 'NotAllowedError'
+        mockCredentialsGet.mockRejectedValue(notAllowedError)
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Login form should be shown
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/welcome back/i)).toBeInTheDocument()
+            expect(screen.getByLabelText('Email')).toBeInTheDocument()
+            expect(screen.getByLabelText('Password')).toBeInTheDocument()
+            expect(screen.getByRole('button', {name: /sign in/i})).toBeInTheDocument()
+            expect(screen.getByTestId('login-page')).toBeInTheDocument()
+        })
+    })
+
+    test('Shows error when passkey authentication fails with error from the browser', async () => {
+        // Simulate error in navigator.credentials.get hook
+        mockCredentialsGet.mockRejectedValue(new Error('Authentication failed'))
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Should show error - passkey error should be caught and handled
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalled()
+            expect(screen.getByText(/Something went wrong. Try again!/i)).toBeInTheDocument()
+        })
+    })
+
+    test('Shows error when passkey authentication fails with error from the WebAuthn API', async () => {
+        // Simulate error in WebAuthn API
+        global.server.use(
+            rest.post('*/oauth2/webauthn/authenticate/start', (req, res, ctx) => {
+                return res(
+                    ctx.delay(0),
+                    ctx.status(401),
+                    ctx.json({message: 'Authentication failed'})
+                )
+            })
+        )
+
+        renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Should show error - 401 error from WebAuthn API should be caught and converted to user-friendly message
+        await waitFor(() => {
+            expect(screen.getByText(/Something went wrong. Try again!/i)).toBeInTheDocument()
+        })
+    })
+
+    test('Passkey prompt is aborted when user logs in with password', async () => {
+        // Capture the abort signal passed to credentials.get
+        let capturedSignal = null
+
+        // Mock credentials.get to capture the abort signal and stay pending
+        mockCredentialsGet.mockImplementation(({signal}) => {
+            capturedSignal = signal
+            return new Promise(() => {
+                // Never resolve - simulates passkey prompt staying open
+            })
+        })
+
+        // Successful email/password login
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            ),
+            rest.post('*/baskets/actions/merge', (req, res, ctx) =>
+                res(ctx.delay(0), ctx.json(mockMergedBasket))
+            )
+        )
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Wait for passkey conditional mediation to start and capture the signal
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    mediation: 'conditional',
+                    signal: expect.any(AbortSignal)
+                })
+            )
+            expect(capturedSignal).not.toBeNull()
+        })
+
+        // Verify signal is not yet aborted
+        expect(capturedSignal.aborted).toBe(false)
+
+        // User logs in with password while passkey prompt is still open
+        await user.type(screen.getByLabelText('Email'), 'customer@test.com')
+        await user.type(screen.getByLabelText('Password'), 'Password!1')
+        await user.click(screen.getByRole('button', {name: /sign in/i}))
+
+        // Wait for successful login and navigation to account page
+        await waitFor(
+            () => {
+                expect(window.location.pathname).toBe('/uk/en-GB/account')
+                expect(screen.getByText(/My Profile/i)).toBeInTheDocument()
+            },
+            {timeout: 3000}
+        )
+
+        // Verify the signal was aborted when user logs in with password
+        expect(capturedSignal.aborted).toBe(true)
+    })
+
+    test('Passkey prompt is aborted when navigating away from login page', async () => {
+        // Capture the abort signal passed to credentials.get
+        let capturedSignal = null
+
+        // Mock credentials.get to capture the abort signal and stay pending
+        mockCredentialsGet.mockImplementation(({signal}) => {
+            capturedSignal = signal
+            return new Promise(() => {
+                // Never resolve - simulates passkey prompt staying open
+            })
+        })
+
+        const {unmount} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                appConfig: mockAppConfig,
+                bypassAuth: false
+            }
+        })
+
+        // Wait for passkey conditional mediation to start and capture the signal
+        await waitFor(() => {
+            expect(mockCredentialsGet).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    mediation: 'conditional',
+                    signal: expect.any(AbortSignal)
+                })
+            )
+            expect(capturedSignal).not.toBeNull()
+        })
+
+        // Verify signal is not yet aborted
+        expect(capturedSignal.aborted).toBe(false)
+
+        // Simulate navigating away from the login page by unmounting
+        unmount()
+
+        // Verify the signal was aborted when component unmounted
+        expect(capturedSignal.aborted).toBe(true)
+    })
+})
+
+describe('Passkey Registration', () => {
+    let mockPublicKeyCredential
+
+    beforeEach(() => {
+        mockPublicKeyCredential = {
+            parseRequestOptionsFromJSON: jest.fn(),
+            isConditionalMediationAvailable: jest.fn().mockResolvedValue(true),
+            isUserVerifyingPlatformAuthenticatorAvailable: jest.fn().mockResolvedValue(true)
+        }
+
+        global.PublicKeyCredential = mockPublicKeyCredential
+        global.window.PublicKeyCredential = mockPublicKeyCredential
+    })
+
+    afterEach(() => {
+        delete global.PublicKeyCredential
+        delete global.window.PublicKeyCredential
+    })
+
+    test('Displays Create passkey toast after successful login when passkey is enabled', async () => {
+        // Successful email/password login
+        global.server.use(
+            rest.post('*/oauth2/token', (req, res, ctx) =>
+                res(
+                    ctx.delay(0),
+                    ctx.json({
+                        customer_id: 'customerid_1',
+                        access_token: registerUserToken,
+                        refresh_token: 'testrefeshtoken_1',
+                        usid: 'testusid_1',
+                        enc_user_id: 'testEncUserId_1',
+                        id_token: 'testIdToken_1'
+                    })
+                )
+            ),
+            rest.post('*/baskets/actions/merge', (req, res, ctx) =>
+                res(ctx.delay(0), ctx.json(mockMergedBasket))
+            )
+        )
+
+        const {user} = renderWithProviders(<MockedComponent />, {
+            wrapperProps: {
+                siteAlias: 'uk',
+                locale: {id: 'en-GB'},
+                bypassAuth: false
+            }
+        })
+
+        // Wait for login form after passkey is cancelled
+        await waitFor(() => {
+            expect(screen.getByLabelText('Email')).toBeInTheDocument()
+            expect(screen.getByLabelText('Password')).toBeInTheDocument()
+        })
+
+        await user.type(screen.getByLabelText('Email'), 'customer@test.com')
+        await user.type(screen.getByLabelText('Password'), 'Password!1')
+        await user.click(screen.getByRole('button', {name: /sign in/i}))
+
+        // Create passkey toast is shown after successful login when passkey is enabled and WebAuthn is supported
+        await waitFor(
+            () => {
+                expect(screen.getByRole('button', {name: /Create Passkey/i})).toBeInTheDocument()
+            },
+            {timeout: 3000}
+        )
+    })
+})
+
 describe('Navigate away from login page tests', function () {
     test('should navigate to sign up page when the user clicks Create Account', async () => {
         const {user} = renderWithProviders(<MockedComponent />, {
@@ -334,8 +872,7 @@ describe('Passwordless login tests', () => {
                     ctx.status(200),
                     ctx.json({
                         customer_id: 'customerid_1',
-                        access_token:
-                            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdXQiOiJHVUlEIiwic2NwIjoic2ZjYy5zaG9wcGVyLW15YWNjb3VudC5iYXNrZXRzIHNmY2Muc2hvcHBlci1teWFjY291bnQuYWRkcmVzc2VzIHNmY2Muc2hvcHBlci1wcm9kdWN0cyBzZmNjLnNob3BwZXItZGlzY292ZXJ5LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnJ3IHNmY2Muc2hvcHBlci1teWFjY291bnQucGF5bWVudGluc3RydW1lbnRzIHNmY2Muc2hvcHBlci1jdXN0b21lcnMubG9naW4gc2ZjYy5zaG9wcGVyLWV4cGVyaWVuY2Ugc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5vcmRlcnMgc2ZjYy5zaG9wcGVyLWN1c3RvbWVycy5yZWdpc3RlciBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5hZGRyZXNzZXMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wcm9kdWN0bGlzdHMucncgc2ZjYy5zaG9wcGVyLXByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItcHJvbW90aW9ucyBzZmNjLnNob3BwZXItYmFza2V0cy1vcmRlcnMucncgc2ZjYy5zaG9wcGVyLW15YWNjb3VudC5wYXltZW50aW5zdHJ1bWVudHMucncgc2ZjYy5zaG9wcGVyLWdpZnQtY2VydGlmaWNhdGVzIHNmY2Muc2hvcHBlci1wcm9kdWN0LXNlYXJjaCBzZmNjLnNob3BwZXItbXlhY2NvdW50LnByb2R1Y3RsaXN0cyBzZmNjLnNob3BwZXItY2F0ZWdvcmllcyBzZmNjLnNob3BwZXItbXlhY2NvdW50Iiwic3ViIjoiY2Mtc2xhczo6enpyZl8wMDE6OnNjaWQ6YzljNDViZmQtMGVkMy00YWEyLTk5NzEtNDBmODg5NjJiODM2Ojp1c2lkOjhlODgzOTczLTY4ZWItNDFmZS1hM2M1LTc1NjIzMjY1MmZmNSIsImN0eCI6InNsYXMiLCJpc3MiOiJzbGFzL3Byb2QvenpyZl8wMDEiLCJpc3QiOjEsImF1ZCI6ImNvbW1lcmNlY2xvdWQvcHJvZC96enJmXzAwMSIsIm5iZiI6MTY3ODgzNDI3MSwic3R5IjoiVXNlciIsImlzYiI6InVpZG86ZWNvbTo6dXBuOmtldjVAdGVzdC5jb206OnVpZG46a2V2aW4gaGU6OmdjaWQ6YWJtZXMybWJrM2xYa1JsSEZKd0dZWWt1eEo6OnJjaWQ6YWJVTXNhdnBEOVk2alcwMGRpMlNqeEdDTVU6OmNoaWQ6UmVmQXJjaEdsb2JhbCIsImV4cCI6MjY3ODgzNjEwMSwiaWF0IjoxNjc4ODM0MzAxLCJqdGkiOiJDMkM0ODU2MjAxODYwLTE4OTA2Nzg5MDM0ODA1ODMyNTcwNjY2NTQyIn0._tUrxeXdFYPj6ZoY-GILFRd3-aD1RGPkZX6TqHeS494',
+                        access_token: registerUserToken,
                         refresh_token: 'testrefeshtoken_1',
                         usid: 'testusid_1',
                         enc_user_id: 'testEncUserId_1',
diff --git a/packages/template-retail-react-app/app/pages/registration/index.jsx b/packages/template-retail-react-app/app/pages/registration/index.jsx
index fc824574d4..20c1bd64ea 100644
--- a/packages/template-retail-react-app/app/pages/registration/index.jsx
+++ b/packages/template-retail-react-app/app/pages/registration/index.jsx
@@ -17,7 +17,9 @@ import RegisterForm from '@salesforce/retail-react-app/app/components/register'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
 import useDataCloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
+import {usePasskeyRegistration} from '@salesforce/retail-react-app/app/hooks/use-passkey-registration'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
 
 const Registration = () => {
     const {formatMessage} = useIntl()
@@ -29,6 +31,9 @@ const Registration = () => {
     const {pathname} = useLocation()
     const register = useAuthHelper(AuthHelpers.Register)
 
+    const config = getConfig()
+    const {showToast} = usePasskeyRegistration()
+
     const submitForm = async (data) => {
         const body = {
             customer: {
@@ -53,6 +58,26 @@ const Registration = () => {
         }
     }, [isRegistered])
 
+    useEffect(() => {
+        // Show passkey registration modal only if Webauthn feature flag is enabled and compatible with the browser
+        if (isRegistered && config?.app?.login?.passkey?.enabled) {
+            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()
+                    }
+                })
+            }
+        }
+    }, [isRegistered])
+
     /**************** Einstein ****************/
     useEffect(() => {
         einstein.sendViewPage(pathname)
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
index 91dc211169..83278c48a9 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-GB.json
@@ -3163,6 +3163,20 @@
       "value": "To log in to your account, enter the code sent to your email."
     }
   ],
+  "otp.message.enter_code_for_passkey_registration": [
+    {
+      "type": 0,
+      "value": "We sent a one-time password (OTP) to your email to confirm your identity. Enter the "
+    },
+    {
+      "type": 1,
+      "value": "otpLength"
+    },
+    {
+      "type": 0,
+      "value": "-digit code below to continue."
+    }
+  ],
   "otp.message.resend_cooldown": [
     {
       "type": 0,
@@ -3287,6 +3301,48 @@
       "value": "Previous Page"
     }
   ],
+  "passkey_registration.modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close passkey form"
+    }
+  ],
+  "passkey_registration.modal.button.register": [
+    {
+      "type": 0,
+      "value": "Register Passkey"
+    }
+  ],
+  "passkey_registration.modal.label.nickname": [
+    {
+      "type": 0,
+      "value": "Passkey Nickname (optional)"
+    }
+  ],
+  "passkey_registration.modal.title": [
+    {
+      "type": 0,
+      "value": "Create Passkey"
+    }
+  ],
+  "passkey_registration.toast.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close toast"
+    }
+  ],
+  "passkey_registration.toast.button.create": [
+    {
+      "type": 0,
+      "value": "Create Passkey"
+    }
+  ],
+  "passkey_registration.toast.message": [
+    {
+      "type": 0,
+      "value": "Create a passkey for a more secure and easier login"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
index 91dc211169..83278c48a9 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-US.json
@@ -3163,6 +3163,20 @@
       "value": "To log in to your account, enter the code sent to your email."
     }
   ],
+  "otp.message.enter_code_for_passkey_registration": [
+    {
+      "type": 0,
+      "value": "We sent a one-time password (OTP) to your email to confirm your identity. Enter the "
+    },
+    {
+      "type": 1,
+      "value": "otpLength"
+    },
+    {
+      "type": 0,
+      "value": "-digit code below to continue."
+    }
+  ],
   "otp.message.resend_cooldown": [
     {
       "type": 0,
@@ -3287,6 +3301,48 @@
       "value": "Previous Page"
     }
   ],
+  "passkey_registration.modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close passkey form"
+    }
+  ],
+  "passkey_registration.modal.button.register": [
+    {
+      "type": 0,
+      "value": "Register Passkey"
+    }
+  ],
+  "passkey_registration.modal.label.nickname": [
+    {
+      "type": 0,
+      "value": "Passkey Nickname (optional)"
+    }
+  ],
+  "passkey_registration.modal.title": [
+    {
+      "type": 0,
+      "value": "Create Passkey"
+    }
+  ],
+  "passkey_registration.toast.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "Close toast"
+    }
+  ],
+  "passkey_registration.toast.button.create": [
+    {
+      "type": 0,
+      "value": "Create Passkey"
+    }
+  ],
+  "passkey_registration.toast.message": [
+    {
+      "type": 0,
+      "value": "Create a passkey for a more secure and easier login"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
index 9440e39a3f..a6708add54 100644
--- a/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
+++ b/packages/template-retail-react-app/app/static/translations/compiled/en-XA.json
@@ -6659,6 +6659,28 @@
       "value": "]"
     }
   ],
+  "otp.message.enter_code_for_passkey_registration": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ẇḗḗ şḗḗƞŧ ȧȧ ǿǿƞḗḗ-ŧīḿḗḗ ƥȧȧşşẇǿǿřḓ (ǾŦƤ) ŧǿǿ ẏǿǿŭŭř ḗḗḿȧȧīŀ ŧǿǿ ƈǿǿƞƒīřḿ ẏǿǿŭŭř īḓḗḗƞŧīŧẏ. Ḗƞŧḗḗř ŧħḗḗ "
+    },
+    {
+      "type": 1,
+      "value": "otpLength"
+    },
+    {
+      "type": 0,
+      "value": "-ḓīɠīŧ ƈǿǿḓḗḗ ƀḗḗŀǿǿẇ ŧǿǿ ƈǿǿƞŧīƞŭŭḗḗ."
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "otp.message.resend_cooldown": [
     {
       "type": 0,
@@ -6895,6 +6917,104 @@
       "value": "]"
     }
   ],
+  "passkey_registration.modal.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈŀǿǿşḗḗ ƥȧȧşşķḗḗẏ ƒǿǿřḿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.modal.button.register": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Řḗḗɠīşŧḗḗř Ƥȧȧşşķḗḗẏ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.modal.label.nickname": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƥȧȧşşķḗḗẏ Ƞīƈķƞȧȧḿḗḗ (ǿǿƥŧīǿǿƞȧȧŀ)"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.modal.title": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈřḗḗȧȧŧḗḗ Ƥȧȧşşķḗḗẏ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.toast.button.close.assistive_msg": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈŀǿǿşḗḗ ŧǿǿȧȧşŧ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.toast.button.create": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈřḗḗȧȧŧḗḗ Ƥȧȧşşķḗḗẏ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
+  "passkey_registration.toast.message": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ƈřḗḗȧȧŧḗḗ ȧȧ ƥȧȧşşķḗḗẏ ƒǿǿř ȧȧ ḿǿǿřḗḗ şḗḗƈŭŭřḗḗ ȧȧƞḓ ḗḗȧȧşīḗḗř ŀǿǿɠīƞ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "password_card.info.password_updated": [
     {
       "type": 0,
diff --git a/packages/template-retail-react-app/app/utils/test-utils.js b/packages/template-retail-react-app/app/utils/test-utils.js
index 6fd8ee0e3b..ddc86bd056 100644
--- a/packages/template-retail-react-app/app/utils/test-utils.js
+++ b/packages/template-retail-react-app/app/utils/test-utils.js
@@ -24,7 +24,8 @@ import mockConfig from '@salesforce/retail-react-app/config/mocks/default'
 import {
     CurrencyProvider,
     MultiSiteProvider,
-    StoreLocatorProvider
+    StoreLocatorProvider,
+    PasskeyRegistrationProvider
 } from '@salesforce/retail-react-app/app/contexts'
 
 import {createUrlTemplate} from '@salesforce/retail-react-app/app/utils/url'
@@ -166,7 +167,9 @@ export const TestProviders = ({
                                     <ChakraProvider theme={theme}>
                                         <AddToCartModalProvider>
                                             <BonusProductSelectionModalProvider>
-                                                {children}
+                                                <PasskeyRegistrationProvider>
+                                                    {children}
+                                                </PasskeyRegistrationProvider>
                                             </BonusProductSelectionModalProvider>
                                         </AddToCartModalProvider>
                                     </ChakraProvider>
diff --git a/packages/template-retail-react-app/app/utils/utils.js b/packages/template-retail-react-app/app/utils/utils.js
index 4d1f526d0d..09ff5287c0 100644
--- a/packages/template-retail-react-app/app/utils/utils.js
+++ b/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, '')
+}
diff --git a/packages/template-retail-react-app/app/utils/utils.test.js b/packages/template-retail-react-app/app/utils/utils.test.js
index 81fc4ffb4e..1ca2e5a65f 100644
--- a/packages/template-retail-react-app/app/utils/utils.test.js
+++ b/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(/[+/=]/)
+    })
+})
diff --git a/packages/template-retail-react-app/config/default.js b/packages/template-retail-react-app/config/default.js
index 758c258cb7..b449fcd443 100644
--- a/packages/template-retail-react-app/config/default.js
+++ b/packages/template-retail-react-app/config/default.js
@@ -46,6 +46,10 @@ module.exports = {
             resetPassword: {
                 mode: 'email',
                 landingPath: '/reset-password-landing'
+            },
+            passkey: {
+                enabled: false,
+                callbackURI: process.env.PASSKEY_CALLBACK_URI
             }
         },
         defaultSite: 'RefArchGlobal',
diff --git a/packages/template-retail-react-app/config/mocks/default.js b/packages/template-retail-react-app/config/mocks/default.js
index 86d5afc6be..775996a1aa 100644
--- a/packages/template-retail-react-app/config/mocks/default.js
+++ b/packages/template-retail-react-app/config/mocks/default.js
@@ -43,6 +43,11 @@ module.exports = {
                 enabled: false,
                 idps: ['google', 'apple']
             },
+            passkey: {
+                enabled: true,
+                mode: 'callback',
+                callbackURI: 'https://webhook.site/ee47be40-e9fc-4313-8b56-18e4fe819043'
+            },
             resetPassword: {
                 mode: 'email',
                 landingPath: '/reset-password-landing'
diff --git a/packages/template-retail-react-app/jest-setup.js b/packages/template-retail-react-app/jest-setup.js
index 7a5b9075a5..45677b9692 100644
--- a/packages/template-retail-react-app/jest-setup.js
+++ b/packages/template-retail-react-app/jest-setup.js
@@ -122,6 +122,12 @@ jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => {
     }
 })
 
+// Mock PasskeyRegistrationModal to prevent auth helper issues in tests
+jest.mock('@salesforce/retail-react-app/app/components/passkey-registration-modal', () => ({
+    __esModule: true,
+    default: () => null
+}))
+
 // TextEncoder is a web API, need to import it
 // from nodejs util in testing environment.
 global.TextEncoder = require('util').TextEncoder
diff --git a/packages/template-retail-react-app/translations/en-GB.json b/packages/template-retail-react-app/translations/en-GB.json
index 0e1848b42f..c3ba3c89c0 100644
--- a/packages/template-retail-react-app/translations/en-GB.json
+++ b/packages/template-retail-react-app/translations/en-GB.json
@@ -1318,6 +1318,9 @@
   "otp.message.enter_code_for_account_returning": {
     "defaultMessage": "To log in to your account, enter the code sent to your email."
   },
+  "otp.message.enter_code_for_passkey_registration": {
+    "defaultMessage": "We sent a one-time password (OTP) to your email to confirm your identity. Enter the {otpLength}-digit code below to continue."
+  },
   "otp.message.resend_cooldown": {
     "defaultMessage": "You can request a new code in {timer} {timer, plural, one {second} other {seconds}}."
   },
@@ -1360,6 +1363,27 @@
   "pagination.link.prev.assistive_msg": {
     "defaultMessage": "Previous Page"
   },
+  "passkey_registration.modal.button.close.assistive_msg": {
+    "defaultMessage": "Close passkey form"
+  },
+  "passkey_registration.modal.button.register": {
+    "defaultMessage": "Register Passkey"
+  },
+  "passkey_registration.modal.label.nickname": {
+    "defaultMessage": "Passkey Nickname (optional)"
+  },
+  "passkey_registration.modal.title": {
+    "defaultMessage": "Create Passkey"
+  },
+  "passkey_registration.toast.button.close.assistive_msg": {
+    "defaultMessage": "Close toast"
+  },
+  "passkey_registration.toast.button.create": {
+    "defaultMessage": "Create Passkey"
+  },
+  "passkey_registration.toast.message": {
+    "defaultMessage": "Create a passkey for a more secure and easier login"
+  },
   "password_card.info.password_updated": {
     "defaultMessage": "Password updated"
   },
diff --git a/packages/template-retail-react-app/translations/en-US.json b/packages/template-retail-react-app/translations/en-US.json
index 0e1848b42f..c3ba3c89c0 100644
--- a/packages/template-retail-react-app/translations/en-US.json
+++ b/packages/template-retail-react-app/translations/en-US.json
@@ -1318,6 +1318,9 @@
   "otp.message.enter_code_for_account_returning": {
     "defaultMessage": "To log in to your account, enter the code sent to your email."
   },
+  "otp.message.enter_code_for_passkey_registration": {
+    "defaultMessage": "We sent a one-time password (OTP) to your email to confirm your identity. Enter the {otpLength}-digit code below to continue."
+  },
   "otp.message.resend_cooldown": {
     "defaultMessage": "You can request a new code in {timer} {timer, plural, one {second} other {seconds}}."
   },
@@ -1360,6 +1363,27 @@
   "pagination.link.prev.assistive_msg": {
     "defaultMessage": "Previous Page"
   },
+  "passkey_registration.modal.button.close.assistive_msg": {
+    "defaultMessage": "Close passkey form"
+  },
+  "passkey_registration.modal.button.register": {
+    "defaultMessage": "Register Passkey"
+  },
+  "passkey_registration.modal.label.nickname": {
+    "defaultMessage": "Passkey Nickname (optional)"
+  },
+  "passkey_registration.modal.title": {
+    "defaultMessage": "Create Passkey"
+  },
+  "passkey_registration.toast.button.close.assistive_msg": {
+    "defaultMessage": "Close toast"
+  },
+  "passkey_registration.toast.button.create": {
+    "defaultMessage": "Create Passkey"
+  },
+  "passkey_registration.toast.message": {
+    "defaultMessage": "Create a passkey for a more secure and easier login"
+  },
   "password_card.info.password_updated": {
     "defaultMessage": "Password updated"
   },