Feature passwordless social login

.github/workflows/e2e.yml

@@ -336,6 +336,9 @@ jobs:
 
       - name: Set Retail App Private Client Home
         run: export RETAIL_APP_HOME=https://scaffold-pwa-e2e-pwa-kit-private.mobify-storefront.com/
+
+      - name: Set PWA Kit E2E Test User
+        run: export PWA_E2E_USER_EMAIL=e2e.pwa.kit@gmail.com PWA_E2E_USER_PASSWORD=hpv_pek-JZK_xkz0wzf
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

e2e/config.js

@@ -156,4 +156,7 @@ module.exports = {
       "worker",
     ],
   },
+  PWA_E2E_USER_EMAIL: process.env.PWA_E2E_USER_EMAIL,
+  PWA_E2E_USER_PASSWORD: process.env.PWA_E2E_USER_PASSWORD,
+  SOCIAL_LOGIN_RETAIL_APP_HOME: "https://wasatch-mrt-feature-public.mrt-storefront-staging.com"
 };

e2e/scripts/pageHelpers.js

@@ -119,6 +119,35 @@ export const navigateToPDPDesktop = async ({page}) => {
     await productTile.click()
 }
 
+/**
+ * Navigates to the `Cotton Turtleneck Sweater` PDP (Product Detail Page) on Desktop 
+ * with the black variant selected.
+ * 
+ * @param {Object} options.page - Object that represents a tab/window in the browser provided by playwright
+ */
+export const navigateToPDPDesktopSocial = async ({page, productName, productColor, productPrice}) => {
+    await page.goto(config.SOCIAL_LOGIN_RETAIL_APP_HOME)
+    await answerConsentTrackingForm(page)
+
+    await page.getByRole("link", { name: "Womens" }).hover()
+    const topsNav = await page.getByRole("link", { name: "Tops", exact: true })
+    await expect(topsNav).toBeVisible()
+
+    await topsNav.click()
+
+    // PLP
+    const productTile = page.getByRole("link", {
+      name: RegExp(productName, 'i'),
+    })
+    // selecting swatch
+    const productTileImg = productTile.locator("img")
+    await productTileImg.waitFor({state: 'visible'})
+    await expect(productTile.getByText(RegExp(`From \\${productPrice}`, 'i'))).toBeVisible()
+
+    await productTile.getByLabel(RegExp(productColor, 'i'), { exact: true }).hover()
+    await productTile.click()
+}
+
 /**
  * Adds the `Cotton Turtleneck Sweater` product to the cart with the variant:
  * Color: Black
@@ -273,6 +302,43 @@ export const loginShopper = async ({page, userCredentials}) => {
     }
 }
 
+/**
+ * Attempts to log in a shopper with provided user credentials.
+ * 
+ * @param {Object} options.page - Object that represents a tab/window in the browser provided by playwright
+ * @return {Boolean} - denotes whether or not login was successful
+ */
+export const socialLoginShopper = async ({page}) => {
+    try {
+        await page.goto(config.SOCIAL_LOGIN_RETAIL_APP_HOME + "/login")
+
+        await page.getByText(/Google/i).click()
+        await expect(page.getByText(/Sign in with Google/i)).toBeVisible({ timeout: 10000 })
+        await page.waitForSelector('input[type="email"]')
+
+        // Fill in the email input
+        await page.fill('input[type="email"]', config.PWA_E2E_USER_EMAIL)
+        await page.click('#identifierNext')
+
+        await page.waitForSelector('input[type="password"]')
+
+        // Fill in the password input
+        await page.fill('input[type="password"]', config.PWA_E2E_USER_PASSWORD)
+        await page.click('#passwordNext')
+        await page.waitForLoadState()
+
+        await expect(page.getByRole("heading", { name: /Account Details/i })).toBeVisible({timeout: 20000})
+        await expect(page.getByText(/e2e.pwa.kit@gmail.com/i)).toBeVisible()
+
+        // Password card should be hidden for social login user
+        await expect(page.getByRole("heading", { name: /Password/i })).toBeHidden()
+
+        return true
+    } catch {
+        return false
+    }
+}
+
 /**
  * Search for products by query string that takes you to the PLP
  *

e2e/tests/desktop/registered-shopper.spec.js

@@ -8,15 +8,16 @@
 const {test, expect} = require('@playwright/test')
 const config = require('../../config')
 const {
-    addProductToCart,
-    registerShopper,
-    validateOrderHistory,
-    validateWishlist,
-    loginShopper,
-    navigateToPDPDesktop
-} = require('../../scripts/pageHelpers')
+  addProductToCart,
+  registerShopper,
+  validateOrderHistory,
+  validateWishlist,
+  loginShopper,
+  navigateToPDPDesktop,
+  navigateToPDPDesktopSocial,
+  socialLoginShopper,
+} = require("../../scripts/pageHelpers")
 const {generateUserCredentials, getCreditCardExpiry} = require('../../scripts/utils.js')
-
 let registeredUserCredentials = {}
 
 test.beforeAll(async () => {
@@ -156,3 +157,46 @@ test('Registered shopper can add item to wishlist', async ({page}) => {
     // wishlist
     await validateWishlist({page})
 })
+
+/**
+ * Test that social login persists a user's shopping cart
+ * TODO: Fix flaky test
+ * Skipping this test for now because Google login requires 2FA, which Playwright cannot get past.
+ */
+test.skip("Registered shopper logged in through social retains persisted cart", async ({ page }) => {
+  navigateToPDPDesktopSocial({page, productName: "Floral Ruffle Top", productColor: "Cardinal Red Multi", productPrice: "£35.19"})
+
+  // Add to Cart
+  await expect(
+    page.getByRole("heading", { name: /Floral Ruffle Top/i })
+  ).toBeVisible({timeout: 15000})
+  await page.getByRole("radio", { name: "L", exact: true }).click()
+
+  await page.locator("button[data-testid='quantity-increment']").click()
+
+  // Selected Size and Color texts are broken into multiple elements on the page.
+  // So we need to look at the page URL to verify selected variants
+  const updatedPageURL = await page.url()
+  const params = updatedPageURL.split("?")[1]
+  expect(params).toMatch(/size=9LG/i)
+  expect(params).toMatch(/color=JJ9DFXX/i)
+  await page.getByRole("button", { name: /Add to Cart/i }).click()
+
+  const addedToCartModal = page.getByText(/2 items added to cart/i)
+
+  await addedToCartModal.waitFor()
+
+  await page.getByLabel("Close", { exact: true }).click()
+
+  // Social Login
+  await socialLoginShopper({
+    page
+  })
+
+  // Check Items in Cart
+  await page.getByLabel(/My cart/i).click()
+  await page.waitForLoadState()
+  await expect(
+    page.getByRole("link", { name: /Floral Ruffle Top/i })
+  ).toBeVisible()
+})

packages/commerce-sdk-react/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Clear auth state if session has been invalidated by a password change [#2092](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)
 - DNT interface improvement [#2203](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2203)
 - Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
+- Add `authorizeIDP`, `loginIDPUser`, `authorizePasswordless`, `getPasswordLessAccessToken`, `getPasswordResetToken`, and `resetPassword` wrapper functions to support Social Login, Passwordless Login, and Password Reset [#2079] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2079)
 
 ## v3.1.0 (Oct 28, 2024)
 

packages/commerce-sdk-react/package.json

@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "^3.1.1",
+    "commerce-sdk-isomorphic": "^3.2.0",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },

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

@@ -44,7 +44,11 @@ jest.mock('commerce-sdk-isomorphic', () => {
             loginGuestUserPrivate: jest.fn().mockResolvedValue(''),
             loginRegisteredUserB2C: jest.fn().mockResolvedValue(''),
             logout: jest.fn().mockResolvedValue(''),
-            handleTokenResponse: jest.fn().mockResolvedValue('')
+            handleTokenResponse: jest.fn().mockResolvedValue(''),
+            loginIDPUser: jest.fn().mockResolvedValue(''),
+            authorizeIDP: jest.fn().mockResolvedValue(''),
+            authorizePasswordless: jest.fn().mockResolvedValue(''),
+            getPasswordLessAccessToken: jest.fn().mockResolvedValue('')
         },
         ShopperCustomers: jest.fn().mockImplementation(() => {
             return {
@@ -59,7 +63,8 @@ jest.mock('../utils', () => ({
     onClient: () => true,
     getParentOrigin: jest.fn().mockResolvedValue(''),
     isOriginTrusted: () => false,
-    getDefaultCookieAttributes: () => {}
+    getDefaultCookieAttributes: () => {},
+    isAbsoluteUrl: () => true
 }))
 
 /** The auth data we store has a slightly different shape than what we use. */
@@ -72,7 +77,8 @@ const config = {
     siteId: 'siteId',
     proxy: 'proxy',
     redirectURI: 'redirectURI',
-    logger: console
+    logger: console,
+    passwordlessLoginCallbackURI: 'passwordlessLoginCallbackURI'
 }
 
 const configSLASPrivate = {
@@ -96,10 +102,21 @@ const JWTExpired = jwt.sign(
     'secret'
 )
 
+const configPasswordlessSms = {
+    clientId: 'clientId',
+    organizationId: 'organizationId',
+    shortCode: 'shortCode',
+    siteId: 'siteId',
+    proxy: 'proxy',
+    redirectURI: 'redirectURI',
+    logger: console
+}
+
 const FAKE_SLAS_EXPIRY = DEFAULT_SLAS_REFRESH_TOKEN_REGISTERED_TTL - 1
 
 const TOKEN_RESPONSE: ShopperLoginTypes.TokenResponse = {
-    access_token: 'access_token_xyz',
+    access_token:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJjYy1zbGFzOjp6enJmXzAwMTo6c2NpZDpjOWM0NWJmZC0wZWQzLTRhYTIteHh4eC00MGY4ODk2MmI4MzY6OnVzaWQ6YjQ4NjUyMzMtZGU5Mi00MDM5LXh4eHgtYWEyZGZjOGMxZWE1IiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJpc2IiOiJ1aWRvOmVjb206OnVwbjpHdWVzdHx8am9obi5kb2VAZXhhbXBsZS5jb206OnVpZG46Sm9obiBEb2U6OmdjaWQ6Z3Vlc3QtMTIzNDU6OnJjaWQ6cmVnaXN0ZXJlZC02Nzg5MCIsImRudCI6InRlc3QifQ.9yKtUb22ExO-Q4VNQRAyIgTm63l3x5z45Uu1FIQa5dQ',
     customer_id: 'customer_id_xyz',
     enc_user_id: 'enc_user_id_xyz',
     expires_in: 1800,
@@ -596,6 +613,73 @@ describe('Auth', () => {
             clientSecret: SLAS_SECRET_PLACEHOLDER
         })
     })
+
+    test('loginIDPUser calls isomorphic loginIDPUser', async () => {
+        const auth = new Auth(config)
+        await auth.loginIDPUser({redirectURI: 'redirectURI', code: 'test'})
+        expect(helpers.loginIDPUser).toHaveBeenCalled()
+        const functionArg = (helpers.loginIDPUser as jest.Mock).mock.calls[0][2]
+        expect(functionArg).toMatchObject({redirectURI: 'redirectURI', code: 'test'})
+    })
+
+    test('loginIDPUser adds clientSecret to parameters when using private client', async () => {
+        const auth = new Auth(configSLASPrivate)
+        await auth.loginIDPUser({redirectURI: 'test', code: 'test'})
+        expect(helpers.loginIDPUser).toHaveBeenCalled()
+        const functionArg = (helpers.loginIDPUser as jest.Mock).mock.calls[0][1]
+        expect(functionArg).toMatchObject({
+            clientSecret: SLAS_SECRET_PLACEHOLDER
+        })
+    })
+
+    test('authorizeIDP calls isomorphic authorizeIDP', async () => {
+        const auth = new Auth(config)
+        await auth.authorizeIDP({redirectURI: 'redirectURI', hint: 'test'})
+        expect(helpers.authorizeIDP).toHaveBeenCalled()
+        const functionArg = (helpers.authorizeIDP as jest.Mock).mock.calls[0][1]
+        expect(functionArg).toMatchObject({redirectURI: 'redirectURI', hint: 'test'})
+    })
+
+    test('authorizeIDP adds clientSecret to parameters when using private client', async () => {
+        const auth = new Auth(configSLASPrivate)
+        await auth.authorizeIDP({redirectURI: 'test', hint: 'test'})
+        expect(helpers.authorizeIDP).toHaveBeenCalled()
+        const privateClient = (helpers.authorizeIDP as jest.Mock).mock.calls[0][2]
+        expect(privateClient).toBe(true)
+    })
+
+    test('authorizePasswordless calls isomorphic authorizePasswordless', async () => {
+        const auth = new Auth(config)
+        await auth.authorizePasswordless({
+            callbackURI: 'callbackURI',
+            userid: 'userid',
+            mode: 'callback'
+        })
+        expect(helpers.authorizePasswordless).toHaveBeenCalled()
+        const functionArg = (helpers.authorizePasswordless as jest.Mock).mock.calls[0][2]
+        expect(functionArg).toMatchObject({
+            callbackURI: 'callbackURI',
+            userid: 'userid',
+            mode: 'callback'
+        })
+    })
+
+    test('authorizePasswordless sets mode to sms as configured', async () => {
+        const auth = new Auth(configPasswordlessSms)
+        await auth.authorizePasswordless({userid: 'userid', mode: 'sms'})
+        expect(helpers.authorizePasswordless).toHaveBeenCalled()
+        const functionArg = (helpers.authorizePasswordless as jest.Mock).mock.calls[0][2]
+        expect(functionArg).toMatchObject({userid: 'userid', mode: 'sms'})
+    })
+
+    test('getPasswordLessAccessToken calls isomorphic getPasswordLessAccessToken', async () => {
+        const auth = new Auth(config)
+        await auth.getPasswordLessAccessToken({pwdlessLoginToken: '12345678'})
+        expect(helpers.getPasswordLessAccessToken).toHaveBeenCalled()
+        const functionArg = (helpers.getPasswordLessAccessToken as jest.Mock).mock.calls[0][2]
+        expect(functionArg).toMatchObject({pwdlessLoginToken: '12345678'})
+    })
+
     test('logout as registered user calls isomorphic logout', async () => {
         const auth = new Auth(config)