Merge pull request #5328 from Shopify/fd-checkout-workaround

[Theme] Fix local dev proxy for checkout and accounts/logout

Author: frandiox

.changeset/giant-crews-act.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix the local dev proxy for `/checkouts` and `/accounts/logout` to avoid 401 and 403 errors.

packages/theme/src/cli/utilities/theme-environment/proxy.test.ts

@@ -235,6 +235,11 @@ describe('dev proxy', () => {
       expect(canProxyRequest(event)).toBeTruthy()
     })
 
+    test('should proxy Checkout requests as they are not supported by the SFR client', () => {
+      const event = createH3Event('GET', '/checkouts/xyz')
+      expect(canProxyRequest(event)).toBeTruthy()
+    })
+
     test('should proxy CDN requests', () => {
       const event = createH3Event('GET', '/cdn/some-path')
       expect(canProxyRequest(event)).toBeTruthy()
@@ -295,5 +300,10 @@ describe('dev proxy', () => {
       const event = createH3Event('GET', '/account/login/multipass/<token>')
       expect(canProxyRequest(event)).toBeTruthy()
     })
+
+    test('should proxy /account/logout requests', () => {
+      const event = createH3Event('GET', '/account/logout')
+      expect(canProxyRequest(event)).toBeTruthy()
+    })
   })
 })

packages/theme/src/cli/utilities/theme-environment/proxy.ts

@@ -29,7 +29,8 @@ export const VANITY_CDN_PREFIX = '/cdn/'
 export const EXTENSION_CDN_PREFIX = '/ext/cdn/'
 
 const CART_PATTERN = /^\/cart\//
-const ACCOUNT_PATTERN = /^\/account(\/login\/multipass(\/[^/]+)?)?\/?$/
+const CHECKOUT_PATTERN = /^\/checkouts\/(?!internal\/)/
+const ACCOUNT_PATTERN = /^\/account(\/login\/multipass(\/[^/]+)?|\/logout)?\/?$/
 const VANITY_CDN_PATTERN = new RegExp(`^${VANITY_CDN_PREFIX}`)
 const EXTENSION_CDN_PATTERN = new RegExp(`^${EXTENSION_CDN_PREFIX}`)
 
@@ -81,6 +82,7 @@ export function getProxyHandler(_theme: Theme, ctx: DevServerContext) {
 export function canProxyRequest(event: H3Event) {
   if (event.method !== 'GET') return true
   if (event.path.match(CART_PATTERN)) return true
+  if (event.path.match(CHECKOUT_PATTERN)) return true
   if (event.path.match(ACCOUNT_PATTERN)) return true
   if (event.path.match(VANITY_CDN_PATTERN)) return true
   if (event.path.match(EXTENSION_CDN_PATTERN)) return true
@@ -199,9 +201,11 @@ function patchProxiedResponseHeaders(ctx: DevServerContext, event: H3Event, resp
   const locationHeader = response.headers.get('Location')
   if (locationHeader) {
     const url = new URL(locationHeader, 'https://shopify.dev')
-    url.searchParams.delete('_fd')
-    url.searchParams.delete('pb')
-    setResponseHeader(event, 'Location', url.href.replace(url.origin, ''))
+    if (!CHECKOUT_PATTERN.test(url.pathname)) {
+      url.searchParams.delete('_fd')
+      url.searchParams.delete('pb')
+      setResponseHeader(event, 'Location', url.href.replace(url.origin, ''))
+    }
   }
 
   // Cookies are set for the vanity domain, fix it for localhost: