[commerce-sdk-react] Multisite support #769

kevinxh · 2022-10-18T07:38:52Z

This PR adds multi-site support to the commerce-sdk-react package.

background

We've learned recently that SLAS tokens has the scope limited to a site, which means, you can't re-use tokens across two different site. When a user switch site, we must get new tokens from SLAS.

Implementation

The implementation is quite simple that every time an Auth class is initialized, it will detect if the site is different, if site is different from the last login, it will clears the storage and attempts to restart the authentication flow.

How can I test it?

Pull the code then

cd ./packages/commerce-sdk-react
npm run build
cd ../test-commerce-sdk-react
npm start

// open localhost:3000
// record the value of access_token in localstorage
// you should see the site switch at the right bottom corner, click it
// verify that the access_token is different after site switch
// verify there are network requests sent to fetch a new guest token

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

alexvuong · 2022-10-18T18:06:16Z

I ran into an issue where the locale is not matching the site from the backend.

Step to reproduce:

Go to shopperProducts page
Switch site
Click on the link to go to a single product page
You will see the error

vmarta · 2022-10-18T22:17:10Z

packages/commerce-sdk-react/src/hooks/ShopperProducts/query.ts

+    const {locale, currency} = useConfig()
+    parameters.locale = parameters.locale || locale
+    parameters.currency = parameters.currency || currency


I see.. we haven't been using and passing in the locale until now 👍

This change is worthy to share with everyone in the team. For every hooks we're working on, we'll need to make sure to pass in the locale, if it's supported for that particular API endpoint.

vmarta · 2022-10-18T22:27:50Z

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

+    },
+    site_id: {
+        storage: cookieStorage,
+        key: 'cc-site-id',


The ticket mentions about namespacing the token. Do we still want to do that?

Without namespacing it, I guess the consequence would be that when you switch back to a previously-visited site, you would lose your basket progress?

this cookie is used as the "namespacer". It's not realistic to store tokens for every single site as we are bound by the size limitation of Cookie/Localstorage. A customer could have 100+ sites and we can't keep them all.

You are right that customer will lose the basket progress unfortunately.

bendvc

Looks good.

…eCloud/pwa-kit into multisite-auth

* [commerce-sdk-react] Add mutation hooks and refactor query hooks (#726) * add mutation hook and refactor query hook * lint * fix eslint * fix ts types * fix ts type for usequery * fix lint * fix test * lint * add mutation example * fix typo * DRY useAuthenticated * fix object.keys type * use better name * change mutation signature * fix types * rename mutations * fix typos * fix shopper login types * fix test * remove unused vars * refactor mutation types * allow useMutation to pass thru options * remove comment Co-authored-by: Alex Vuong <[email protected]> * Dynamic footer Copyright date (#741) * Update checkout-footer.jsx * whitespace to bump CLA check * Add translation and alternate footer changes (force push is to remove unsigned commits from git history) * Shopper promotions hooks (#759) * usePromotions and usePromotionsForCampaign hooks * Footer copyright: remove the remaining hardcoded year (#760) * Revert "Remove custom options for react query hoc (#755)" (#775) This reverts commit 9e0f596. * `<ImageGallery >` uses `image.link` when DIS is not set (#786) * Fix global context pollution coming from nock (#785) * Fix global context pollution coming from nock * remove nock debug env var * npm run lint:fix * remove IDE-inserted import * Use default locale as target if none is specified (#788) * Use default locale as target if none is specified * Update CHANGELOG.md * [commerce-sdk-react] Multisite support (#769) * add multisite support * add test * update comment * pr feedback * add locale * add locale props to queries * add cookie expire * attempt to address test issues * attempt to resolve test issue * fix test * fix test again Co-authored-by: Brian Feister <[email protected]> * ShopperOrders hooks & mutations (#766) * Implement useOrder and usePaymentMethodsForOrder hooks * Add useOrder shopper hook to test * Add usePaymentMethods hook to test * Added valid order # to test * Updating demo * Completed demo of useOrder and usePaymentMethods * Added tests * working on tests * Fix tests * remove custom mode * record mock * mock oauths/login endpoint * added more tests * Updating demos * add mock response * add mock response * Implement hooks in test-commerce * Began writing tests for mutation, implemented useTaxes hook, cleaned up test-commerce demo * Passing parameters and body to mutate function * Mutation test, tax hook, lint * mocked response * added removePaymentMethodForOrder hook test * lint * Remove mutation tests for now * remove mutation mocks * lint * remove nock for mutation * createOrder hook in test project Co-authored-by: Alex Vuong <[email protected]> * ShopperCustomer hooks and mutations (#762) * `useCustomer` hook * `useCustomerAddress` hook * `useCustomerOrders` hook * Solve merge conflicts * Refactor `useCustomer` test page * Add `useCustomerOrders` hook to test page * Add `useCustomerBaskets` hook * Add `useShopperCustomerProductList` hook * Clean up * Add ShopperCustomer mutations to test page * Solve merge conflicts * Wait to add test file until completed * Add initial `useCustomer` tests * add useRegisteredUser HOC * clean up * clean up * Add query hooks tests * Revert "Add use registered user HOC" (#783) * Add mutation test * Update query key structure & Invalidate cache onSuccess mutations * lint * Add `useQueryClient` * Update mock responses * Update usecustomer-returns-data.json * PR Feedback * Remove failing mutation test * update mock responses * try fix flaky test * restore test-utils * Solve merge conflict Co-authored-by: Alex Vuong <[email protected]> * [commerce-sdk-react] Implement shopper baskets hooks (#768) * Implement queries for shopperBasket hooks * Added UseShopperBasket page to test-commerce-sdk-react app * Added unit tests for ShopperBasket Queries * Added test integrations for ShopperBasket queries * Added test integrations for shopperbasket queries * wip * set cache keys * multiple refactors * bug fixes * lint * revert unnecessary changes * remove the bad test examples * revert temp shopper customer changes * fix test Co-authored-by: Jainam Tushar Sheth <[email protected]> Co-authored-by: Brian Feister <[email protected]> Co-authored-by: Adam Raya <[email protected]> * ApiClient config needs to be updated when cid is changed (#790) * Add Support policy to all SDKs (#764) * add Support policy to all SDKs * Additional default options for React Query (#791) * Explore having react-query config be on user land * PR feedback, and simplifying the default options * Revert to making this option applied server side only * Fix `useServerContext` returning `isServerSide=false` when on server. (#782) * Revert contraint on prepass JSX * PR feedback * Nock: clean up the list of mocks after each test (#792) * Update `instanceUrl` on `retail-react-app-demo` preset (#799) * Update changelog files * Bump alpha version * Upgrade minimatch (#793) * remove minimatch from sdk and update version in pwa-kit-dev * update lock files * update lock files * add more tests * add comment * lint * revert packge-lock file changes * update pwa-kit-dev package-lock.json * fix lockfile again Co-authored-by: Kevin He <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Brian Feister <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Vincent Marta <[email protected]> Co-authored-by: Charles Lavery <[email protected]> Co-authored-by: Ben Chypak <[email protected]> Co-authored-by: yunakim714 <[email protected]> Co-authored-by: Jainam Tushar Sheth <[email protected]>

* Starting release process for 2.3.0 * Add guards to result sent to Einstein (#756) * Add result guards to Einstein and PLP sendViewCategory Einstein * Bump alpha version * Update changelog * 🚢 `2.3.0-alpha.2` (#800) * [commerce-sdk-react] Add mutation hooks and refactor query hooks (#726) * add mutation hook and refactor query hook * lint * fix eslint * fix ts types * fix ts type for usequery * fix lint * fix test * lint * add mutation example * fix typo * DRY useAuthenticated * fix object.keys type * use better name * change mutation signature * fix types * rename mutations * fix typos * fix shopper login types * fix test * remove unused vars * refactor mutation types * allow useMutation to pass thru options * remove comment Co-authored-by: Alex Vuong <[email protected]> * Dynamic footer Copyright date (#741) * Update checkout-footer.jsx * whitespace to bump CLA check * Add translation and alternate footer changes (force push is to remove unsigned commits from git history) * Shopper promotions hooks (#759) * usePromotions and usePromotionsForCampaign hooks * Footer copyright: remove the remaining hardcoded year (#760) * Revert "Remove custom options for react query hoc (#755)" (#775) This reverts commit 9e0f596. * `<ImageGallery >` uses `image.link` when DIS is not set (#786) * Fix global context pollution coming from nock (#785) * Fix global context pollution coming from nock * remove nock debug env var * npm run lint:fix * remove IDE-inserted import * Use default locale as target if none is specified (#788) * Use default locale as target if none is specified * Update CHANGELOG.md * [commerce-sdk-react] Multisite support (#769) * add multisite support * add test * update comment * pr feedback * add locale * add locale props to queries * add cookie expire * attempt to address test issues * attempt to resolve test issue * fix test * fix test again Co-authored-by: Brian Feister <[email protected]> * ShopperOrders hooks & mutations (#766) * Implement useOrder and usePaymentMethodsForOrder hooks * Add useOrder shopper hook to test * Add usePaymentMethods hook to test * Added valid order # to test * Updating demo * Completed demo of useOrder and usePaymentMethods * Added tests * working on tests * Fix tests * remove custom mode * record mock * mock oauths/login endpoint * added more tests * Updating demos * add mock response * add mock response * Implement hooks in test-commerce * Began writing tests for mutation, implemented useTaxes hook, cleaned up test-commerce demo * Passing parameters and body to mutate function * Mutation test, tax hook, lint * mocked response * added removePaymentMethodForOrder hook test * lint * Remove mutation tests for now * remove mutation mocks * lint * remove nock for mutation * createOrder hook in test project Co-authored-by: Alex Vuong <[email protected]> * ShopperCustomer hooks and mutations (#762) * `useCustomer` hook * `useCustomerAddress` hook * `useCustomerOrders` hook * Solve merge conflicts * Refactor `useCustomer` test page * Add `useCustomerOrders` hook to test page * Add `useCustomerBaskets` hook * Add `useShopperCustomerProductList` hook * Clean up * Add ShopperCustomer mutations to test page * Solve merge conflicts * Wait to add test file until completed * Add initial `useCustomer` tests * add useRegisteredUser HOC * clean up * clean up * Add query hooks tests * Revert "Add use registered user HOC" (#783) * Add mutation test * Update query key structure & Invalidate cache onSuccess mutations * lint * Add `useQueryClient` * Update mock responses * Update usecustomer-returns-data.json * PR Feedback * Remove failing mutation test * update mock responses * try fix flaky test * restore test-utils * Solve merge conflict Co-authored-by: Alex Vuong <[email protected]> * [commerce-sdk-react] Implement shopper baskets hooks (#768) * Implement queries for shopperBasket hooks * Added UseShopperBasket page to test-commerce-sdk-react app * Added unit tests for ShopperBasket Queries * Added test integrations for ShopperBasket queries * Added test integrations for shopperbasket queries * wip * set cache keys * multiple refactors * bug fixes * lint * revert unnecessary changes * remove the bad test examples * revert temp shopper customer changes * fix test Co-authored-by: Jainam Tushar Sheth <[email protected]> Co-authored-by: Brian Feister <[email protected]> Co-authored-by: Adam Raya <[email protected]> * ApiClient config needs to be updated when cid is changed (#790) * Add Support policy to all SDKs (#764) * add Support policy to all SDKs * Additional default options for React Query (#791) * Explore having react-query config be on user land * PR feedback, and simplifying the default options * Revert to making this option applied server side only * Fix `useServerContext` returning `isServerSide=false` when on server. (#782) * Revert contraint on prepass JSX * PR feedback * Nock: clean up the list of mocks after each test (#792) * Update `instanceUrl` on `retail-react-app-demo` preset (#799) * Update changelog files * Bump alpha version * Upgrade minimatch (#793) * remove minimatch from sdk and update version in pwa-kit-dev * update lock files * update lock files * add more tests * add comment * lint * revert packge-lock file changes * update pwa-kit-dev package-lock.json * fix lockfile again Co-authored-by: Kevin He <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Brian Feister <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Vincent Marta <[email protected]> Co-authored-by: Charles Lavery <[email protected]> Co-authored-by: Ben Chypak <[email protected]> Co-authored-by: yunakim714 <[email protected]> Co-authored-by: Jainam Tushar Sheth <[email protected]> * 🚢 Version 2.3.0 (#802) * Version 2.3.0 * Update changelog files * Begin development on 2.4.0 Co-authored-by: Kevin He <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Brian Feister <[email protected]> Co-authored-by: Alex Vuong <[email protected]> Co-authored-by: Vincent Marta <[email protected]> Co-authored-by: Charles Lavery <[email protected]> Co-authored-by: Ben Chypak <[email protected]> Co-authored-by: yunakim714 <[email protected]> Co-authored-by: Jainam Tushar Sheth <[email protected]>

add multisite support

3bacf11

kevinxh requested a review from a team as a code owner October 18, 2022 07:38

kevinxh added 2 commits October 18, 2022 09:23

add test

f2ec0b8

update comment

65e389a

alexvuong reviewed Oct 18, 2022

View reviewed changes

packages/commerce-sdk-react/src/auth/index.ts Outdated Show resolved Hide resolved

alexvuong reviewed Oct 18, 2022

View reviewed changes

packages/commerce-sdk-react/src/auth/index.ts Outdated Show resolved Hide resolved

kevinxh added 2 commits October 18, 2022 12:18

pr feedback

b64d973

add locale

49d1e7d

vmarta reviewed Oct 18, 2022

View reviewed changes

kevinxh added 3 commits October 18, 2022 15:29

add locale props to queries

fc02958

add cookie expire

e8d0af9

attempt to address test issues

73c1dc2

bendvc approved these changes Oct 19, 2022

View reviewed changes

Merge branch 'develop' into multisite-auth

56510e2

salesforce-cla bot added the cla:signed label Oct 20, 2022

kevinxh added 5 commits October 20, 2022 08:42

Merge branch 'multisite-auth' of https://github.com/SalesforceCommerc…

83bae7d

…eCloud/pwa-kit into multisite-auth

attempt to resolve test issue

08ce338

fix test

043ee22

fix test again

6dcc510

Merge branch 'develop' into multisite-auth

4cb4c84

kevinxh merged commit 2624303 into develop Oct 20, 2022

kevinxh deleted the multisite-auth branch October 20, 2022 18:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[commerce-sdk-react] Multisite support #769

[commerce-sdk-react] Multisite support #769

kevinxh commented Oct 18, 2022 •

edited

Loading

alexvuong commented Oct 18, 2022

vmarta Oct 18, 2022

vmarta Oct 18, 2022

kevinxh Oct 18, 2022

bendvc left a comment

[commerce-sdk-react] Multisite support #769

[commerce-sdk-react] Multisite support #769

Conversation

kevinxh commented Oct 18, 2022 • edited Loading

background

Implementation

How can I test it?

alexvuong commented Oct 18, 2022

vmarta Oct 18, 2022

Choose a reason for hiding this comment

vmarta Oct 18, 2022

Choose a reason for hiding this comment

kevinxh Oct 18, 2022

Choose a reason for hiding this comment

bendvc left a comment

Choose a reason for hiding this comment

kevinxh commented Oct 18, 2022 •

edited

Loading