Fix the theme ID mismatch error, where the live theme ID is returned …

…instead of the development theme ID

.changeset/fresh-ears-search.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix the theme ID mismatch error, where the live theme ID is returned instead of the development theme ID

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

@@ -227,47 +227,57 @@ describe('dev proxy', () => {
   describe('canProxyRequest', () => {
     test('should proxy non-GET requests', () => {
       const event = createH3Event('POST', '/some-path.html')
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should proxy Cart requests as they are not supported by the SFR client', () => {
       const event = createH3Event('GET', '/cart/some-path')
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should proxy CDN requests', () => {
       const event = createH3Event('GET', '/cdn/some-path')
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should proxy CDN requests for extensions', () => {
       const event = createH3Event('GET', '/ext/cdn/some-path')
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should proxy requests with file extensions', () => {
       const event = createH3Event('GET', '/some-path.js')
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should proxy requests with a non-default accept header', () => {
       const event = createH3Event('GET', '/some-path', {accept: 'application/json'})
-      expect(canProxyRequest(event)).toBe(true)
+      expect(canProxyRequest(event)).toBeTruthy()
     })
 
     test('should not proxy requests with a default accept header and no extension, allowing them to be rendered by the SFR client', () => {
       const event = createH3Event('GET', '/some-path', {accept: '*/*'})
-      expect(canProxyRequest(event)).toBe(false)
+      expect(canProxyRequest(event)).toBeFalsy()
     })
 
     test('should not proxy HTML requests (based on the extension), allowing them to be rendered by the SFR client', () => {
       const event = createH3Event('GET', '/some-path.html')
-      expect(canProxyRequest(event)).toBe(false)
+      expect(canProxyRequest(event)).toBeFalsy()
     })
 
     test('should not proxy HTML requests (based on the "accept" header), allowing them to be rendered by the SFR client', () => {
       const event = createH3Event('GET', '/some-path', {accept: 'text/html'})
-      expect(canProxyRequest(event)).toBe(false)
+      expect(canProxyRequest(event)).toBeFalsy()
+    })
+
+    test('should proxy the /account requests as it may result on 302 (for users with "Sign in with Shop"), and rendering via the the SFR API would result in a broken 200', () => {
+      const event = createH3Event('GET', '/account')
+      expect(canProxyRequest(event)).toBeTruthy()
+    })
+
+    test('should not proxy the /account/login requests', () => {
+      const event = createH3Event('GET', '/account/login')
+      expect(canProxyRequest(event)).toBeFalsy()
     })
   })
 })

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

@@ -25,9 +25,14 @@ import type {Theme} from '@shopify/cli-kit/node/themes/types'
 import type {Response as NodeResponse} from '@shopify/cli-kit/node/http'
 import type {DevServerContext} from './types.js'
 
-const CART_PREFIX = '/cart/'
 export const VANITY_CDN_PREFIX = '/cdn/'
 export const EXTENSION_CDN_PREFIX = '/ext/cdn/'
+
+const CART_PATTERN = /^\/cart\//
+const ACCOUNT_PATTERN = /^\/account\/?$/
+const VANITY_CDN_PATTERN = new RegExp(`^${VANITY_CDN_PREFIX}`)
+const EXTENSION_CDN_PATTERN = new RegExp(`^${EXTENSION_CDN_PREFIX}`)
+
 const IGNORED_ENDPOINTS = [
   '/.well-known',
   '/shopify/monorail',
@@ -75,9 +80,10 @@ export function getProxyHandler(_theme: Theme, ctx: DevServerContext) {
  */
 export function canProxyRequest(event: H3Event) {
   if (event.method !== 'GET') return true
-  if (event.path.startsWith(CART_PREFIX)) return true
-  if (event.path.startsWith(VANITY_CDN_PREFIX)) return true
-  if (event.path.startsWith(EXTENSION_CDN_PREFIX)) return true
+  if (event.path.match(CART_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
 
   const [pathname] = event.path.split('?') as [string]
   const extension = extname(pathname)