@W-14686284@ Fix Preview 403 errors when opening storefront being previewed in a new tab

[adamraya]

Description

Problem
When previewing a v3 storefront using Storefront Preview, if the merchant opens the same v3 storefront being previewed in a new browser tab, the storefront opened in the new tab receives 403 error responses for all the SCAPI requests.

This is because the Private SLAS client used in Preview returns a refresh token containing a scope that the Public SLAS client used by the storefront does not have, the SLAS refresh token is configured to be stored in v3 storefronts using cookies. The cookies storage is shared across browser tabs and iframes loading the same domain. Thus both the iframe and the storefront loaded in the new tab use the same SLAS refresh token.

STR:

1. Open Storefront Preview in Runtime Admin to preview a v3 storefront.
2. Open that same v3 storefront in a new browser tab.
3. Observe the 403 error responses for all the SCAPI requests in the storefront opened in a new tab.

Workaround
The workaround is to use a different cookie key cc-nx-g-iframe and cc-nx-iframe to store the SLAS refresh token when previewing the storefront. Using different cookie keys separates browser contexts, meaning that different sessions can be active in the browser tabs and the iframe, even if they are loading the same domain.

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

• Store SLAS refresh token in a different cookie key when previewing the storefront to keep separated browser contexts.

How to Test-Drive This PR

1. Open Storefront Preview in Runtime Admin to preview a v3 storefront with the fix.
2. Open that same v3 storefront with the fix in a new browser tab.
3. Observe there are no 403 error responses for the SCAPI requests in the storefront opened in a new tab, and the context is separated, i.e. the context set in Preview is not reflected in the storefront opened in a new tab.

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)

[alexvuong]

@adamraya we have refresh_token_guest_copy that is stored in local storage, instead of having to keep the refresh_token_guest in both cookies and local. Can we use the refresh_token_guest_copy in local for our storefront instead?

ready()
        const refreshTokenGuest = this.get('refresh_token_guest_copy')

[adamraya]

@adamraya we have refresh_token_guest_copy that is stored in local storage, instead of having to keep the refresh_token_guest in both cookies and local. Can we use the refresh_token_guest_copy in local for our storefront instead?

ready()
        const refreshTokenGuest = this.get('refresh_token_guest_copy')

@alexvuong I tested that change but it doesn't work well. We have a logic in the storefront that checks whether the SLAS refresh token has changed comparing the values of refresh_token_registered stored in cookie and refresh_token_registered_copy stored in local storage.

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

Line 391 in d69c58e

if (accessToken && this.isTokenValidForHybrid(accessToken)) {

Because after setting the context in Preview, the SLAS refresh token always changes, the storefront preview tab refreshes the SLAS token on each soft navigation. This also causes a new message to be sent via postMessage API to Preview, informing that the SLAS token has changed, and it forces to reload to generate a new token in the Storefront Preview tab. We don't have separate browser contexts between the storefront opened in a new tab and the storefront being previewed.