@shopify/shopify-app-remix 4.1.1 → 4.2.0

package/src/server/__test-helpers/expect-admin-api-client.ts

@@ -0,0 +1,51 @@
+import {ApiVersion, Session} from '@shopify/shopify-api';
+
+import type {AdminApiContext} from '../clients';
+
+import {TEST_SHOP} from './const';
+import {mockExternalRequest} from './request-mock';
+
+export function expectAdminApiClient(
+  factory: () => Promise<{
+    admin: AdminApiContext;
+    expectedSession: Session;
+    actualSession: Session;
+  }>,
+) {
+  describe('Graphql client', () => {
+    it('can perform requests', async () => {
+      // GIVEN
+      const {admin, actualSession} = await factory();
+      await mockExternalRequest({
+        request: new Request(
+          `https://${TEST_SHOP}/admin/api/${ApiVersion.July25}/graphql.json`,
+          {
+            method: 'POST',
+            headers: {'X-Shopify-Access-Token': actualSession.accessToken!},
+          },
+        ),
+        response: new Response(
+          JSON.stringify({data: {shop: {name: 'Test shop'}}}),
+        ),
+      });
+
+      // WHEN
+      const response = await admin.graphql('{ shop { name } }');
+
+      // THEN
+      expect(response.status).toEqual(200);
+      expect(await response.json()).toEqual({
+        data: {shop: {name: 'Test shop'}},
+        headers: {'Content-Type': ['application/json']},
+      });
+    });
+
+    it('returns a session object as part of the context', async () => {
+      // GIVEN
+      const {expectedSession, actualSession} = await factory();
+
+      // THEN
+      expect(expectedSession).toEqual(actualSession);
+    });
+  });
+}

package/src/server/__test-helpers/expect-begin-auth-redirect.ts

@@ -0,0 +1,22 @@
+import {TEST_SHOP} from './const';
+import {testConfig} from './test-config';
+
+export function expectBeginAuthRedirect(
+  config: ReturnType<typeof testConfig>,
+  response: Response,
+) {
+  expect(response.status).toEqual(302);
+
+  const {hostname, pathname, searchParams} = new URL(
+    response.headers.get('location')!,
+  );
+
+  expect(hostname).toBe(TEST_SHOP);
+  expect(pathname).toBe('/admin/oauth/authorize');
+  expect(searchParams.get('client_id')).toBe(config.apiKey);
+  expect(searchParams.get('scope')).toBe(config.scopes!.toString());
+  expect(searchParams.get('redirect_uri')).toBe(
+    `${config.appUrl}/auth/callback`,
+  );
+  expect(searchParams.get('state')).toStrictEqual(expect.any(String));
+}

package/src/server/__test-helpers/expect-document-request-headers.ts

@@ -0,0 +1,25 @@
+import {APP_BRIDGE_URL} from '../authenticate/const';
+
+import {TEST_SHOP} from './const';
+
+export function expectDocumentRequestHeaders(
+  response: Response,
+  isEmbeddedApp = true,
+) {
+  const headers = response.headers;
+
+  if (isEmbeddedApp) {
+    expect(headers.get('Content-Security-Policy')).toEqual(
+      `frame-ancestors https://${encodeURIComponent(
+        TEST_SHOP,
+      )} https://admin.shopify.com https://*.spin.dev https://admin.myshopify.io https://admin.shop.dev;`,
+    );
+    expect(headers.get('Link')).toEqual(
+      `<${APP_BRIDGE_URL}>; rel="preload"; as="script";`,
+    );
+  } else {
+    expect(headers.get('Content-Security-Policy')).toEqual(
+      `frame-ancestors 'none';`,
+    );
+  }
+}

package/src/server/__test-helpers/expect-exit-iframe.ts

@@ -0,0 +1,37 @@
+import {APP_URL, BASE64_HOST, TEST_SHOP} from './const';
+
+interface ExpectExitIframeRedirectOptions {
+  shop?: string;
+  host?: string | null;
+  destination?: string;
+  addHostToExitIframePath?: boolean;
+}
+
+export function expectExitIframeRedirect(
+  response: Response,
+  {
+    shop = TEST_SHOP,
+    host = BASE64_HOST,
+    destination = `/auth?shop=${shop}`,
+    addHostToExitIframePath = true,
+  }: ExpectExitIframeRedirectOptions = {},
+) {
+  expect(response.status).toBe(302);
+
+  const {pathname, searchParams} = new URL(
+    response.headers.get('location')!,
+    APP_URL,
+  );
+  expect(pathname).toBe('/auth/exit-iframe');
+
+  expect(searchParams.get('shop')).toBe(shop);
+
+  let expectedDestination = destination;
+  if (host) {
+    expect(searchParams.get('host')).toBe(host);
+    if (addHostToExitIframePath) {
+      expectedDestination = destination.concat(`&host=${host}`);
+    }
+  }
+  expect(searchParams.get('exitIframe')).toBe(expectedDestination);
+}

package/src/server/__test-helpers/expect-login-redirect.ts

@@ -0,0 +1,8 @@
+import {APP_URL} from './const';
+
+export function expectLoginRedirect(response: Response) {
+  expect(response.status).toBe(302);
+
+  const {pathname} = new URL(response.headers.get('location')!, APP_URL);
+  expect(pathname).toBe('/auth/login');
+}

package/src/server/__test-helpers/expect-storefront-api-client.ts

@@ -0,0 +1,49 @@
+import {ApiVersion, Session} from '@shopify/shopify-api';
+
+import type {StorefrontContext} from '../clients';
+
+import {mockExternalRequest} from './request-mock';
+import {TEST_SHOP} from './const';
+
+export function expectStorefrontApiClient(
+  factory: () => Promise<{
+    storefront: StorefrontContext;
+    expectedSession: Session;
+    actualSession: Session;
+  }>,
+) {
+  it('Storefront client can perform GraphQL Requests', async () => {
+    // GIVEN
+    const {storefront, actualSession} = await factory();
+    const apiResponse = {data: {blogs: {nodes: [{id: 1}]}}, headers: {}};
+    await mockExternalRequest({
+      request: new Request(
+        `https://${TEST_SHOP}/api/${ApiVersion.July25}/graphql.json`,
+        {
+          method: 'POST',
+          headers: {
+            'Shopify-Storefront-Private-Token': actualSession.accessToken!,
+          },
+        },
+      ),
+      response: new Response(JSON.stringify(apiResponse)),
+    });
+
+    // WHEN
+    const response = await storefront.graphql(
+      'blogs(first: 1) { nodes { id }}',
+    );
+
+    // THEN
+    expect(response.status).toEqual(200);
+    expect(await response.json()).toEqual(apiResponse);
+  });
+
+  it('Storefront client uses the correct session', async () => {
+    // GIVEN
+    const {expectedSession, actualSession} = await factory();
+
+    // THEN
+    expect(expectedSession).toEqual(actualSession);
+  });
+}

package/src/server/__test-helpers/expect-token-refresh.ts

@@ -0,0 +1,188 @@
+import {Session} from '@shopify/shopify-api';
+import {SessionStorage} from '@shopify/shopify-app-session-storage';
+import {MemorySessionStorage} from '@shopify/shopify-app-session-storage-memory';
+
+import {TestOverridesArg} from '../test-helpers/test-config';
+import {AppDistribution} from '../types';
+
+import {API_KEY, API_SECRET_KEY, TEST_SHOP} from './const';
+import {mockExternalRequest} from './request-mock';
+import {
+  setUpValidSession,
+  setupValidCustomAppSession,
+} from './setup-valid-session';
+
+export function expectTokenRefresh(
+  runAuth: (
+    sessionStorage: SessionStorage,
+    session: Session,
+    configOverrides?: TestOverridesArg,
+  ) => Promise<Session>,
+) {
+  describe('token refresh for expired offline sessions', () => {
+    it('does not refresh token when session is not expired', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const oneHourFromNow = new Date(Date.now() + 1000 * 3600);
+      const session = await setUpValidSession(sessionStorage, {
+        expires: oneHourFromNow,
+        refreshToken: 'test-refresh-token',
+      });
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session);
+
+      // THEN
+      expect(actualSession.accessToken).toBe(session.accessToken);
+      expect(actualSession.expires?.getTime()).toBe(oneHourFromNow.getTime());
+    });
+
+    it('refreshes token when session is expired and feature flag is enabled', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const oneSecondAgo = new Date(Date.now() - 1000);
+      const thirtyDaysFromNow = new Date(Date.now() + 1000 * 3600 * 24 * 30);
+
+      const session = await setUpValidSession(sessionStorage, {
+        expires: oneSecondAgo,
+        refreshToken: 'test-refresh-token',
+        refreshTokenExpires: thirtyDaysFromNow,
+      });
+
+      const refreshResponse = {
+        access_token: 'new-access-token',
+        scope: 'testScope',
+        expires_in: 3600,
+        refresh_token: 'new-refresh-token',
+        refresh_token_expires_in: 2592000,
+      };
+
+      await mockExternalRequest({
+        request: new Request(`https://${TEST_SHOP}/admin/oauth/access_token`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({
+            client_id: API_KEY,
+            client_secret: API_SECRET_KEY,
+            refresh_token: 'test-refresh-token',
+            grant_type: 'refresh_token',
+          }),
+        }),
+        response: new Response(JSON.stringify(refreshResponse), {
+          status: 200,
+          headers: {'Content-Type': 'application/json'},
+        }),
+      });
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session);
+
+      // THEN
+      expect(actualSession.accessToken).toBe('new-access-token');
+      expect(actualSession.refreshToken).toBe('new-refresh-token');
+      expect(actualSession.id).toBe(session.id);
+      expect(actualSession.shop).toBe(TEST_SHOP);
+      expect(actualSession.expires?.getTime()).toBeGreaterThan(Date.now());
+    });
+
+    it('refreshes token when session is within milliseconds of expiry', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const halfSecondFromNow = new Date(Date.now() + 500);
+      const thirtyDaysFromNow = new Date(Date.now() + 1000 * 3600 * 24 * 30);
+
+      const session = await setUpValidSession(sessionStorage, {
+        expires: halfSecondFromNow,
+        refreshToken: 'test-refresh-token',
+        refreshTokenExpires: thirtyDaysFromNow,
+      });
+
+      const refreshResponse = {
+        access_token: 'new-access-token-2',
+        scope: 'testScope',
+        expires_in: 3600,
+        refresh_token: 'new-refresh-token-2',
+        refresh_token_expires_in: 2592000,
+      };
+
+      await mockExternalRequest({
+        request: new Request(`https://${TEST_SHOP}/admin/oauth/access_token`, {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({
+            client_id: API_KEY,
+            client_secret: API_SECRET_KEY,
+            refresh_token: 'test-refresh-token',
+            grant_type: 'refresh_token',
+          }),
+        }),
+        response: new Response(JSON.stringify(refreshResponse), {
+          status: 200,
+          headers: {'Content-Type': 'application/json'},
+        }),
+      });
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session);
+
+      // THEN
+      expect(actualSession.accessToken).toBe('new-access-token-2');
+      expect(actualSession.refreshToken).toBe('new-refresh-token-2');
+    });
+
+    it('does not refresh token when session has no expiry', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const session = await setUpValidSession(sessionStorage, {
+        expires: undefined,
+        refreshToken: 'test-refresh-token',
+      });
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session);
+
+      // THEN
+      expect(actualSession.accessToken).toBe(session.accessToken);
+      expect(actualSession.expires).toBeUndefined();
+    });
+
+    it('does not refresh token when feature flag is disabled even if session is expired', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const oneSecondAgo = new Date(Date.now() - 1000);
+      const session = await setUpValidSession(sessionStorage, {
+        expires: oneSecondAgo,
+        refreshToken: 'test-refresh-token',
+      });
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session, {
+        future: {
+          expiringOfflineAccessTokens: false,
+        },
+      });
+
+      // THEN
+      expect(actualSession.accessToken).toBe(session.accessToken);
+      expect(actualSession.expires?.getTime()).toBe(oneSecondAgo.getTime());
+      expect(actualSession.refreshToken).toBe('test-refresh-token');
+    });
+
+    it('does not refresh token when distribution is ShopifyAdmin', async () => {
+      // GIVEN
+      const sessionStorage = new MemorySessionStorage();
+      const session = setupValidCustomAppSession(TEST_SHOP);
+
+      // WHEN
+      const actualSession = await runAuth(sessionStorage, session, {
+        distribution: AppDistribution.ShopifyAdmin,
+      });
+
+      // THEN
+      expect(actualSession).toBeDefined();
+      expect(actualSession.shop).toBe(TEST_SHOP);
+      expect(actualSession.expires).toBeUndefined();
+      expect(actualSession.refreshToken).toBeUndefined();
+    });
+  });
+}

package/src/server/__test-helpers/get-hmac.ts

@@ -0,0 +1,7 @@
+import {getHmac as getHmacImport} from '@shopify/shopify-api/test-helpers';
+
+import {API_SECRET_KEY} from './const';
+
+export function getHmac(body: string): string {
+  return getHmacImport(body, API_SECRET_KEY);
+}

package/src/server/__test-helpers/get-jwt.ts

@@ -0,0 +1,10 @@
+import {JwtPayload} from '@shopify/shopify-api';
+import {getJwt as getJwtImport} from '@shopify/shopify-api/test-helpers';
+
+import {API_KEY, API_SECRET_KEY, TEST_SHOP_NAME} from './const';
+
+export async function getJwt(
+  overrides: Partial<JwtPayload> = {},
+): Promise<ReturnType<typeof getJwtImport>> {
+  return getJwtImport(TEST_SHOP_NAME, API_KEY, API_SECRET_KEY, overrides);
+}

package/src/server/__test-helpers/get-thrown-error.ts

@@ -0,0 +1,19 @@
+import {ShopifyError} from '@shopify/shopify-api';
+
+export async function getThrownError(
+  callback: (request: Request) => Promise<any>,
+  request: Request,
+): Promise<ShopifyError> {
+  try {
+    await callback(request);
+  } catch (error) {
+    if (!(error instanceof ShopifyError)) {
+      throw new Error(
+        `${request.method} request to ${request.url} did not throw a ShopifyError.`,
+      );
+    }
+    return error;
+  }
+
+  throw new Error(`${request.method} request to ${request.url} did not throw`);
+}

package/src/server/__test-helpers/get-thrown-response.ts

@@ -0,0 +1,17 @@
+export async function getThrownResponse(
+  callback: (request: Request) => Promise<any>,
+  request: Request,
+): Promise<Response> {
+  try {
+    await callback(request);
+  } catch (response) {
+    if (!(response instanceof Response)) {
+      throw new Error(
+        `${request.method} request to ${request.url} threw an error instead of a response: ${response}`,
+      );
+    }
+    return response;
+  }
+
+  throw new Error(`${request.method} request to ${request.url} did not throw`);
+}

package/src/server/__test-helpers/index.ts

@@ -0,0 +1,21 @@
+export * from './const';
+export * from './expect-admin-api-client';
+export * from './expect-begin-auth-redirect';
+export * from './expect-document-request-headers';
+export * from './expect-exit-iframe';
+export * from './expect-login-redirect';
+export * from './expect-storefront-api-client';
+export * from './get-hmac';
+export * from './get-jwt';
+export * from './get-thrown-response';
+export * from './request-mock';
+export * from './setup-valid-session';
+export * from './setup-valid-request';
+export * from './sign-request-cookie';
+export * from './test-config';
+export * from './get-thrown-error';
+export * from './setup-embedded-flow';
+export * from './setup-fetch-flow';
+export * from './mock-graphql-request';
+export * from './setup-non-embedded-flow';
+export * from './expect-token-refresh';

package/src/server/__test-helpers/mock-graphql-request.ts

@@ -0,0 +1,60 @@
+import {ApiVersion} from '@shopify/shopify-api';
+
+import {TEST_SHOP} from './const';
+import {mockExternalRequest, mockExternalRequests} from './request-mock';
+
+export interface MockGraphqlRequestArg {
+  status?: number;
+  responseContent?: string;
+  body?: string;
+}
+
+export function mockGraphqlRequest(
+  apiVersion = ApiVersion.July25,
+  shopUrl = TEST_SHOP,
+) {
+  return async function ({
+    status = 401,
+    responseContent,
+  }: MockGraphqlRequestArg = {}) {
+    const requestMock = new Request(
+      `https://${shopUrl}/admin/api/${apiVersion}/graphql.json`,
+      {method: 'POST'},
+    );
+
+    await mockExternalRequest({
+      request: requestMock,
+      response: new Response(responseContent, {status}),
+    });
+
+    return requestMock;
+  };
+}
+
+export function mockGraphqlRequests(
+  apiVersion = ApiVersion.July25,
+  shopUrl = TEST_SHOP,
+) {
+  return async function (...mocks: MockGraphqlRequestArg[]) {
+    const mockedRequests: Request[] = [];
+    const externalRequests = mocks.map(
+      ({body, responseContent, status = 200}) => {
+        const requestMock = new Request(
+          `https://${shopUrl}/admin/api/${apiVersion}/graphql.json`,
+          {method: 'POST', ...(body ? {body} : {})},
+        );
+
+        mockedRequests.push(requestMock);
+
+        return {
+          request: requestMock,
+          response: new Response(responseContent, {status}),
+        };
+      },
+    );
+
+    await mockExternalRequests(...externalRequests);
+
+    return mockedRequests;
+  };
+}

package/src/server/__test-helpers/request-mock.ts

@@ -0,0 +1,169 @@
+import fetchMock, {MockParams} from 'jest-fetch-mock';
+
+interface MockExternalRequestArg {
+  request?: Request;
+  response: Response;
+}
+
+interface ResponseParams {
+  body: string;
+  init: MockParams;
+}
+
+let requestMocks: MockExternalRequestArg[] = [];
+
+let skipMockChecksFlag = false;
+
+export async function mockExternalRequest({
+  request,
+  response,
+}: MockExternalRequestArg) {
+  requestMocks.push({request, response});
+
+  const {body, init} = await mockParams(response);
+  fetchMock.mockResponse(body, init);
+}
+
+export async function mockExternalRequests(...mocks: MockExternalRequestArg[]) {
+  const parsedResponses: [string, MockParams][] = [];
+  for (const mock of mocks) {
+    const {request, response} = mock;
+
+    requestMocks.push({request, response});
+
+    const {body, init} = await mockParams(response);
+    parsedResponses.push([body, init]);
+  }
+
+  fetchMock.mockResponses(...parsedResponses);
+}
+
+async function mockParams(response: Response): Promise<ResponseParams> {
+  return {
+    body: await response.text(),
+    init: {
+      status: response.status,
+      statusText: response.statusText,
+      url: response.url,
+      headers: {
+        ...Object.fromEntries(response.headers.entries()),
+        'content-type': 'application/json',
+      },
+    },
+  };
+}
+
+export async function validateMocks() {
+  if (requestMocks.length === 0 && fetchMock.mock.calls.length === 0) {
+    return;
+  }
+
+  let matchedRequests = 0;
+
+  for (const [index, requestMock] of requestMocks.entries()) {
+    const {request} = requestMock;
+
+    if (fetchMock.mock.calls.length === 0) {
+      continue;
+    }
+
+    matchedRequests++;
+    const [url, init] = fetchMock.mock.calls[index];
+
+    const expected: Record<string, any> = {};
+    const actual: Record<string, any> = {};
+
+    if (request?.url) {
+      expected.url = new URL(request.url);
+      actual.url = new URL(url as string);
+    }
+
+    if (request?.method) {
+      expected.method = request.method;
+      actual.method = init?.method || 'GET';
+    }
+
+    if (request?.body) {
+      const bodyBuffer = await stream2buffer(request.body);
+      const bodyString = new TextDecoder('utf-8').decode(bodyBuffer);
+
+      expected.body = expect.stringContaining(bodyString);
+      actual.body = init?.body?.toString();
+    }
+
+    if (request?.headers) {
+      expected.headers = {};
+      actual.headers = {};
+
+      // eslint-disable-next-line no-warning-comments
+      // TODO: we're currently not checking the headers properly. We should fix this.
+      Object.entries(request.headers).forEach(([key, value]) => {
+        expected.headers[key] = value;
+        actual.headers[key] = (init?.headers as any)[key];
+      });
+    }
+
+    try {
+      expect(actual).toEqual(expected);
+    } catch (error) {
+      error.message = `${init?.method} request made to ${url} does not match expectation:\n\n${error.message}`;
+      throw error;
+    }
+  }
+
+  if (requestMocks.length > matchedRequests) {
+    throw new Error(
+      `Expected ${
+        requestMocks.length
+      } request(s) to be made but they were not:\n\n${JSON.stringify(
+        requestMocks,
+        null,
+        2,
+      )}`,
+    );
+  }
+
+  if (fetchMock.mock.calls.length > matchedRequests) {
+    throw new Error(
+      `${
+        fetchMock.mock.calls.length
+      } unexpected request(s) were made, make sure to mock all expected requests:\n\n${JSON.stringify(
+        fetchMock.mock.calls,
+        null,
+        2,
+      )}`,
+    );
+  }
+}
+
+async function stream2buffer(
+  stream: ReadableStream<Uint8Array>,
+): Promise<Buffer> {
+  const buffers = [];
+
+  for await (const data of stream as any) {
+    if (typeof data === 'number') {
+      buffers.push(Uint8Array.from([data]));
+    } else {
+      buffers.push(data);
+    }
+  }
+
+  return Buffer.concat(buffers);
+}
+
+export function skipMockChecks(value: boolean) {
+  skipMockChecksFlag = value;
+}
+
+beforeEach(() => {
+  skipMockChecksFlag = false;
+  requestMocks = [];
+  fetchMock.resetMocks();
+});
+
+afterEach(async () => {
+  if (!skipMockChecksFlag) {
+    await validateMocks();
+  }
+});