[v3] Add multi-site suffix to auth token keys #1208

kevinxh · 2023-05-15T22:25:26Z

Description

In order to be compatible with v7 plugin_slas, we need to change the multi-site keys to include siteId as a suffix. (previously prefix)

This PR also removes the configurable separator as the separator should not be configurable and must be _ to be compatible with plugin_slas.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

(change1)

How to Test-Drive This PR

npm start
localhost:3000
verify cookies names, siteIds are suffixed

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

kevinxh · 2023-05-15T22:26:34Z

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

@@ -9,25 +9,23 @@ import Cookies from 'js-cookie'
 export type StorageType = 'cookie' | 'local' | 'memory'

 export interface BaseStorageOptions {
-    keyPrefix?: string
-    keyPrefixSeparator?: string


remove the option as changing the separator will break the compatibility with plugin_slas, we don't want to give user the option to do this.

alexvuong · 2023-05-15T23:31:42Z

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

@@ -49,15 +47,15 @@ export class CookieStorage extends BaseStorage {
        }
    }
    set(key: string, value: string, options?: Cookies.CookieAttributes) {
-        const prefixedKey = this.getPrefixedKey(key)
+        const prefixedKey = this.getSuffixedKey(key)


did you mean suffixedKey?

alexvuong · 2023-05-15T23:33:22Z

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

-        const prefixedKey = this.getPrefixedKey(key)
-        const oldValue = this.get(prefixedKey)
-        window.localStorage.setItem(prefixedKey, value)
+        const suffixedKey = this.getSuffixedKey(key)


Correct me if I am wrong, it looks like we are replace prefix with suffix for all the keys in storage? I thought originally we only want to do it for site_id key, not every key.

there is only 1 use case for prefix/suffix and it is the siteId.

I get that for the side_id use case, but I was talking about if we add another key, with the changes here means it will apply for any key that need to have suffix? 🤔 , so basically we move from using prefix to suffix for any key that uses it?

that's right... unless there is a use case for prefix, this change moves from using prefix to suffix for all keys.

vcua-mobify

The changes here make sense to me

* develop: (37 commits) [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) [v3] Add Convenience Components (#1183) Update commerce-sdk-react README (#1176) Add additional properties to ShopperLogin test types (#1185) Fix missing commerce-sdk-react logout call (#1180) ... # Conflicts: # package-lock.json # packages/commerce-sdk-react/CHANGELOG.md # packages/commerce-sdk-react/package-lock.json # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

* develop: (34 commits) [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) Add additional properties to ShopperLogin test types (#1185) Revert 2.7.0 branch to prep for 2.7.1 changes (#1182) #1174 Replace invalid value for wrap property (#1179) Add a redirect to login page after user signs out from checkout page (#1172) ... # Conflicts: # package-lock.json # packages/commerce-sdk-react/CHANGELOG.md # packages/commerce-sdk-react/package-lock.json # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/app/components/confirmation-modal/index.test.js # packages/template-retail-react-app/app/components/footer/index.jsx # packages/template-retail-react-app/app/components/header/index.jsx # packages/template-retail-react-app/app/components/list-menu/index.test.js # packages/template-retail-react-app/app/components/product-scroller/index.test.js # packages/template-retail-react-app/app/components/product-view-modal/index.test.js # packages/template-retail-react-app/app/components/search/index.test.js # packages/template-retail-react-app/app/hoc/with-registration/index.test.js # packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js # packages/template-retail-react-app/app/hooks/use-auth-modal.test.js # packages/template-retail-react-app/app/hooks/use-currency.test.js # packages/template-retail-react-app/app/hooks/use-multi-site.test.js # packages/template-retail-react-app/app/hooks/use-navigation.test.js # packages/template-retail-react-app/app/pages/account/addresses.test.js # packages/template-retail-react-app/app/pages/account/index.jsx # packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js # packages/template-retail-react-app/app/pages/cart/index.test.js # packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js # packages/template-retail-react-app/app/pages/checkout/index.test.js # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js # packages/template-retail-react-app/app/pages/home/index.test.js # packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx # packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx # packages/template-retail-react-app/app/pages/registration/index.test.jsx # packages/template-retail-react-app/app/utils/site-utils.js # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

@bendvc

…react-app * feature/template-extensibility: (38 commits) support windows file paths Feature/template extensibility (#1162) lockfiles from reaact18 / chakra2 remove demo extensible app in light of soon-to-be-merged PR from @bendvc [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) ... # Conflicts: # packages/my-extended-retail-app/config/default.js # packages/my-extended-retail-app/config/sites.js # packages/my-extended-retail-app/package-lock.json # packages/my-extended-retail-app/package.json # packages/my-extended-retail-app/pwa-kit-overrides/app/assets/svg/brand-logo.svg # packages/my-extended-retail-app/pwa-kit-overrides/app/components/_app-config/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/components/_app/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/pages/home/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/routes.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/ssr.js # packages/my-extended-retail-app/pwa-kit-overrides/app/static/ico/favicon.ico # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/app-icon-192.png # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/app-icon-512.png # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/apple-touch-icon.png # packages/pwa-kit-dev/bin/pwa-kit-dev.js # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/template-retail-react-app/app/components/confirmation-modal/index.test.js # packages/template-retail-react-app/app/components/footer/index.jsx # packages/template-retail-react-app/app/components/header/index.jsx # packages/template-retail-react-app/app/components/list-menu/index.test.js # packages/template-retail-react-app/app/components/product-scroller/index.test.js # packages/template-retail-react-app/app/components/product-view-modal/index.test.js # packages/template-retail-react-app/app/components/search/index.test.js # packages/template-retail-react-app/app/hoc/with-registration/index.test.js # packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js # packages/template-retail-react-app/app/hooks/use-auth-modal.test.js # packages/template-retail-react-app/app/hooks/use-currency.test.js # packages/template-retail-react-app/app/hooks/use-multi-site.test.js # packages/template-retail-react-app/app/hooks/use-navigation.test.js # packages/template-retail-react-app/app/pages/account/addresses.test.js # packages/template-retail-react-app/app/pages/account/index.jsx # packages/template-retail-react-app/app/pages/account/wishlist/index.test.js # packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js # packages/template-retail-react-app/app/pages/cart/index.test.js # packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js # packages/template-retail-react-app/app/pages/checkout/index.test.js # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js # packages/template-retail-react-app/app/pages/home/index.test.js # packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx # packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx # packages/template-retail-react-app/app/pages/registration/index.test.jsx # packages/template-retail-react-app/app/utils/site-utils.js # packages/template-retail-react-app/package-lock.json # packages/template-retail-react-app/package.json

kevinxh added 2 commits May 15, 2023 15:20

change prefix to suffix, remove separator option

6edcc16

fix test

1d05c36

kevinxh requested a review from a team as a code owner May 15, 2023 22:25

kevinxh commented May 15, 2023

View reviewed changes

kevinxh added 3 commits May 15, 2023 15:46

fix lint

f3558d9

guard undefined template literal

86349a6

fix tests

932c9ed

alexvuong reviewed May 15, 2023

View reviewed changes

rename variables

546a8c6

vcua-mobify previously approved these changes May 17, 2023

View reviewed changes

kevinxh added 3 commits May 17, 2023 23:04

Merge branch 'develop' into mutisite-suffix-token

6f420fb

fix bug

e716539

remove console.log

efe77be

kevinxh dismissed vcua-mobify’s stale review via efe77be May 18, 2023 08:12

fix test

0f5d27f

alexvuong approved these changes May 18, 2023

View reviewed changes

vcua-mobify approved these changes May 18, 2023

View reviewed changes

kevinxh merged commit 1c124d0 into develop May 18, 2023
17 checks passed

kevinxh deleted the mutisite-suffix-token branch May 18, 2023 18:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v3] Add multi-site suffix to auth token keys #1208

[v3] Add multi-site suffix to auth token keys #1208

kevinxh commented May 15, 2023

kevinxh May 15, 2023 •

edited

Loading

alexvuong May 15, 2023

kevinxh May 16, 2023

alexvuong May 15, 2023

kevinxh May 16, 2023 •

edited

Loading

alexvuong May 17, 2023

kevinxh May 17, 2023 •

edited

Loading

vcua-mobify left a comment

[v3] Add multi-site suffix to auth token keys #1208

[v3] Add multi-site suffix to auth token keys #1208

Conversation

kevinxh commented May 15, 2023

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

kevinxh May 15, 2023 • edited Loading

Choose a reason for hiding this comment

alexvuong May 15, 2023

Choose a reason for hiding this comment

kevinxh May 16, 2023

Choose a reason for hiding this comment

alexvuong May 15, 2023

Choose a reason for hiding this comment

kevinxh May 16, 2023 • edited Loading

Choose a reason for hiding this comment

alexvuong May 17, 2023

Choose a reason for hiding this comment

kevinxh May 17, 2023 • edited Loading

Choose a reason for hiding this comment

vcua-mobify left a comment

Choose a reason for hiding this comment

kevinxh May 15, 2023 •

edited

Loading

kevinxh May 16, 2023 •

edited

Loading

kevinxh May 17, 2023 •

edited

Loading