@shopify/shopify-app-remix 1.0.0-rc.1 → 1.0.0

package/README.md

@@ -38,13 +38,14 @@ Create `app/shopify.server.js`. We will use this file to configure our Shopify a
 import '@shopify/shopify-app-remix/adapters/node';
 import {LATEST_API_VERSION, shopifyApp} from '@shopify/shopify-app-remix';
 
-export const shopify = shopifyApp({
+const shopify = shopifyApp({
   apiKey: process.env.SHOPIFY_API_KEY!,
   apiSecretKey: process.env.SHOPIFY_API_SECRET!,
   appUrl: process.env.SHOPIFY_APP_URL!,
   scopes: ['read_products'],
   apiVersion: LATEST_API_VERSION,
 });
+export default shopify;
 ```
 
 A description of these config options:
@@ -72,7 +73,7 @@ SHOPIFY_APP_URL="[The tunnel URL you are using to run your app]"
 // app/shopify.server.js
 import {shopifyApp} from '@shopify/shopify-app-remix';
 
-export const shopify = shopifyApp({
+const shopify = shopifyApp({
   // ...
   authPathPrefix: '/auth',
 });
@@ -84,7 +85,7 @@ Now let's create the [splat route](https://remix.run/docs/en/main/guides/routing
 // app/routes/auth/$.tsx
 import {LoaderArgs} from '@remix-run/node';
 
-import {shopify} from '../../shopify.server';
+import shopify from '../../shopify.server';
 
 export async function loader({request}: LoaderArgs) {
   await shopify.authenticate.admin(request);
@@ -128,14 +129,14 @@ export default function App() {
 > **Note**: This version of App Bridge must be loaded from the CDN, in the document head.
 
 Now that your app is ready to respond to requests, it will also need to add the required `Content-Security-Policy` header directives, as per [our documentation](https://shopify.dev/docs/apps/store/security/iframe-protection).
-To do that, this package provides the `shopify.addResponseHeaders` method.
+To do that, this package provides the `shopify.addDocumentResponseHeaders` method.
 
 You should return these headers from any endpoint that renders HTML in your app.
 Most likely you'll want to add this to every HTML response by updating the entry.server.tsx file:
 
 ```ts
 // entry.server.tsx
-import {shopify} from '~/shopify.server';
+import shopify from './shopify.server';
 
 export default function handleRequest(
   request: Request,
@@ -148,7 +149,7 @@ export default function handleRequest(
   );
 
   responseHeaders.set('Content-Type', 'text/html');
-  shopify.addResponseHeaders(request, responseHeaders);
+  shopify.addDocumentResponseHeaders(request, responseHeaders);
 
   return new Response('<!DOCTYPE html>' + markup, {
     status: responseStatusCode,
@@ -184,7 +185,8 @@ To load your app within the Shopify Admin, you need to:
 
 ## Authenticating admin requests
 
-`shopifyApp` provides methods for authenticating admin requests. To authenticate admin requests you can call `shopify.authenticate.admin(request)` in a loader or an action:
+`shopifyApp` provides methods for authenticating admin requests.
+To authenticate admin requests you can call `shopify.authenticate.admin(request)` in a loader or an action:
 
 ```ts
 // app/routes/**/*.tsx
@@ -195,7 +197,44 @@ export const loader = async ({request}: LoaderArgs) => {
 };
 ```
 
-If there is a session for this user, this loader will return null. If there is no session for the user, the loader will throw the appropriate redirect Response.
+If there is a session for this user, this loader will return null.
+If there is no session for the user, the loader will throw the appropriate redirect Response.
+
+> **Note**: If you are authenticating more than one route, we recommend using [Remix layout routes](https://remix.run/docs/en/1.18.1/file-conventions/routes-files#layout-routes) to automatically authenticate them.
+
+## Authenticating cross-origin admin requests
+
+If your Remix server is authenticating an admin extension, a request from the extension to Remix will be cross-origin. Here `shopify.authenticate.admin` provides a cors function to add the required cross-origin headers:
+
+````ts
+export const loader = async ({request}: LoaderArgs) => {
+  const {cors} = await shopify.authenticate.admin(request);
+
+  return cors(json({"my": "data"}));
+};
+```
+
+### Headers
+
+It's important to note that the authentication functions in this package rely on throwing `Response` objects, which must be handled in your Remix routes using them.
+
+To do that, you can set up a [Remix `ErrorBoundary`](https://remix.run/docs/en/main/guides/errors).
+We provide some abstractions for the error and headers boundaries to make it easier for apps to set those up.
+
+```ts
+// app/routes/**/*.tsx
+import {boundary} from '@shopify/shopify-app-remix';
+
+export function ErrorBoundary() {
+  return boundary.error(useRouteError());
+}
+
+export const headers = (headersArgs) => {
+  return boundary.headers(headersArgs);
+};
+```
+
+> **Note**: You can also add this to a layout if you want to authenticate more than one route.
 
 ### Using the Shopify admin GraphQL API
 
@@ -205,7 +244,7 @@ E.g:
 
 ```ts
 // routes/**/*.tsx
-import {shopify} from '../shopify.server';
+import shopify from '../shopify.server';
 import {ActionArgs, json} from '@remix-run/node';
 
 export async function action({request}: ActionArgs) {
@@ -243,7 +282,7 @@ export async function action({request}: ActionArgs) {
 // app/routes/**/*.tsx
 import {restResources} from '@shopify/shopify-api/rest/admin/2023-04';
 
-export const shopify = shopifyApp({
+const shopify = shopifyApp({
   restResources,
   // ...etc
 });
@@ -274,7 +313,7 @@ To setup webhooks first we need to configure `shopifyApp` with 2 pieces:
 // shopify.server.js
 import {shopifyApp, DeliveryMethod} from '@shopify/shopify-app-remix';
 
-export const shopify = shopifyApp({
+const shopify = shopifyApp({
   apiKey: '1707326264fde5037c658n120626ce3f',
   // ...etc
   webhooks: {
@@ -299,7 +338,7 @@ To do this, your app must authenticate the request.
 // routes/webhooks.tsx
 import {ActionArgs} from '@remix-run/node';
 
-import {shopify} from '../shopify.server';
+import shopify from '../shopify.server';
 import db from '../db.server';
 
 export const action = async ({request}: ActionArgs) => {
@@ -325,24 +364,28 @@ export const action = async ({request}: ActionArgs) => {
 Your Remix app may need to authenticate requests coming from a public context. An example of this would be a checkout extension. Here is how:
 
 ```ts
-// e.g: routes/api/public/notes.tsx
-import {shopify} from '../shopify.server';
+// e.g: routes/api.public.notes.tsx
+import shopify from '../shopify.server';
 import {LoaderArgs, json} from '@remix-run/node';
 import {getNotes} from '~/models/notes';
 
 export const loader = async ({request}: LoaderArgs) => {
-  const {sessionToken} = await shopify.authenticate.public(request);
+  const {sessionToken, cors} = await shopify.authenticate.public(request);
 
   // E.g: Get notes using the shops admin domain
-  return json(await getNotes(sessionToken.iss));
+  return cors(json(await getNotes(sessionToken.iss)));
 };
 ```
 
 This can be useful if your app exposes checkout or theme extensions and those extensions need to access data from your app.
 
+**Note:** These requests will be cross-origin. So you must use the cross-origin helper returned from `shopify.authenticate.public`.
+
 ## Session Storage
 
-By default `shopifyApp` uses [@shopify/shopify-app-session-storage-sqlite](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-sqlite) to store sessions. You can change this by passing a different Session Adaptor to `shopifyApp`. To make this easy Shopify offer's [7 production ready session adaptors](https://github.com/Shopify/shopify-app-js/tree/release-candidate/packages)
+When calling `shopifyApp`, you must pass in a `sesionStorage` to store sessions.
+You can change this by passing a different Session Adaptor to `shopifyApp`.
+To make this easy Shopify offers [some production ready session adaptors](https://github.com/Shopify/shopify-app-js/tree/main/packages).
 
 In this example we'll swap the default session adaptor for [Prisma](https://www.prisma.io/).
 
@@ -363,4 +406,16 @@ const shopify = shopifyApp({
 });
 ```
 
-Note that this requires a `schema.prisma` file as defined in the README for [Prisma app session storage](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma)
+Note that this requires a `schema.prisma` file as defined in the README for [Prisma app session storage](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma).
+Remember to [set up your migrations](https://www.prisma.io/docs/concepts/components/prisma-migrate/get-started) after creating the schema file!
+
+## Gotchas / Troubleshooting
+
+### Navigating to other pages breaks
+
+In Remix apps, you can navigate to a different page either by adding an `<a>` tag, or using the `<Link>` component from `@remix-run/react`.
+
+In Shopify Remix apps you should avoid using `<a>`.
+Use `<Link> `from `@remix-run/react` instead.
+This ensures that your user remains authenticated.
+````

package/build/cjs/adapters/node/index.js

@@ -2,6 +2,10 @@
 
 var crypto = require('crypto');
 var runtime = require('@shopify/shopify-api/runtime');
+var appBridgeUrl = require('../../auth/helpers/app-bridge-url.js');
+require('@remix-run/server-runtime');
+require('isbot');
+require('@shopify/shopify-api');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -11,3 +15,9 @@ runtime.setCrypto(crypto__default["default"]);
 runtime.setAbstractRuntimeString(() => {
   return `Remix (Node)`;
 });
+
+/* eslint-disable no-process-env */
+if (process.env.APP_BRIDGE_URL) {
+  appBridgeUrl.setAppBridgeUrlOverride(process.env.APP_BRIDGE_URL);
+}
+/* eslint-enable no-process-env */

package/build/cjs/auth/admin/authenticate.js

@@ -7,14 +7,16 @@ var shopifyApi = require('@shopify/shopify-api');
 var cancel = require('../../billing/cancel.js');
 var require$1 = require('../../billing/require.js');
 var request = require('../../billing/request.js');
+var appBridgeUrl = require('../helpers/app-bridge-url.js');
 var addResponseHeaders = require('../helpers/add-response-headers.js');
 var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 var redirectWithExitiframe = require('../helpers/redirect-with-exitiframe.js');
 var beginAuth = require('../helpers/begin-auth.js');
+var ensureCorsHeaders = require('../helpers/ensure-cors-headers.js');
 var validateSessionToken = require('../helpers/validate-session-token.js');
 var getSessionTokenHeader = require('../helpers/get-session-token-header.js');
 var rejectBotRequest = require('../helpers/reject-bot-request.js');
-var _const = require('../const.js');
+var respondToOptionsRequest = require('../helpers/respond-to-options-request.js');
 var graphqlClient = require('./graphql-client.js');
 var restClient = require('./rest-client.js');
 
@@ -43,20 +45,30 @@ class AuthStrategy {
       logger,
       config
     }, request);
-    this.respondToOptionsRequest(request);
+    respondToOptionsRequest.respondToOptionsRequest({
+      api,
+      logger,
+      config
+    }, request);
+    const cors = ensureCorsHeaders.ensureCORSHeadersFactory({
+      api,
+      logger,
+      config
+    }, request);
     let sessionContext;
     try {
       sessionContext = await this.authenticateAndGetSessionContext(request);
     } catch (errorOrResponse) {
       if (errorOrResponse instanceof Response) {
-        this.ensureResponseHeaders(request, errorOrResponse);
+        cors(errorOrResponse);
       }
       throw errorOrResponse;
     }
     const context = {
       admin: this.createAdminApiContext(request, sessionContext.session),
       billing: this.createBillingContext(request, sessionContext.session),
-      session: sessionContext.session
+      session: sessionContext.session,
+      cors
     };
     if (config.isEmbeddedApp) {
       return {
@@ -82,13 +94,13 @@ class AuthStrategy {
     logger.info('Authenticating admin request');
     if (isPatchSessionToken) {
       logger.debug('Rendering bounce page');
-      throw this.renderAppBridge();
+      throw this.renderAppBridge(request);
     } else if (isExitIframe) {
       const destination = url.searchParams.get('exitIframe');
       logger.debug('Rendering exit iframe page', {
         destination
       });
-      throw this.renderAppBridge(destination);
+      throw this.renderAppBridge(request, destination);
     } else if (isAuthCallbackRequest) {
       throw await this.handleAuthCallbackRequest(request);
     } else if (isAuthRequest) {
@@ -477,7 +489,7 @@ class AuthStrategy {
     // https://github.com/orgs/Shopify/projects/6899/views/1?pane=issue&itemId=28376650
     throw serverRuntime.redirect(`${config.auth.patchSessionTokenPath}?${params.toString()}`);
   }
-  renderAppBridge(redirectTo) {
+  renderAppBridge(request, redirectTo) {
     const {
       config
     } = this;
@@ -486,34 +498,17 @@ class AuthStrategy {
       const redirectUrl = decodeURIComponent(redirectTo.startsWith('/') ? `${config.appUrl}${redirectTo}` : redirectTo);
       redirectToScript = `<script>window.open("${redirectUrl}", "_top")</script>`;
     }
+    const responseHeaders = new Headers({
+      'content-type': 'text/html;charset=utf-8'
+    });
+    addResponseHeaders.addDocumentResponseHeaders(responseHeaders, config.isEmbeddedApp, new URL(request.url).searchParams.get('shop'));
     throw new Response(`
-        <script data-api-key="${config.apiKey}" src="${_const.APP_BRIDGE_URL}"></script>
+        <script data-api-key="${config.apiKey}" src="${appBridgeUrl.appBridgeUrl()}"></script>
         ${redirectToScript}
       `, {
-      headers: {
-        'content-type': 'text/html;charset=utf-8'
-      }
+      headers: responseHeaders
     });
   }
-  respondToOptionsRequest(request) {
-    if (request.method === 'OPTIONS') {
-      throw new Response(null, {
-        status: 204,
-        headers: {
-          'Access-Control-Max-Age': '7200'
-        }
-      });
-    }
-  }
-  ensureResponseHeaders(request, response) {
-    const {
-      config
-    } = this;
-    const shop = new URL(request.url).searchParams.get('shop');
-
-    // We want the headers to be present on all responses:
-    addResponseHeaders.addResponseHeaders(response.headers, config.isEmbeddedApp, shop);
-  }
   overriddenRestClient(request, session) {
     const {
       api,

package/build/cjs/auth/const.js

@@ -4,14 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const APP_BRIDGE_URL = 'https://cdn.shopify.com/shopifycloud/app-bridge.js';
 const REAUTH_URL_HEADER = 'X-Shopify-API-Request-Failure-Reauthorize-Url';
-const APP_BRIDGE_HEADERS = {
-  'Access-Control-Allow-Origin': '*',
-  'Access-Control-Allow-Headers': 'Authorization',
-  'Access-Control-Expose-Headers': REAUTH_URL_HEADER
-};
-const DEFAULT_CSP_VALUE = `frame-ancestors https://*.myshopify.com https://admin.shopify.com;`;
 
-exports.APP_BRIDGE_HEADERS = APP_BRIDGE_HEADERS;
 exports.APP_BRIDGE_URL = APP_BRIDGE_URL;
-exports.DEFAULT_CSP_VALUE = DEFAULT_CSP_VALUE;
 exports.REAUTH_URL_HEADER = REAUTH_URL_HEADER;

package/build/cjs/auth/helpers/add-response-headers.js

@@ -2,10 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _const = require('../const.js');
-
-const ORIGINAL_HEADERS = Symbol.for('originalHeaders');
-function addResponseHeadersFactory(params) {
+function addDocumentResponseHeadersFactory(params) {
   const {
     api,
     config
@@ -15,55 +12,21 @@ function addResponseHeadersFactory(params) {
       searchParams
     } = new URL(request.url);
     const shop = api.utils.sanitizeShop(searchParams.get('shop'));
-    addResponseHeaders(headers, config.isEmbeddedApp, shop);
+    addDocumentResponseHeaders(headers, config.isEmbeddedApp, shop);
   };
 }
-function addResponseHeaders(headers, isEmbeddedApp, shop) {
-  if (isEmbeddedApp && shop) {
-    // Set or update the CSP with the shop subdomain instead of a wildcard:
-    let csp = headers.get('Content-Security-Policy') || _const.DEFAULT_CSP_VALUE;
-    if (shop) csp = csp.replace('*.myshopify.com', shop);
-    headers.set('Content-Security-Policy', csp);
+function addDocumentResponseHeaders(headers, isEmbeddedApp, shop) {
+  if (shop) {
+    headers.set('Link', '<https://cdn.shopify.com/shopifycloud/app-bridge.js>; rel="preload"; as="script";');
   }
-}
-function installGlobalResponseHeaders(isEmbeddedApp) {
-  const headersDescriptor = Object.getOwnPropertyDescriptor(Response.prototype, ORIGINAL_HEADERS) || Object.getOwnPropertyDescriptor(Response.prototype, 'headers');
-
-  // Store the original Response.prototype.headers descriptor so we can use it when live-reloading the server:
-  Object.defineProperty(Response.prototype, ORIGINAL_HEADERS, headersDescriptor);
-
-  // Overwrite the Response.prototype.headers getter with one that injects our global headers:
-  Object.defineProperty(Response.prototype, 'headers', {
-    ...headersDescriptor,
-    get() {
-      // Note: this is not an empty Headers, it will contain any headers passed to new Response():
-      const headers = headersDescriptor.get.call(this);
-      try {
-        // Inject CORS headers required by both Embedded Apps and UI Extensions:
-        if (isEmbeddedApp) {
-          for (const key in _const.APP_BRIDGE_HEADERS) {
-            if (!headers.get(key)) {
-              const value = _const.APP_BRIDGE_HEADERS[key];
-              headers.set(key, value);
-            }
-          }
-        }
-
-        // Apply a default CSP unless a more specific one (no wildcard) is present:
-        if (!headers.get('Content-Security-Policy')) {
-          headers.set('Content-Security-Policy', isEmbeddedApp ? _const.DEFAULT_CSP_VALUE : `frame-ancestors 'none';`);
-        }
-        if (!headers.get('Link')) {
-          headers.set('Link', `<${_const.APP_BRIDGE_URL}>; rel="preload"`);
-        }
-      } catch (err) {
-        // Do nothing, this is not a standard Response object.
-      }
-      return headers;
+  if (isEmbeddedApp) {
+    if (shop) {
+      headers.set('Content-Security-Policy', `frame-ancestors https://${shop} https://admin.shopify.com;`);
     }
-  });
+  } else {
+    headers.set('Content-Security-Policy', `frame-ancestors 'none';`);
+  }
 }
 
-exports.addResponseHeaders = addResponseHeaders;
-exports.addResponseHeadersFactory = addResponseHeadersFactory;
-exports.installGlobalResponseHeaders = installGlobalResponseHeaders;
+exports.addDocumentResponseHeaders = addDocumentResponseHeaders;
+exports.addDocumentResponseHeadersFactory = addDocumentResponseHeadersFactory;

package/build/cjs/auth/helpers/app-bridge-url.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _const = require('../const.js');
+
+let appBridgeUrlOverride;
+function setAppBridgeUrlOverride(url) {
+  appBridgeUrlOverride = url;
+}
+function appBridgeUrl() {
+  return appBridgeUrlOverride || _const.APP_BRIDGE_URL;
+}
+
+exports.appBridgeUrl = appBridgeUrl;
+exports.setAppBridgeUrlOverride = setAppBridgeUrlOverride;

package/build/cjs/auth/helpers/ensure-cors-headers.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _const = require('../const.js');
+
+function ensureCORSHeadersFactory(params, request) {
+  const {
+    logger,
+    config
+  } = params;
+  return function ensureCORSHeaders(response) {
+    const origin = request.headers.get('Origin');
+    if (origin && origin !== config.appUrl) {
+      logger.debug('Request comes from a different origin, adding CORS headers');
+      response.headers.set('Access-Control-Allow-Origin', '*');
+      response.headers.set('Access-Control-Allow-Headers', 'Authorization');
+      response.headers.set('Access-Control-Expose-Headers', _const.REAUTH_URL_HEADER);
+    }
+    return response;
+  };
+}
+
+exports.ensureCORSHeadersFactory = ensureCORSHeadersFactory;

package/build/cjs/auth/helpers/redirect-with-app-bridge-headers.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _const = require('../const.js');
-var addResponseHeaders = require('./add-response-headers.js');
 
 function redirectWithAppBridgeHeaders(params, shop) {
   const {
@@ -13,18 +12,13 @@ function redirectWithAppBridgeHeaders(params, shop) {
   throw new Response(undefined, {
     status: 401,
     statusText: 'Unauthorized',
-    headers: getAppBridgeHeaders(params, redirectUri, shop)
+    headers: getAppBridgeHeaders(redirectUri)
   });
 }
-function getAppBridgeHeaders(params, url, shop) {
-  const {
-    config
-  } = params;
-  const headers = new Headers({
+function getAppBridgeHeaders(url) {
+  return new Headers({
     [_const.REAUTH_URL_HEADER]: url
   });
-  addResponseHeaders.addResponseHeaders(headers, config.isEmbeddedApp, shop);
-  return headers;
 }
 
 exports.getAppBridgeHeaders = getAppBridgeHeaders;

package/build/cjs/auth/helpers/respond-to-options-request.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ensureCorsHeaders = require('./ensure-cors-headers.js');
+
+function respondToOptionsRequest(params, request) {
+  if (request.method === 'OPTIONS') {
+    const ensureCORSHeaders = ensureCorsHeaders.ensureCORSHeadersFactory(params, request);
+    throw ensureCORSHeaders(new Response(null, {
+      status: 204,
+      headers: {
+        'Access-Control-Max-Age': '7200'
+      }
+    }));
+  }
+}
+
+exports.respondToOptionsRequest = respondToOptionsRequest;

package/build/cjs/auth/login/login.js

@@ -12,12 +12,6 @@ function loginFactory(params) {
     logger
   } = params;
   return async function login(request) {
-    if (!config.canUseLoginForm) {
-      logger.debug('Login endpoint not available for Shopify Admin custom apps');
-      throw new Response(undefined, {
-        status: 404
-      });
-    }
     const url = new URL(request.url);
     const shopParam = url.searchParams.get('shop');
     if (request.method === 'GET' && !shopParam) {

package/build/cjs/auth/public/authenticate.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('@remix-run/server-runtime');
+var ensureCorsHeaders = require('../helpers/ensure-cors-headers.js');
 var validateSessionToken = require('../helpers/validate-session-token.js');
 var getSessionTokenHeader = require('../helpers/get-session-token-header.js');
 var rejectBotRequest = require('../helpers/reject-bot-request.js');
+var respondToOptionsRequest = require('../helpers/respond-to-options-request.js');
 require('@shopify/shopify-api');
 
 function authenticatePublicFactory(params) {
@@ -14,6 +16,7 @@ function authenticatePublicFactory(params) {
       logger
     } = params;
     rejectBotRequest.rejectBotRequest(params, request);
+    respondToOptionsRequest.respondToOptionsRequest(params, request);
     const sessionTokenHeader = getSessionTokenHeader.getSessionTokenHeader(request);
     logger.info('Authenticating public request');
     if (!sessionTokenHeader) {
@@ -24,7 +27,8 @@ function authenticatePublicFactory(params) {
       });
     }
     return {
-      sessionToken: await validateSessionToken.validateSessionToken(params, sessionTokenHeader)
+      sessionToken: await validateSessionToken.validateSessionToken(params, sessionTokenHeader),
+      cors: ensureCorsHeaders.ensureCORSHeadersFactory(params, request)
     };
   };
 }

package/build/cjs/billing/request.js

@@ -65,7 +65,7 @@ function redirectOutOfApp(params, request, url, shop) {
     throw new Response(undefined, {
       status: 401,
       statusText: 'Unauthorized',
-      headers: redirectWithAppBridgeHeaders.getAppBridgeHeaders(params, url, shop)
+      headers: redirectWithAppBridgeHeaders.getAppBridgeHeaders(url)
     });
   } else if (isEmbeddedRequest) {
     const params = new URLSearchParams({

package/build/cjs/boundary/error.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function errorBoundary(error) {
+  if (error.constructor.name === 'ErrorResponse') {
+    return 'Handling response';
+  }
+  throw error;
+}
+
+exports.errorBoundary = errorBoundary;

package/build/cjs/boundary/headers.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function headersBoundary(headers) {
+  const {
+    parentHeaders,
+    loaderHeaders,
+    actionHeaders,
+    errorHeaders
+  } = headers;
+  if (errorHeaders && Array.from(errorHeaders.entries()).length > 0) {
+    return errorHeaders;
+  }
+  return new Headers([...(parentHeaders ? Array.from(parentHeaders.entries()) : []), ...(loaderHeaders ? Array.from(loaderHeaders.entries()) : []), ...(actionHeaders ? Array.from(actionHeaders.entries()) : [])]);
+}
+
+exports.headersBoundary = headersBoundary;