shopify-app-js 0.0.1-security → 1.0.1

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

@@ -0,0 +1,164 @@
+import {Session, ShopifyRestResources} from '@shopify/shopify-api';
+
+import {AdminApiContext, StorefrontContext} from '../../../clients';
+
+export type AuthenticateAppProxy = (
+  request: Request,
+) => Promise<AppProxyContext | AppProxyContextWithSession>;
+
+interface Options {
+  /**
+   * Whether to use the shop's theme layout around the Liquid content.
+   */
+  layout?: boolean;
+}
+
+export type LiquidResponseFunction = (
+  body: string,
+  initAndOptions?: number | (ResponseInit & Options),
+) => Response;
+
+interface Context {
+  /**
+   * A utility for creating a Liquid Response.
+   *
+   * @example
+   * <caption>Rendering liquid content.</caption>
+   * <description>Use the `liquid` helper to render a `Response` with Liquid content using the shop's theme.</description>
+   * ```ts
+   * // app/routes/**\/.ts
+   * import {authenticate} from "~/shopify.server"
+   *
+   * export async function loader({ request }) {
+   *   const {liquid} = await authenticate.public.appProxy(request);
+   *
+   *   return liquid("Hello {{shop.name}}");
+   * }
+   * ```
+   *
+   * @example
+   * <caption>Rendering liquid content without a layout.</caption>
+   * <description>Set the `layout` option to `false` to render the Liquid content without a theme.</description>
+   * ```ts
+   * // app/routes/**\/.ts
+   * import {authenticate} from "~/shopify.server"
+   *
+   * export async function loader({ request }) {
+   *   const {liquid} = await authenticate.public.appProxy(request);
+   *
+   *   return liquid(
+   *     "Hello {{shop.name}}",
+   *     { layout: false }
+   *   );
+   * }
+   * ```
+   */
+  liquid: LiquidResponseFunction;
+}
+
+export interface AppProxyContext extends Context {
+  /**
+   * No session is available for the shop that made this request.
+   *
+   * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
+   */
+  session: undefined;
+
+  /**
+   * No session is available for the shop that made this request.
+   * Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.
+   */
+  admin: undefined;
+
+  /**
+   * No session is available for the shop that made this request.
+   * Therefore no method for interacting with the Storefront API is available.
+   */
+  storefront: undefined;
+}
+
+export interface AppProxyContextWithSession<
+  Resources extends ShopifyRestResources = ShopifyRestResources,
+> extends Context {
+  /**
+   * The session for the shop that made the request.
+   *
+   * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
+   *
+   * Use this to get shop or user-specific data.
+   *
+   * @example
+   * <caption>Using the session object.</caption>
+   * <description>Get the session for the shop that initiated the request to the app proxy.</description>
+   * ```ts
+   * // app/routes/**\/.ts
+   * import { json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   * import { getMyAppModelData } from "~/db/model.server";
+   *
+   * export const loader = async ({ request }) => {
+   *   // Get the session for the shop that initiated the request to the app proxy.
+   *   const { session } = await authenticate.public.appProxy(request);
+   *
+   *   // Use the session data to make to queries to your database or additional requests.
+   *   return json(await getMyAppModelData({shop: session.shop));
+   * };
+   * ```
+   */
+  session: Session;
+
+  /**
+   * Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.
+   *
+   * @example
+   * <caption>Interacting with the Admin API.</caption>
+   * <description>Use the `admin` object to interact with the REST or GraphQL APIs.</description>
+   * ```ts
+   * // app/routes/**\/.ts
+   * import { json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export async function action({ request }: ActionFunctionArgs) {
+   *   const { admin } = await authenticate.public.appProxy(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 });
+   * }
+   * ```
+   */
+  admin: AdminApiContext<Resources>;
+
+  /**
+   * Method for interacting with the Shopify Storefront Graphql API for the store that made the request.
+   *
+   * @example
+   * <caption>Interacting with the Storefront API.</caption>
+   * <description>Use the `storefront` object to interact with the GraphQL API.</description>
+   * ```ts
+   * // app/routes/**\/.ts
+   * import { json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export async function action({ request }: ActionFunctionArgs) {
+   *   const { storefront } = await authenticate.public.appProxy(request);
+   *
+   *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);
+   *
+   *   return json(await response.json());
+   * }
+   * ```
+   */
+  storefront: StorefrontContext;
+}

package/packages/shopify-app-remix/src/server/authenticate/public/checkout/__tests__/authenticate.test.ts

@@ -0,0 +1,142 @@
+import {shopifyApp} from '../../../..';
+import {
+  APP_URL,
+  getJwt,
+  getThrownResponse,
+  testConfig,
+} from '../../../../__test-helpers';
+
+describe('JWT validation', () => {
+  it('returns token when successful', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const {token, payload} = getJwt();
+
+    // WHEN
+    const {sessionToken} = await shopify.authenticate.public.checkout(
+      new Request(APP_URL, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }),
+    );
+
+    // THEN
+    expect(sessionToken).toMatchObject(payload);
+  });
+
+  it('sets extra CORS allowed headers when requested from a different origin', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const {token} = getJwt();
+
+    // WHEN
+    const {cors} = await shopify.authenticate.public.checkout(
+      new Request(APP_URL, {
+        headers: {
+          Origin: 'https://some-other.origin',
+          Authorization: `Bearer ${token}`,
+        },
+      }),
+      {corsHeaders: ['Content-Type', 'X-Extra-Header']},
+    );
+    const response = cors(new Response());
+
+    // THEN
+    expect(response.headers.get('Access-Control-Allow-Headers')).toBe(
+      'Authorization, Content-Type, X-Extra-Header',
+    );
+  });
+
+  it('responds to preflight requests', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const {token, payload} = getJwt();
+
+    // WHEN
+    const response = await getThrownResponse(
+      async (request) => shopify.authenticate.public.checkout(request),
+      new Request(APP_URL, {
+        method: 'OPTIONS',
+        headers: {Authorization: `Bearer ${token}`},
+      }),
+    );
+
+    // THEN
+    expect(response.status).toBe(204);
+  });
+
+  it('responds to preflight requests from a different origin with extra CORS allowed headers', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+    const {token} = getJwt();
+    const request = new Request(APP_URL, {
+      method: 'OPTIONS',
+      headers: {
+        Origin: 'https://some-other.origin',
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // WHEN
+    const response = await getThrownResponse(
+      async (request) =>
+        shopify.authenticate.public.checkout(request, {
+          corsHeaders: ['X-Extra-Header'],
+        }),
+      request,
+    );
+
+    // THEN
+    expect(response.status).toBe(204);
+    expect(response.headers.get('Access-Control-Allow-Headers')).toBe(
+      'Authorization, Content-Type, X-Extra-Header',
+    );
+  });
+
+  it('throws a 401 on missing Authorization bearer token', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+
+    // WHEN
+    const response = await getThrownResponse(
+      async (request) => shopify.authenticate.public.checkout(request),
+      new Request(APP_URL),
+    );
+
+    // THEN
+    expect(response.status).toBe(401);
+  });
+
+  it('throws a 401 on invalid Authorization bearer token', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+
+    // WHEN
+    const response = await getThrownResponse(
+      async (request) => shopify.authenticate.public.checkout(request),
+      new Request(APP_URL, {
+        headers: {Authorization: `Bearer this_is_not_a_valid_token`},
+      }),
+    );
+
+    // THEN
+    expect(response.status).toBe(401);
+  });
+
+  it('rejects bot requests', async () => {
+    // GIVEN
+    const shopify = shopifyApp(testConfig());
+
+    // WHEN
+    const response = await getThrownResponse(
+      async (request) => shopify.authenticate.public.checkout(request),
+      new Request(APP_URL, {
+        headers: {'User-Agent': 'Googlebot'},
+      }),
+    );
+
+    // THEN
+    expect(response.status).toBe(410);
+  });
+});

package/packages/shopify-app-remix/src/server/authenticate/public/checkout/authenticate.public.checkout.doc.ts

@@ -0,0 +1,23 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Checkout',
+  description:
+    'The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.',
+  category: 'Authenticate',
+  subCategory: 'Public',
+  type: 'object',
+  isVisualComponent: false,
+  definitions: [
+    {
+      title: 'authenticate.public.checkout',
+      description:
+        'Authenticates requests coming from Shopify checkout extensions.',
+      type: 'AuthenticateCheckout',
+    },
+  ],
+  jsDocTypeExamples: ['CheckoutContext'],
+  related: [],
+};
+
+export default data;

package/packages/shopify-app-remix/src/server/authenticate/public/checkout/authenticate.ts

@@ -0,0 +1,45 @@
+import type {BasicParams} from '../../../types';
+import {
+  ensureCORSHeadersFactory,
+  getSessionTokenHeader,
+  respondToBotRequest,
+  respondToOptionsRequest,
+  validateSessionToken,
+} from '../../helpers';
+
+import type {AuthenticateCheckout, CheckoutContext} from './types';
+
+export function authenticateCheckoutFactory(
+  params: BasicParams,
+): AuthenticateCheckout {
+  return async function authenticateCheckout(
+    request,
+    options = {},
+  ): Promise<CheckoutContext> {
+    const {logger} = params;
+
+    const corsHeaders = options.corsHeaders ?? [];
+
+    respondToBotRequest(params, request);
+    respondToOptionsRequest(params, request, corsHeaders);
+
+    const sessionTokenHeader = getSessionTokenHeader(request);
+
+    logger.info('Authenticating checkout request');
+
+    if (!sessionTokenHeader) {
+      logger.debug('Request did not contain a session token');
+      throw new Response(undefined, {
+        status: 401,
+        statusText: 'Unauthorized',
+      });
+    }
+
+    return {
+      sessionToken: await validateSessionToken(params, sessionTokenHeader, {
+        checkAudience: false,
+      }),
+      cors: ensureCORSHeadersFactory(params, request, corsHeaders),
+    };
+  };
+}

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

@@ -0,0 +1,65 @@
+import {JwtPayload} from '@shopify/shopify-api';
+
+import {EnsureCORSFunction} from '../../helpers/ensure-cors-headers';
+
+export type AuthenticateCheckout = (
+  request: Request,
+  options?: AuthenticateCheckoutOptions,
+) => Promise<CheckoutContext>;
+
+export interface AuthenticateCheckoutOptions {
+  corsHeaders?: string[];
+}
+
+/**
+ * Authenticated Context for a checkout request
+ */
+export interface CheckoutContext {
+  /**
+   * The decoded and validated session token for the request
+   *
+   * Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).
+   *
+   * @example
+   * <caption>Using the decoded session token.</caption>
+   * <description>Get store-specific data using the `sessionToken` object.</description>
+   * ```ts
+   * // app/routes/public/my-route.ts
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   * import { getMyAppData } from "~/db/model.server";
+   *
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
+   *   const { sessionToken } = await authenticate.public.checkout(
+   *     request
+   *   );
+   *   return json(await getMyAppData({shop: sessionToken.dest}));
+   * };
+   * ```
+   */
+  sessionToken: JwtPayload;
+
+  /**
+   * A function that ensures the CORS headers are set correctly for the response.
+   *
+   * @example
+   * <caption>Setting CORS headers for a public request.</caption>
+   * <description>Use the `cors` helper to ensure your app can respond to checkout extension requests.</description>
+   * ```ts
+   * // app/routes/public/my-route.ts
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   * import { getMyAppData } from "~/db/model.server";
+   *
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
+   *   const { sessionToken, cors } = await authenticate.public.checkout(
+   *     request,
+   *     { corsHeaders: ["X-My-Custom-Header"] }
+   *   );
+   *   const data = await getMyAppData({shop: sessionToken.dest});
+   *   return cors(json(data));
+   * };
+   * ```
+   */
+  cors: EnsureCORSFunction;
+}

package/packages/shopify-app-remix/src/server/authenticate/public/factory.ts

@@ -0,0 +1,49 @@
+import {ShopifyRestResources} from '@shopify/shopify-api';
+
+import {BasicParams} from '../../types';
+import {FutureFlagOptions} from '../../future/flags';
+
+import {authenticateCheckoutFactory} from './checkout/authenticate';
+import {AuthenticateCheckoutOptions} from './checkout/types';
+import {authenticateAppProxyFactory} from './appProxy/authenticate';
+import {
+  AuthenticatePublic,
+  AuthenticatePublicLegacy,
+  AuthenticatePublicObject,
+} from './types';
+
+export function authenticatePublicFactory<
+  Future extends FutureFlagOptions,
+  Resources extends ShopifyRestResources,
+>(params: BasicParams): AuthenticatePublic<Future> {
+  const {logger, config} = params;
+
+  const authenticateCheckout = authenticateCheckoutFactory(params);
+  const authenticateAppProxy = authenticateAppProxyFactory<Resources>(params);
+
+  if (config.future.v3_authenticatePublic) {
+    const context: AuthenticatePublicObject = {
+      checkout: authenticateCheckout,
+      appProxy: authenticateAppProxy,
+    };
+
+    return context as AuthenticatePublic<Future>;
+  }
+
+  const authenticatePublic: AuthenticatePublicLegacy = (
+    request: Request,
+    options: AuthenticateCheckoutOptions,
+  ) => {
+    logger.deprecated(
+      '3.0.0',
+      'authenticate.public() will be deprecated in v3. Use authenticate.public.checkout() instead.',
+    );
+
+    return authenticateCheckout(request, options);
+  };
+
+  authenticatePublic.checkout = authenticateCheckout;
+  authenticatePublic.appProxy = authenticateAppProxy;
+
+  return authenticatePublic;
+}

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

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

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

@@ -0,0 +1,77 @@
+import {FeatureEnabled, FutureFlagOptions} from '../../future/flags';
+
+import type {AuthenticateCheckout} from './checkout/types';
+import type {AuthenticateAppProxy} from './appProxy/types';
+
+// Eventually this will be just the `{}` bit without `AuthenticateCheckout &`
+// We have this is because in v1 public WAS the only public authenticate method
+// But it became tightly coupled to authentictaing Checkout requests.
+// In V2 you will have only public.checkout() and public.appProxy(), no public()
+
+export interface AuthenticatePublicObject {
+  /**
+   * Authenticate a request from a checkout extension
+   *
+   * @example
+   * <caption>Authenticating a checkout extension request</caption>
+   * ```ts
+   * // /app/routes/public/widgets.ts
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
+   *   const { sessionToken, cors } = await authenticate.public.checkout(
+   *     request,
+   *   );
+   *   return cors(json({my: "data", shop: sessionToken.dest}));
+   * };
+   * ```
+   */
+  checkout: AuthenticateCheckout;
+
+  /**
+   * Authenticate a request from an app proxy
+   *
+   * @example
+   * <caption>Authenticating an app proxy request</caption>
+   * ```ts
+   * // /app/routes/public/widgets.ts
+   * import { LoaderFunctionArgs, json } from "@remix-run/node";
+   * import { authenticate } from "../shopify.server";
+   *
+   * export const loader = async ({ request }: LoaderFunctionArgs) => {
+   *   await authenticate.public.appProxy(
+   *     request,
+   *   );
+   *
+   *   const {searchParams} = new URL(request.url);
+   *   const shop = searchParams.get("shop");
+   *   const customerId = searchParams.get("logged_in_customer_id")
+   *
+   *   return json({my: "data", shop, customerId});
+   * };
+   * ```
+   */
+  appProxy: AuthenticateAppProxy;
+}
+
+export type AuthenticatePublic<Future extends FutureFlagOptions> =
+  FeatureEnabled<Future, 'v3_authenticatePublic'> extends true
+    ? AuthenticatePublicObject
+    : AuthenticatePublicLegacy;
+
+/**
+ * Methods for authenticating Requests from Shopify's public surfaces
+ *
+ * To maintain backwards compatability this is a function and an object.
+ *
+ * Do not use `authenticate.public()`. Use `authenticate.public.checkout()` instead.
+ * `authenticate.public()` will be removed in v2.
+ *
+ * Methods are:
+ *
+ * - `authenticate.public.checkout()` for authenticating requests from checkout extensions
+ * - `authenticate.public.appProxy()` for authenticating requests from app proxies
+ */
+export type AuthenticatePublicLegacy = AuthenticateCheckout &
+  AuthenticatePublicObject;