Merge pull request #4490 from Shopify/theme-access-fix

Fix Theme Access authentication on `shopify theme dev` and `shopify theme console` commands
Shopify · Sep 20, 2024 · 0e2831c · 0e2831c
2 parents d71bca9 + cce54b1
commit 0e2831c
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
 }