Fix Theme Access authentication on shopify theme dev and `shopify t…

…heme console` commands. (#4491)
Shopify · Sep 20, 2024 · 72859c9 · 72859c9
1 parent a1fcc90
commit 72859c9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/.changeset/hip-chefs-dance.md b/.changeset/hip-chefs-dance.md
@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix Theme Access authentication on `shopify theme dev` and `shopify theme console` commands
diff --git a/packages/theme/src/cli/utilities/theme-environment/dev-server-session.ts b/packages/theme/src/cli/utilities/theme-environment/dev-server-session.ts
@@ -50,7 +50,11 @@ async function fetchDevServerSession(
 
   const session = await ensureAuthenticatedThemes(adminSession.storeFqdn, adminPassword, [])
   const storefrontToken = await ensureAuthenticatedStorefront([], adminPassword)
-  const sessionCookies = await getStorefrontSessionCookies(baseUrl, themeId, storefrontPassword, {})
+  const sessionCookies = await getStorefrontSessionCookies(baseUrl, themeId, storefrontPassword, {
+    'X-Shopify-Shop': session.storeFqdn,
+    'X-Shopify-Access-Token': session.token,
+    Authorization: `Bearer ${storefrontToken}`,
+  })
 
   return {
     ...session,

diff --git a/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.test.ts b/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.test.ts
@@ -12,7 +12,7 @@ vi.mock('@shopify/cli-kit/node/http', async () => {
   }
 })
 
-const successResponse = {ok: true, status: 200, headers: {get: vi.fn()}} as any
+const successResponse = {ok: true, status: 200, headers: {get: vi.fn(), delete: vi.fn()}} as any
 
 const session: DevServerSession = {
   token: 'admin_token_abc123',
@@ -50,6 +50,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0',
       expect.objectContaining({
@@ -74,6 +75,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://theme-kit-access.shopifyapps.com/cli/sfr/products/1?_fd=0&pb=0',
       expect.objectContaining({
@@ -109,6 +111,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0&section_id=sections--1__announcement-bar',
       expect.objectContaining({
@@ -135,6 +138,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0&app_block_id=00001111222233334444',
       expect.objectContaining({
@@ -162,6 +166,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0&section_id=sections--1__announcement-bar',
       expect.objectContaining({
@@ -191,6 +196,7 @@ describe('render', () => {
 
     // Then
     expect(response.status).toEqual(200)
+    expect(response.headers.delete).toBeCalled()
     expect(fetch).toHaveBeenCalledWith(
       'https://store.myshopify.com/products/1?_fd=0&pb=0&value=A&value=B',
       expect.objectContaining({

diff --git a/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.ts b/packages/theme/src/cli/utilities/theme-environment/storefront-renderer.ts
@@ -34,6 +34,13 @@ export async function render(session: DevServerSession, context: DevServerRender
   const requestId = response.headers.get('x-request-id')
   outputDebug(`← ${response.status} (request_id: ${requestId})`)
 
+  /**
+   * Theme Access app requests return the 'application/json' content type.
+   * However, patched renderings will never patch JSON requests; so we're
+   * consistently discarding the content type.
+   */
+  response.headers.delete('Content-Type')
+
   return response
 }