shopify-app-js 0.0.1-security → 1.0.1

package/packages/shopify-app-remix/src/server/authenticate/webhooks/types.ts

@@ -0,0 +1,246 @@
+import {Session, Shopify, ShopifyRestResources} from '@shopify/shopify-api';
+
+import type {JSONValue} from '../../types';
+import type {AdminApiContext} from '../../clients';
+import type {FeatureEnabled, FutureFlagOptions} from '../../future/flags';
+
+export interface RegisterWebhooksOptions {
+  /**
+   * The Shopify session used to register webhooks using the Admin API.
+   */
+  session: Session;
+}
+
+interface Context<Topics = string | number | symbol> {
+  /**
+   * The API version used for the webhook.
+   *
+   * @example
+   * <caption>Webhook API version.</caption>
+   * <description>Get the API version used for webhook request.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { apiVersion } = await authenticate.webhook(request);
+   *   return new Response();
+   * };
+   * ```
+   */
+  apiVersion: string;
+  /**
+   * The shop where the webhook was triggered.
+   *
+   * @example
+   * <caption>Webhook shop.</caption>
+   * <description>Get the shop that triggered a webhook.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { shop } = await authenticate.webhook(request);
+   *   return new Response();
+   * };
+   * ```
+   */
+  shop: string;
+  /**
+   * The topic of the webhook.
+   *
+   * @example
+   * <caption>Webhook topic.</caption>
+   * <description>Get the event topic for the webhook.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { topic } = await authenticate.webhook(request);
+   *
+   *   switch (topic) {
+   *     case "APP_UNINSTALLED":
+   *       // Do something when the app is uninstalled.
+   *       break;
+   *   }
+   *
+   *   return new Response();
+   * };
+   * ```
+   */
+  topic: Topics;
+  /**
+   * A unique ID for the webhook. Useful to keep track of which events your app has already processed.
+   *
+   * @example
+   * <caption>Webhook ID.</caption>
+   * <description>Get the webhook ID.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { webhookId } = await authenticate.webhook(request);
+   *   return new Response();
+   * };
+   * ```
+   */
+  webhookId: string;
+  /**
+   * The payload from the webhook request.
+   *
+   * @example
+   * <caption>Webhook payload.</caption>
+   * <description>Get the request's POST payload.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { payload } = await authenticate.webhook(request);
+   *   return new Response();
+   * };
+   * ```
+   */
+  payload: JSONValue;
+  /**
+   * The sub-topic of the webhook. This is only available for certain webhooks.
+   *
+   * @example
+   * <caption>Webhook sub-topic.</caption>
+   * <description>Get the webhook sub-topic.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunction } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const action: ActionFunction = async ({ request }) => {
+   *   const { subTopic } = await authenticate.webhook(request);
+   *   return new Response();
+   * };
+   * ```
+   *
+   */
+  subTopic?: string;
+}
+
+export interface WebhookContextWithoutSession<Topics = string | number | symbol>
+  extends Context<Topics> {
+  session: undefined;
+  admin: undefined;
+}
+
+export interface LegacyWebhookAdminApiContext<
+  Resources extends ShopifyRestResources,
+> {
+  /** A REST client. */
+  rest: InstanceType<Shopify['clients']['Rest']> & Resources;
+  /** A GraphQL client. */
+  graphql: InstanceType<Shopify['clients']['Graphql']>;
+}
+
+export type WebhookAdminContext<
+  Future extends FutureFlagOptions,
+  Resources extends ShopifyRestResources,
+> =
+  FeatureEnabled<Future, 'v3_webhookAdminContext'> extends true
+    ? AdminApiContext<Resources>
+    : LegacyWebhookAdminApiContext<Resources>;
+
+export interface WebhookContextWithSession<
+  Future extends FutureFlagOptions,
+  Resources extends ShopifyRestResources,
+  Topics = string | number | symbol,
+> extends Context<Topics> {
+  /**
+   * A session with an offline token for the shop.
+   *
+   * Returned only if there is a session for the shop.
+   */
+  session: Session;
+
+  /**
+   * An admin context for the webhook.
+   *
+   * Returned only if there is a session for the shop.
+   *
+   * @example
+   * <caption>[V3] Webhook admin context.</caption>
+   * <description>With the `v3_webhookAdminContext` future flag enabled, use the `admin` object in the context to interact with the Admin API.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { ActionFunctionArgs } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export async function action({ request }: ActionFunctionArgs) {
+   *   const { admin } = await authenticate.webhook(request);
+   *
+   *   const response = await admin?.graphql(
+   *     `#graphql
+   *     mutation populateProduct($input: ProductInput!) {
+   *       productCreate(input: $input) {
+   *         product {
+   *           id
+   *         }
+   *       }
+   *     }`,
+   *     { variables: { input: { title: "Product Name" } } }
+   *   );
+   *
+   *   const productData = await response.json();
+   *   return json({ data: productData.data });
+   * }
+   * ```
+   *
+   * @example
+   * <caption>Webhook admin context.</caption>
+   * <description>Use the `admin` object in the context to interact with the Admin API. This format will be removed in V3 of the package.</description>
+   * ```ts
+   * // /app/routes/webhooks.tsx
+   * import { json, ActionFunctionArgs } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export async function action({ request }: ActionFunctionArgs) {
+   *   const { admin } = await authenticate.webhook(request);
+   *
+   *   const response = await admin?.graphql.query<any>({
+   *     data: {
+   *       query: `#graphql
+   *         mutation populateProduct($input: ProductInput!) {
+   *           productCreate(input: $input) {
+   *             product {
+   *               id
+   *             }
+   *           }
+   *         }`,
+   *       variables: { input: { title: "Product Name" } },
+   *     },
+   *   });
+   *
+   *   const productData = response?.body.data;
+   *   return json({ data: productData.data });
+   * }
+   * ```
+   */
+  admin: WebhookAdminContext<Future, Resources>;
+}
+
+export type WebhookContext<
+  Future extends FutureFlagOptions,
+  Resources extends ShopifyRestResources,
+  Topics = string | number | symbol,
+> =
+  | WebhookContextWithoutSession<Topics>
+  | WebhookContextWithSession<Future, Resources, Topics>;
+
+export type AuthenticateWebhook<
+  Future extends FutureFlagOptions,
+  Resources extends ShopifyRestResources,
+  Topics = string | number | symbol,
+> = (request: Request) => Promise<WebhookContext<Future, Resources, Topics>>;

package/packages/shopify-app-remix/src/server/boundary/__tests__/error.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {boundary} from '../../index';
+
+describe('Error boundary', () => {
+  it('returns a string when handling an ErrorResponse', () => {
+    // WHEN
+    const result = boundary.error(new ErrorResponse());
+
+    // THEN
+    expect(result).toEqual(
+      <div dangerouslySetInnerHTML={{__html: 'Handling response'}} />,
+    );
+  });
+
+  it('returns a string when handling an ErrorResponseImpl', () => {
+    // WHEN
+    const result = boundary.error(new ErrorResponseImpl());
+
+    // THEN
+    expect(result).toEqual(
+      <div dangerouslySetInnerHTML={{__html: 'Handling response'}} />,
+    );
+  });
+
+  it('throws an error when handling an unknown error', () => {
+    // WHEN
+    const result = () => boundary.error(new Error());
+
+    // THEN
+    expect(result).toThrowError();
+  });
+});
+
+class ErrorResponse extends Error {}
+class ErrorResponseImpl extends Error {}

package/packages/shopify-app-remix/src/server/boundary/__tests__/headers.test.ts

@@ -0,0 +1,66 @@
+import {boundary} from '../index';
+import {shopifyApp} from '../../index';
+import {testConfig} from '../../__test-helpers';
+
+describe('Headers boundary', () => {
+  it('returns only error headers if error headers are present', () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const headers = {
+      parentHeaders: new Headers([['parent', 'header']]),
+      loaderHeaders: new Headers([['loader', 'header']]),
+      actionHeaders: new Headers([['action', 'header']]),
+      errorHeaders: new Headers([['error', 'header']]),
+    };
+
+    // WHEN
+    const result = boundary.headers(headers);
+
+    // THEN
+    expect(result.get('parent')).toBeNull();
+    expect(result.get('loader')).toBeNull();
+    expect(result.get('action')).toBeNull();
+    expect(result.get('error')).toEqual('header');
+  });
+
+  it('merges parent, loader & action headers if no error headers are present', () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const headers = {
+      parentHeaders: new Headers([
+        ['parent', 'header'],
+        ['common', 'parent'],
+      ]),
+      loaderHeaders: new Headers([
+        ['loader', 'header'],
+        ['common', 'loader'],
+      ]),
+      actionHeaders: new Headers([
+        ['action', 'header'],
+        ['common', 'action'],
+      ]),
+      errorHeaders: new Headers(),
+    };
+
+    // WHEN
+    const result = boundary.headers(headers);
+
+    // THEN
+    expect(result.get('parent')).toEqual('header');
+    expect(result.get('loader')).toEqual('header');
+    expect(result.get('action')).toEqual('header');
+    expect(result.get('common')).toEqual('parent, loader, action');
+  });
+
+  it('returns an empty headers object if no headers are present', () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const headers = {};
+
+    // WHEN
+    const result = boundary.headers(headers as any);
+
+    // THEN
+    expect(result.entries()).toEqual(new Headers().entries());
+  });
+});

package/packages/shopify-app-remix/src/server/boundary/error.tsx

@@ -0,0 +1,14 @@
+export function errorBoundary(error: any) {
+  if (
+    error.constructor.name === 'ErrorResponse' ||
+    error.constructor.name === 'ErrorResponseImpl'
+  ) {
+    return (
+      <div
+        dangerouslySetInnerHTML={{__html: error.data || 'Handling response'}}
+      />
+    );
+  }
+
+  throw error;
+}

package/packages/shopify-app-remix/src/server/boundary/headers.ts

@@ -0,0 +1,15 @@
+import {HeadersArgs} from '@remix-run/server-runtime';
+
+export function headersBoundary(headers: HeadersArgs): 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()) : []),
+  ]);
+}

package/packages/shopify-app-remix/src/server/boundary/index.ts

@@ -0,0 +1,39 @@
+import {headersBoundary} from './headers';
+import {errorBoundary} from './error';
+
+/**
+ * A collection of functions that handle the necessary code for error boundaries in routes using authenticate.admin.
+ */
+export const boundary = {
+  /**
+   * A function that handles errors or thrown responses.
+   *
+   * @example
+   * <caption>Catching errors in a route</caption>
+   * ```ts
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
+   *
+   * export function ErrorBoundary() {
+   *   return boundary.error(useRouteError());
+   * }
+   * ```
+   */
+  error: errorBoundary,
+
+  /**
+   * A function that sets the appropriate document repsonse headers.
+   *
+   * @example
+   * <caption>Catching errors in a route</caption>
+   * ```ts
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
+   *
+   * export const headers = (headersArgs) => {
+   *   return boundary.headers(headersArgs);
+   * };
+   * ```
+   */
+  headers: headersBoundary,
+};

package/packages/shopify-app-remix/src/server/boundary/types.ts

@@ -0,0 +1,4 @@
+import {HeadersArgs} from '@remix-run/server-runtime';
+
+export type ErrorBoundary = (error: unknown) => string | never;
+export type HeadersBoundary = (headers: HeadersArgs) => Headers;

package/packages/shopify-app-remix/src/server/clients/admin/authenticate.admin.api.doc.ts

@@ -0,0 +1,34 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Admin API',
+  description:
+    'Contains objects used to interact with the Admin API.' +
+    '\n\nThis object is returned as part of different contexts, such as [`admin`](/docs/api/shopify-app-remix/authenticate/admin), [`unauthenticated.admin`](/docs/api/shopify-app-remix/unauthenticated/unauthenticated-admin), and [`webhook`](/docs/api/shopify-app-remix/authenticate/webhook).',
+  category: 'APIs',
+  type: 'object',
+  isVisualComponent: false,
+  definitions: [
+    {
+      title: 'admin',
+      description:
+        'Provides utilities that apps can use to make requests to the Admin API.',
+      type: 'AdminApiContext',
+    },
+  ],
+  jsDocTypeExamples: ['AdminApiContext'],
+  related: [
+    {
+      name: 'Authenticated context',
+      subtitle: 'Authenticate requests from Shopify Admin.',
+      url: '/docs/api/shopify-app-remix/authenticate/admin',
+    },
+    {
+      name: 'Unauthenticated context',
+      subtitle: 'Interact with the Admin API on non-Shopify requests.',
+      url: '/docs/api/shopify-app-remix/unauthenticated/unauthenticated-admin',
+    },
+  ],
+};
+
+export default data;

package/packages/shopify-app-remix/src/server/clients/admin/factory.ts

@@ -0,0 +1,30 @@
+import {Session, ShopifyRestResources} from '@shopify/shopify-api';
+
+import {BasicParams} from '../../types';
+
+import {graphqlClientFactory} from './graphql';
+import {restClientFactory} from './rest';
+import type {AdminApiContext} from './types';
+
+interface RestClientOptions {
+  params: BasicParams;
+  session: Session;
+  handleClientError?: (error: any) => Promise<void>;
+}
+
+export function adminClientFactory<
+  Resources extends ShopifyRestResources = ShopifyRestResources,
+>({
+  params,
+  handleClientError,
+  session,
+}: RestClientOptions): AdminApiContext<Resources> {
+  return {
+    rest: restClientFactory<Resources>({
+      params,
+      session,
+      handleClientError,
+    }),
+    graphql: graphqlClientFactory({params, session, handleClientError}),
+  };
+}

package/packages/shopify-app-remix/src/server/clients/admin/graphql.ts

@@ -0,0 +1,39 @@
+import {AdminOperations} from '@shopify/admin-api-client';
+
+import {GraphQLClient} from '../types';
+
+import {AdminClientOptions} from './types';
+
+// eslint-disable-next-line no-warning-comments
+// TODO: This is actually just a call through to the Shopify API client, but with a different API. We should eventually
+// move this over to the library layer. While doing that, we should also allow the apiVersion to be passed into the REST
+// client request calls.
+export function graphqlClientFactory({
+  params,
+  handleClientError,
+  session,
+}: AdminClientOptions): GraphQLClient<AdminOperations> {
+  return async function query(operation, options) {
+    const client = new params.api.clients.Graphql({
+      session,
+      apiVersion: options?.apiVersion,
+    });
+
+    try {
+      // We convert the incoming response to a Response object to bring this client closer to the Remix client.
+      const apiResponse = await client.request(operation, {
+        variables: options?.variables,
+        retries: options?.tries ? options.tries - 1 : 0,
+        headers: options?.headers,
+      });
+
+      return new Response(JSON.stringify(apiResponse));
+    } catch (error) {
+      if (handleClientError) {
+        throw await handleClientError({error, params, session});
+      }
+
+      throw error;
+    }
+  };
+}

package/packages/shopify-app-remix/src/server/clients/admin/index.ts

@@ -0,0 +1,2 @@
+export * from './factory';
+export * from './types';

package/packages/shopify-app-remix/src/server/clients/admin/rest.ts

@@ -0,0 +1,157 @@
+import {
+  DeleteRequestParams,
+  GetRequestParams,
+  PostRequestParams,
+  PutRequestParams,
+  RequestParams,
+  Session,
+  Shopify,
+  ShopifyRestResources,
+} from '@shopify/shopify-api';
+
+import type {AdminClientOptions} from './types';
+
+export type RestClientWithResources<Resources extends ShopifyRestResources> =
+  RemixRestClient & {resources: Resources};
+
+export function restClientFactory<
+  Resources extends ShopifyRestResources = ShopifyRestResources,
+>({
+  params,
+  handleClientError,
+  session,
+}: AdminClientOptions): RestClientWithResources<Resources> {
+  const {api} = params;
+  const client = new RemixRestClient({
+    params,
+    handleClientError,
+    session,
+  }) as RestClientWithResources<Resources>;
+
+  if (api.rest) {
+    client.resources = {} as Resources;
+
+    const RestResourceClient = restResourceClientFactory({
+      params,
+      handleClientError,
+      session,
+    });
+
+    Object.entries(api.rest).forEach(([name, resource]) => {
+      class RemixResource extends resource {
+        public static Client = RestResourceClient;
+      }
+
+      Reflect.defineProperty(RemixResource, 'name', {
+        value: name,
+      });
+
+      Reflect.set(client.resources, name, RemixResource);
+    });
+  }
+
+  return client;
+}
+
+class RemixRestClient {
+  public session: Session;
+  private params: AdminClientOptions['params'];
+  private handleClientError: AdminClientOptions['handleClientError'];
+
+  constructor({params, session, handleClientError}: AdminClientOptions) {
+    this.params = params;
+    this.handleClientError = handleClientError;
+    this.session = session;
+  }
+
+  /**
+   * Performs a GET request on the given path.
+   */
+  public async get(params: GetRequestParams) {
+    return this.makeRequest({
+      method: 'GET' as RequestParams['method'],
+      ...params,
+    });
+  }
+
+  /**
+   * Performs a POST request on the given path.
+   */
+  public async post(params: PostRequestParams) {
+    return this.makeRequest({
+      method: 'POST' as RequestParams['method'],
+      ...params,
+    });
+  }
+
+  /**
+   * Performs a PUT request on the given path.
+   */
+  public async put(params: PutRequestParams) {
+    return this.makeRequest({
+      method: 'PUT' as RequestParams['method'],
+      ...params,
+    });
+  }
+
+  /**
+   * Performs a DELETE request on the given path.
+   */
+  public async delete(params: DeleteRequestParams) {
+    return this.makeRequest({
+      method: 'DELETE' as RequestParams['method'],
+      ...params,
+    });
+  }
+
+  protected async makeRequest(params: RequestParams): Promise<Response> {
+    const originalClient = new this.params.api.clients.Rest({
+      session: this.session,
+    });
+    const originalRequest = Reflect.get(originalClient, 'request');
+
+    try {
+      const apiResponse = await originalRequest.call(originalClient, params);
+
+      // We use a separate client for REST requests and REST resources because we want to override the API library
+      // client class to return a Response object instead.
+      return new Response(JSON.stringify(apiResponse.body), {
+        headers: apiResponse.headers,
+      });
+    } catch (error) {
+      if (this.handleClientError) {
+        throw await this.handleClientError({
+          error,
+          session: this.session,
+          params: this.params,
+        });
+      } else throw new Error(error);
+    }
+  }
+}
+
+function restResourceClientFactory({
+  params,
+  handleClientError,
+  session,
+}: AdminClientOptions): Shopify['clients']['Rest'] {
+  const {api} = params;
+
+  const ApiClient = api.clients.Rest;
+  return class RestResourceClient extends ApiClient {
+    protected async request(requestParams: RequestParams) {
+      const originalClient = new api.clients.Rest({session});
+      const originalRequest = Reflect.get(originalClient, 'request');
+
+      try {
+        // We just call through to the API library client, and handle the error response here, so that data parsing
+        // behaves the same way.
+        return await originalRequest.call(originalClient, requestParams);
+      } catch (error) {
+        if (handleClientError) {
+          throw await handleClientError({error, params, session});
+        } else throw new Error(error);
+      }
+    }
+  };
+}