shopify-app-js 0.0.1-security → 1.0.1

package/packages/shopify-app-remix/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@shopify/shopify-app-remix",
+  "version": "2.6.1",
+  "description": "Shopify Remix - to simplify the building of Shopify Apps with Remix",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shopify/shopify-app-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Shopify/shopify-app-js/issues"
+  },
+  "homepage": "https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix",
+  "author": "Shopify Inc.",
+  "license": "MIT",
+  "types": "./build/ts/server/index.d.ts",
+  "main": "./build/cjs/server/index.js",
+  "exports": {
+    ".": {
+      "types": "./build/ts/server/index.d.ts",
+      "default": "./build/cjs/server/index.js"
+    },
+    "./adapters/*": "./build/cjs/server/adapters/*/index.js",
+    "./server": {
+      "types": "./build/ts/server/index.d.ts",
+      "default": "./build/cjs/server/index.js"
+    },
+    "./server/adapters/*": "./build/cjs/server/adapters/*/index.js",
+    "./react": {
+      "types": "./build/ts/react/index.d.ts",
+      "default": "./build/cjs/react/index.js"
+    }
+  },
+  "scripts": {
+    "build-docs": "sh docs/build-docs.sh",
+    "validate-docs": "sh ./docs/build-docs.sh isTest && yarn compare-docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "shopify",
+    "javascript",
+    "typescript",
+    "remix",
+    "app",
+    "graphql",
+    "rest",
+    "webhook",
+    "Admin API",
+    "Storefront API"
+  ],
+  "devDependencies": {
+    "@remix-run/react": "^2.6.0",
+    "@shopify/generate-docs": "^0.13.1",
+    "@shopify/polaris": "^12.18.0",
+    "@shopify/react-testing": "^5.1.3",
+    "@shopify/shopify-app-session-storage-memory": "^3.0.1",
+    "@types/jsonwebtoken": "^9.0.5",
+    "@types/react": "^18.2.18",
+    "@types/semver": "^7.5.7",
+    "jest-fetch-mock": "^3.0.3",
+    "jsonwebtoken": "^9.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.6.0",
+    "@remix-run/server-runtime": "^2.5.1",
+    "@shopify/admin-api-client": "^0.2.3",
+    "@shopify/shopify-api": "^9.3.2",
+    "@shopify/shopify-app-session-storage": "^2.1.1",
+    "@shopify/storefront-api-client": "^0.2.3",
+    "isbot": "^3.7.1",
+    "semver": "^7.6.0"
+  },
+  "peerDependencies": {
+    "@remix-run/react": "*",
+    "@shopify/polaris": "*",
+    "react": "*"
+  },
+  "peerDependenciesMeta": {
+    "@shopify/polaris": {
+      "optional": true
+    }
+  },
+  "files": [
+    "build/*",
+    "!build/**/__tests__",
+    "!bundle/*",
+    "!tsconfig.tsbuildinfo",
+    "!node_modules"
+  ]
+}

package/packages/shopify-app-remix/src/react/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['../server/*'],
+            message:
+              'Importing from src/react in src/server is not allowed as they must be kept separate, because it breaks Remix bundling.',
+          },
+        ],
+      },
+    ],
+  },
+};

package/packages/shopify-app-remix/src/react/__tests__/test-helper.ts

@@ -0,0 +1,22 @@
+import {destroyAll} from '@shopify/react-testing';
+import '@shopify/react-testing/matchers';
+
+afterEach(() => {
+  destroyAll();
+});
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});

package/packages/shopify-app-remix/src/react/components/AppProvider/AppProvider.doc.ts

@@ -0,0 +1,34 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'AppProvider',
+  descriptionType: 'AppProviderGeneratedType',
+  description: '',
+  category: 'Entrypoints',
+  type: 'component',
+  isVisualComponent: false,
+  definitions: [
+    {
+      title: 'AppProviderProps',
+      description: 'Props for the `AppProvider` component.',
+      type: 'AppProviderProps',
+    },
+  ],
+  jsDocTypeExamples: ['AppProviderGeneratedType'],
+  related: [
+    {
+      name: 'App bridge',
+      subtitle: 'Learn more about App Bridge.',
+      url: '/docs/api/app-bridge-library',
+      type: 'shopify',
+    },
+    {
+      name: 'Polaris',
+      subtitle: 'Learn more about Polaris.',
+      url: '/docs/apps/tools/polaris',
+      type: 'shopify',
+    },
+  ],
+};
+
+export default data;

package/packages/shopify-app-remix/src/react/components/AppProvider/AppProvider.tsx

@@ -0,0 +1,121 @@
+import {
+  AppProvider as PolarisAppProvider,
+  AppProviderProps as PolarisAppProviderProps,
+} from '@shopify/polaris';
+import englishI18n from '@shopify/polaris/locales/en.json';
+
+import {APP_BRIDGE_URL} from '../../const';
+import {RemixPolarisLink} from '../RemixPolarisLink';
+
+export interface AppProviderProps
+  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {
+  /**
+   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.
+   *
+   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment
+   * variable, then you need to pass it from the loader to the component.
+   */
+  apiKey: string;
+  /**
+   * Whether the app is loaded inside the Shopify Admin. Default is `true`.
+   *
+   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
+   */
+  isEmbeddedApp?: boolean;
+  /**
+   * The internationalization (i18n) configuration for your Polaris provider.
+   *
+   * {@link https://polaris.shopify.com/components/utilities/app-provider}
+   */
+  i18n?: PolarisAppProviderProps['i18n'];
+  /**
+   * Used internally by Shopify. You don't need to set this.
+   * @private
+   */
+  __APP_BRIDGE_URL?: string;
+}
+
+/**
+ * Sets up the Polaris `AppProvider` and injects the App Bridge script.
+ *
+ * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
+ * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
+ * component.
+ *
+ * {@link https://polaris.shopify.com/components/utilities/app-provider}
+ * {@link https://shopify.dev/tools/app-bridge}
+ *
+ * @example
+ * <caption>Set up AppProvider.</caption>
+ * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({ apiKey: process.env.SHOPIFY_API_KEY });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider isEmbeddedApp apiKey={apiKey}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * <caption>Localize Polaris components.</caption>
+ * <description>Pass in a different locale for Polaris to translate its components.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({
+ *     apiKey: process.env.SHOPIFY_API_KEY,
+ *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
+ *   });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey, polarisTranslations } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ */
+export function AppProvider(props: AppProviderProps) {
+  const {
+    children,
+    apiKey,
+    i18n,
+    isEmbeddedApp = true,
+    __APP_BRIDGE_URL = APP_BRIDGE_URL,
+    ...polarisProps
+  } = props;
+
+  return (
+    <>
+      {isEmbeddedApp && <script src={__APP_BRIDGE_URL} data-api-key={apiKey} />}
+      <PolarisAppProvider
+        {...polarisProps}
+        linkComponent={RemixPolarisLink}
+        i18n={i18n || englishI18n}
+      >
+        {children}
+      </PolarisAppProvider>
+    </>
+  );
+}

package/packages/shopify-app-remix/src/react/components/AppProvider/__tests__/AppProvider.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {mount} from '@shopify/react-testing';
+import {AppProvider as PolarisAppProvider} from '@shopify/polaris';
+
+import '../../../__tests__/test-helper';
+
+import {AppProvider} from '../AppProvider';
+import {RemixPolarisLink} from '../../RemixPolarisLink';
+
+describe('<AppProvider />', () => {
+  const defaultProps = {
+    apiKey: '123abc',
+    isEmbeddedApp: true,
+  };
+
+  it('renders the script tag if the embedded app prop is passed in', () => {
+    // WHEN
+    const component = mount(
+      <AppProvider {...defaultProps}>Hello world</AppProvider>,
+    );
+
+    // THEN
+    expect(component).toContainReactComponent('script', {
+      src: 'https://cdn.shopify.com/shopifycloud/app-bridge.js',
+    });
+    expect(component).toContainReactHtml('Hello world');
+  });
+
+  it('does not render the script tag if the embedded app prop is not passed in', () => {
+    // WHEN
+    const component = mount(
+      <AppProvider {...defaultProps} isEmbeddedApp={false}>
+        Hello world
+      </AppProvider>,
+    );
+
+    // THEN
+    expect(component).not.toContainReactComponent('script');
+  });
+
+  it('allows overriding the app bridge url', () => {
+    // WHEN
+    const component = mount(
+      <AppProvider {...defaultProps} __APP_BRIDGE_URL="override">
+        Hello world
+      </AppProvider>,
+    );
+
+    // THEN
+    expect(component).toContainReactComponent('script', {src: 'override'});
+  });
+
+  it('passes i18n and linkComponent props to the Polaris provider', () => {
+    // WHEN
+    const dummyI18n = {hello: 'world'};
+    const component = mount(
+      <AppProvider {...defaultProps} i18n={dummyI18n}>
+        Hello world
+      </AppProvider>,
+    );
+
+    // THEN
+    expect(component).toContainReactComponent(PolarisAppProvider, {
+      i18n: dummyI18n,
+      linkComponent: RemixPolarisLink,
+    });
+  });
+});

package/packages/shopify-app-remix/src/react/components/AppProvider/index.ts

@@ -0,0 +1 @@
+export * from './AppProvider';

package/packages/shopify-app-remix/src/react/components/RemixPolarisLink.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Link} from '@remix-run/react';
+// Polaris' LinkProps doesn't match this type, so we need to import it directly
+import type {
+  LinkLikeComponent,
+  LinkLikeComponentProps,
+} from '@shopify/polaris/build/ts/src/utilities/link';
+
+export const RemixPolarisLink = React.forwardRef<
+  HTMLAnchorElement,
+  LinkLikeComponentProps
+>((props, ref) => (
+  <Link {...props} to={props.url ?? props.to} ref={ref} />
+)) as LinkLikeComponent;

package/packages/shopify-app-remix/src/react/components/index.ts

@@ -0,0 +1 @@
+export * from './AppProvider';

package/packages/shopify-app-remix/src/react/const.ts

@@ -0,0 +1,2 @@
+export const APP_BRIDGE_URL =
+  'https://cdn.shopify.com/shopifycloud/app-bridge.js';

package/packages/shopify-app-remix/src/react/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/packages/shopify-app-remix/src/server/.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['../react/*'],
+            message:
+              'Importing from src/react in src/server is not allowed as they must be kept separate, because it breaks Remix bundling.',
+          },
+        ],
+      },
+    ],
+  },
+};

package/packages/shopify-app-remix/src/server/__test-helpers/__tests__/request-mock.test.ts

@@ -0,0 +1,171 @@
+import {
+  mockExternalRequest,
+  mockExternalRequests,
+  skipMockChecks,
+  validateMocks,
+} from '../request-mock';
+
+describe('Request mocks', () => {
+  beforeEach(() => {
+    skipMockChecks(true);
+  });
+
+  it('can intercept fetch requests', async () => {
+    // GIVEN
+    await mockExternalRequest({
+      request: new Request('https://my-example.shopify.io', {
+        headers: {bar: 'baz'},
+      }),
+      response: new Response(JSON.stringify({responseFoo: 'responseBar'}), {
+        status: 200,
+      }),
+    });
+
+    // WHEN
+    await fetch('https://my-example.shopify.io', {
+      method: 'GET',
+      headers: {bar: 'baz'},
+    });
+
+    // THEN
+    await validateMocks();
+  });
+
+  it('can intercept multiple requests', async () => {
+    // GIVEN
+    await mockExternalRequests(
+      {
+        request: new Request('https://my-example.shopify.io'),
+        response: new Response(),
+      },
+      {
+        request: new Request('https://my-example.shopify.io', {
+          method: 'POST',
+        }),
+        response: new Response(),
+      },
+    );
+
+    // WHEN
+    await fetch('https://my-example.shopify.io', {method: 'GET'});
+    await fetch('https://my-example.shopify.io', {method: 'POST'});
+
+    // THEN
+    await validateMocks();
+  });
+
+  it('detects failures after the first request', async () => {
+    // GIVEN
+    await mockExternalRequests(
+      {
+        request: new Request('https://my-example.shopify.io'),
+        response: new Response(),
+      },
+      {
+        request: new Request('https://my-example.shopify.io', {
+          method: 'POST',
+        }),
+        response: new Response(),
+      },
+    );
+
+    // WHEN
+    await fetch('https://my-example.shopify.io', {method: 'GET'});
+    await fetch('https://my-example.shopify.io', {method: 'GET'});
+
+    // THEN
+    await expect(validateMocks()).rejects.toThrow(
+      'GET request made to https://my-example.shopify.io does not match expectation',
+    );
+  });
+
+  it('matches responses automatically when no request mock is configured', async () => {
+    // GIVEN
+    await mockExternalRequest({
+      response: new Response(JSON.stringify({responseFoo: 'responseBar'})),
+    });
+
+    // WHEN
+    await fetch('https://my-example.shopify.io', {
+      method: 'POST',
+      body: JSON.stringify({foo: 'bar'}),
+      headers: {bar: 'baz'},
+    });
+
+    // THEN
+    await validateMocks();
+  });
+
+  it('can mock non-200 responses', async () => {
+    // GIVEN
+    await mockExternalRequest({
+      request: new Request('https://my-example.shopify.io'),
+      response: new Response(undefined, {status: 500}),
+    });
+
+    // WHEN
+    await fetch('https://my-example.shopify.io');
+
+    // THEN
+    await validateMocks();
+  });
+
+  it.each(['url', 'method', 'body', 'headers'])(
+    'can match requests without %s',
+    async (field) => {
+      // GIVEN
+      const request = new Request('https://my-example.shopify.io', {
+        method: 'POST',
+        body: JSON.stringify({foo: 'bar'}),
+        headers: {bar: 'baz'},
+      });
+
+      delete (request as any)[field];
+      await mockExternalRequest({
+        request,
+        response: new Response(JSON.stringify({responseFoo: 'responseBar'})),
+      });
+
+      // WHEN
+      await fetch('https://my-example.shopify.io', {
+        method: 'POST',
+        body: JSON.stringify({foo: 'bar'}),
+        headers: {bar: 'baz'},
+      });
+
+      // THEN
+      await validateMocks();
+    },
+  );
+
+  it("throws if an expected request isn't made", async () => {
+    // GIVEN
+    await mockExternalRequest({
+      request: new Request('https://my-example.shopify.io', {
+        method: 'POST',
+        body: JSON.stringify({foo: 'bar'}),
+        headers: {bar: 'baz'},
+      }),
+      response: new Response(JSON.stringify({responseFoo: 'responseBar'})),
+    });
+
+    // THEN
+    await expect(validateMocks()).rejects.toThrow(
+      'Expected 1 request(s) to be made but they were not',
+    );
+  });
+
+  it('throws if an unexpected request is made', async () => {
+    // WHEN
+    await fetch('https://my-example.shopify.io', {
+      method: 'POST',
+      body: JSON.stringify({foo: 'bar'}),
+      headers: {bar: 'baz'},
+    });
+
+    // THEN
+    await expect(validateMocks()).rejects.toThrow(
+      '1 unexpected request(s) were made',
+    );
+  });
+});

package/packages/shopify-app-remix/src/server/__test-helpers/const.ts

@@ -0,0 +1,11 @@
+import {LATEST_API_VERSION} from '@shopify/shopify-api';
+
+export const API_SECRET_KEY = 'testApiSecretKey';
+export const API_KEY = 'testApiKey';
+export const APP_URL = 'https://my-test-app.myshopify.io';
+export const SHOPIFY_HOST = 'totally-real-host.myshopify.io';
+export const BASE64_HOST = Buffer.from(SHOPIFY_HOST).toString('base64');
+export const TEST_SHOP_NAME = 'test-shop';
+export const TEST_SHOP = `${TEST_SHOP_NAME}.myshopify.com`;
+export const GRAPHQL_URL = `https://${TEST_SHOP}/admin/api/${LATEST_API_VERSION}/graphql.json`;
+export const USER_ID = 12345;