send bearer token and user agent in proxy calls

Author: EvilGenius13

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-dynamic-delete */
 import {buildCookies} from './storefront-renderer.js'
+import {cleanHeader, defaultHeaders} from './storefront-utils.js'
 import {logRequestLine} from '../log-request-line.js'
 import {createFetchError, extractFetchErrorInfo} from '../errors.js'
 import {renderWarning} from '@shopify/cli-kit/node/ui'
@@ -305,20 +306,24 @@ export function proxyStorefrontRequest(event: H3Event, ctx: DevServerContext): P
   const headers = getProxyStorefrontHeaders(event)
   const body = getRequestWebStream(event)
 
+  const finalHeaders = cleanHeader({
+    ...headers,
+    ...defaultHeaders(),
+    Authorization: `Bearer ${ctx.session.storefrontToken}`,
+    // Required header for CDN requests
+    referer: url.origin,
+    // Update the cookie with the latest session
+    Cookie: buildCookies(ctx.session, {headers}),
+  })
+
   // eslint-disable-next-line no-restricted-globals
   return fetch(url, {
     method: event.method,
     body,
     duplex: body ? 'half' : undefined,
     // Important to return 3xx responses to the client
     redirect: 'manual',
-    headers: {
-      ...headers,
-      // Required header for CDN requests
-      referer: url.origin,
-      // Update the cookie with the latest session
-      cookie: buildCookies(ctx.session, {headers}),
-    },
+    headers: finalHeaders,
   } as RequestInit & {duplex?: 'half'})
     .then((response) => patchProxiedResponseHeaders(ctx, response))
     .catch((error: Error) => {

packages/theme/src/cli/utilities/theme-environment/storefront-renderer.ts

@@ -1,5 +1,5 @@
 import {parseCookies, serializeCookies} from './cookies.js'
-import {defaultHeaders, storefrontReplaceTemplatesParams} from './storefront-utils.js'
+import {cleanHeader, defaultHeaders, storefrontReplaceTemplatesParams} from './storefront-utils.js'
 import {DevServerSession, DevServerRenderContext} from './types.js'
 import {createFetchError} from '../errors.js'
 import {outputDebug} from '@shopify/cli-kit/node/output'
@@ -154,10 +154,3 @@ function themeAccessHeaders(session: DevServerSession) {
     'X-Shopify-Access-Token': session.token,
   }
 }
-
-function cleanHeader(headers: {[key: string]: string}): {[key: string]: string} {
-  // Force the use of the 'Cookie' key if consumers also provide the 'cookie' key
-  delete headers.cookie
-  delete headers.authorization
-  return headers
-}

packages/theme/src/cli/utilities/theme-environment/storefront-utils.ts

@@ -26,3 +26,10 @@ export function defaultHeaders() {
     'User-Agent': `Shopify CLI; v=${CLI_KIT_VERSION}`,
   }
 }
+
+export function cleanHeader(headers: {[key: string]: string}): {[key: string]: string} {
+  // Force the use of the 'Cookie' key if consumers also provide the 'cookie' key
+  delete headers.cookie
+  delete headers.authorization
+  return headers
+}

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

@@ -82,10 +82,10 @@ describe('setupDevServer', () => {
   const localThemeExtensionFileSystem = emptyThemeExtFileSystem()
   const defaultServerContext: DevServerContext = {
     session: {
-      storefrontToken: '',
+      storefrontToken: 'shptka_test_token_123',
       token: '',
       storeFqdn: 'my-store.myshopify.com',
-      sessionCookies: {},
+      sessionCookies: {_shopify_essential: 'test-cookie-value'},
     },
     lastRequestedPath: '',
     localThemeFileSystem,
@@ -703,7 +703,11 @@ describe('setupDevServer', () => {
         expect.objectContaining({
           method: 'GET',
           redirect: 'manual',
-          headers: {referer},
+          headers: expect.objectContaining({
+            referer,
+            'User-Agent': expect.stringContaining('Shopify CLI'),
+            Authorization: expect.stringContaining('Bearer'),
+          }),
         }),
       )
 
@@ -724,7 +728,11 @@ describe('setupDevServer', () => {
         expect.objectContaining({
           method: 'GET',
           redirect: 'manual',
-          headers: {referer},
+          headers: expect.objectContaining({
+            referer,
+            'User-Agent': expect.stringContaining('Shopify CLI'),
+            Authorization: expect.stringContaining('Bearer'),
+          }),
         }),
       )
     })
@@ -784,7 +792,11 @@ describe('setupDevServer', () => {
         expect.objectContaining({
           method: 'GET',
           redirect: 'manual',
-          headers: {referer},
+          headers: expect.objectContaining({
+            referer,
+            'User-Agent': expect.stringContaining('Shopify CLI'),
+            Authorization: expect.stringContaining('Bearer'),
+          }),
         }),
       )
 
@@ -807,7 +819,11 @@ describe('setupDevServer', () => {
         expect.objectContaining({
           method: 'GET',
           redirect: 'manual',
-          headers: {referer},
+          headers: expect.objectContaining({
+            referer,
+            'User-Agent': expect.stringContaining('Shopify CLI'),
+            Authorization: expect.stringContaining('Bearer'),
+          }),
         }),
       )
 
@@ -853,7 +869,11 @@ describe('setupDevServer', () => {
         expect.objectContaining({
           method: 'GET',
           redirect: 'manual',
-          headers: {referer},
+          headers: expect.objectContaining({
+            referer,
+            'User-Agent': expect.stringContaining('Shopify CLI'),
+            Authorization: expect.stringContaining('Bearer'),
+          }),
         }),
       )