Feature passwordless social login

.github/workflows/e2e.yml

@@ -302,6 +302,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 [email protected] PWA_E2E_USER_PASSWORD=hpv_pek-JZK_xkz0wzf
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

e2e/config.js

@@ -156,4 +156,6 @@ module.exports = {
       "worker",
     ],
   },
+  PWA_E2E_USER_EMAIL: process.env.PWA_E2E_USER_EMAIL,
+  PWA_E2E_USER_PASSWORD: process.env.PWA_E2E_USER_PASSWORD
 };

e2e/scripts/pageHelpers.js

@@ -91,6 +91,34 @@ 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.RETAIL_APP_HOME);
+
+    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
@@ -254,6 +282,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.RETAIL_APP_HOME + "/login");
+
+        await page.getByRole("button", { name: /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(/[email protected]/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

@@ -14,6 +14,8 @@ const {
   validateWishlist,
   loginShopper,
   navigateToPDPDesktop,
+  navigateToPDPDesktopSocial,
+  socialLoginShopper,
 } = require("../../scripts/pageHelpers");
 const {
   generateUserCredentials,
@@ -165,3 +167,44 @@ test("Registered shopper can add item to wishlist", async ({ page }) => {
   // wishlist
   await validateWishlist({page})
 });
+
+/**
+ * Test that social login persists a user's shopping cart
+ */
+test("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").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

@@ -2,6 +2,8 @@
 
 - Update CacheUpdateMatrix for mergeBasket mutation [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)
 - Clear auth state if session has been invalidated by a password change [#2092](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)
+-  Add wrappers for social login helpers: `authorizeIDP` and `loginIDPUser` [#2049](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2049)
+- Clear auth state if session has been invalidated by a password change [#2092](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2092)
 
 ## v3.1.0 (Oct 28, 2024)
 

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,14 +77,25 @@ const config = {
     siteId: 'siteId',
     proxy: 'proxy',
     redirectURI: 'redirectURI',
-    logger: console
+    logger: console,
+    passwordlessLoginCallbackURI: 'passwordlessLoginCallbackURI'
 }
 
 const configSLASPrivate = {
     ...config,
     enablePWAKitPrivateClient: true
 }
 
+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 = {
@@ -584,6 +600,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)