@shopify/shopify-app-remix 2.3.0 → 2.5.0

package/README.md

@@ -174,6 +174,50 @@ Here are some guides to help you set up your app:
 You can also authenticate requests from surfaces other than the admin.
 To see all supported methods, see [the `shopify.authenticate` object documentation](https://shopify.dev/docs/api/shopify-app-remix/latest/authenticate).
 
+### New embedded app authorization strategy
+
+> [!TIP]
+> If you are building an embedded app, we **strongly** recommend using [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)
+> with [token exchange](https://shopify.dev/docs/apps/auth/get-access-tokens/token-exchange) instead of the legacy authorization code grant flow.
+
+We've introduced a new installation and authorization strategy for **embedded apps** that
+eliminates the redirects that were previously necessary.
+It replaces the existing [installation and authorization code grant flow](https://shopify.dev/docs/apps/auth/get-access-tokens/authorization-code-grant).
+
+This is achieved by using [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)
+to handle automatic app installations and scope updates, while utilizing
+[token exchange](https://shopify.dev/docs/apps/auth/get-access-tokens/token-exchange) to retrieve an access token for
+authenticated API access.
+
+##### Enabling this new strategy in your app
+
+> [!NOTE]
+> Newly created Remix apps from the template after February 1st 2024 has this feature enabled by default.
+
+1. Enable [Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)
+   by configuring your scopes [through the Shopify CLI](https://shopify.dev/docs/apps/tools/cli/configuration).
+2. Enable the future flag `unstable_newEmbeddedAuthStrategy` in your app's server configuration file.
+
+```ts
+// my-app/app/shopify.server.ts
+const shopify = shopifyApp({
+  ...
+  isEmbeddedApp: true,
+  future: {
+    unstable_newEmbeddedAuthStrategy: true,
+  }
+})
+
+```
+
+3. Enjoy a smoother and faster app installation process.
+
+###### Learn more about:
+
+- [How token exchange works](https://shopify.dev/docs/apps/auth/get-access-tokens/token-exchange)
+- [Using Shopify managed installation](https://shopify.dev/docs/apps/auth/installation#shopify-managed-installation)
+- [Configuring access scopes through the Shopify CLI](https://shopify.dev/docs/apps/tools/cli/configuration)
+
 ## Gotchas / Troubleshooting
 
 If you're experiencing unexpected behaviors when using this package, check our [app template's documentation](https://github.com/Shopify/shopify-app-template-remix#gotchas--troubleshooting) for the solution to common issues.

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

@@ -4,6 +4,7 @@ var crypto = require('crypto');
 var runtime = require('@shopify/shopify-api/runtime');
 var appBridgeUrl = require('../../authenticate/helpers/app-bridge-url.js');
 require('isbot');
+require('@remix-run/server-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -7,14 +7,15 @@ 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('@remix-run/server-runtime');
 var cancel = require('./billing/cancel.js');
 var require$1 = require('./billing/require.js');
 var request = require('./billing/request.js');
+var check = require('./billing/check.js');
 var createAdminApiContext = require('./helpers/create-admin-api-context.js');
 var ensureAppIsEmbeddedIfRequired = require('./helpers/ensure-app-is-embedded-if-required.js');
 var ensureSessionTokenSearchParamIfRequired = require('./helpers/ensure-session-token-search-param-if-required.js');
 require('@shopify/shopify-api');
-require('@remix-run/server-runtime');
 var redirect = require('./helpers/redirect.js');
 var renderAppBridge = require('./helpers/render-app-bridge.js');
 var validateShopAndHostParams = require('./helpers/validate-shop-and-host-params.js');
@@ -55,15 +56,12 @@ function authStrategyFactory({
       });
     }
   }
-  function createContext(request$1, session, sessionToken) {
+  function createContext(request$1, session, authStrategy, sessionToken) {
     const context = {
-      admin: createAdminApiContext.createAdminApiContext(request$1, session, {
-        api,
-        logger,
-        config
-      }),
+      admin: createAdminApiContext.createAdminApiContext(session, params, authStrategy.handleClientError(request$1)),
       billing: {
         require: require$1.requireBillingFactory(params, request$1, session),
+        check: check.checkBillingFactory(params, request$1, session),
         request: request.requestBillingFactory(params, request$1, session),
         cancel: cancel.cancelBillingFactory(params, request$1, session)
       },
@@ -99,18 +97,23 @@ function authStrategyFactory({
       const {
         payload,
         shop,
-        sessionId
+        sessionId,
+        sessionToken
       } = await getSessionTokenContext(params, request);
       logger.debug('Loading session from storage', {
         sessionId
       });
       const existingSession = sessionId ? await config.sessionStorage.loadSession(sessionId) : undefined;
-      const session = await strategy.authenticate(request, existingSession, shop);
+      const session = await strategy.authenticate(request, {
+        session: existingSession,
+        sessionToken,
+        shop
+      });
       logger.debug('Request is valid, loaded session from session token', {
         shop: session.shop,
         isOnline: session.isOnline
       });
-      return createContext(request, session, payload);
+      return createContext(request, session, strategy, payload);
     } catch (errorOrResponse) {
       if (errorOrResponse instanceof Response) {
         ensureCorsHeaders.ensureCORSHeadersFactory(params, request)(errorOrResponse);
@@ -129,10 +132,10 @@ async function getSessionTokenContext(params, request) {
   const searchParamSessionToken = getSessionTokenHeader.getSessionTokenFromUrlParam(request);
   const sessionToken = headerSessionToken || searchParamSessionToken;
   logger.debug('Attempting to authenticate session token', {
-    sessionToken: {
+    sessionToken: JSON.stringify({
       header: headerSessionToken,
       search: searchParamSessionToken
-    }
+    })
   });
   if (config.isEmbeddedApp) {
     const payload = await validateSessionToken.validateSessionToken({
@@ -150,7 +153,8 @@ async function getSessionTokenContext(params, request) {
     return {
       shop,
       payload,
-      sessionId
+      sessionId,
+      sessionToken
     };
   }
   const url = new URL(request.url);
@@ -162,7 +166,8 @@ async function getSessionTokenContext(params, request) {
   return {
     shop,
     sessionId,
-    payload: undefined
+    payload: undefined,
+    sessionToken
   };
 }
 

package/build/cjs/server/authenticate/admin/billing/cancel.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 require('@remix-run/server-runtime');
+var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 
 function cancelBillingFactory(params, request, session) {
   return async function cancelBilling(options) {

package/build/cjs/server/authenticate/admin/billing/check.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shopifyApi = require('@shopify/shopify-api');
+require('@remix-run/server-runtime');
+var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
+
+function checkBillingFactory(params, request, session) {
+  return async function checkBilling(options) {
+    const {
+      api,
+      logger
+    } = params;
+    logger.debug('Checking billing plans', {
+      shop: session.shop,
+      ...options
+    });
+    try {
+      return await api.billing.check({
+        session,
+        plans: options.plans,
+        isTest: options.isTest,
+        returnObject: true
+      });
+    } catch (error) {
+      if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {
+        logger.debug('API token was invalid, redirecting to OAuth', {
+          shop: session.shop
+        });
+        throw await redirectToAuthPage.redirectToAuthPage(params, request, session.shop);
+      } else {
+        throw error;
+      }
+    }
+  };
+}
+
+exports.checkBillingFactory = checkBillingFactory;

package/build/cjs/server/authenticate/admin/billing/require.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 require('@remix-run/server-runtime');
+var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 
 function requireBillingFactory(params, request, session) {
   const {

package/build/cjs/server/authenticate/admin/helpers/create-admin-api-context.js

@@ -3,15 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var factory = require('../../../clients/admin/factory.js');
-var handleClientError = require('./handle-client-error.js');
 
-function createAdminApiContext(request, session, params) {
+function createAdminApiContext(session, params, handleClientError) {
   return factory.adminClientFactory({
     session,
     params,
-    handleClientError: handleClientError.handleClientErrorFactory({
-      request
-    })
+    handleClientError
   });
 }
 

package/build/cjs/server/authenticate/admin/helpers/handle-client-error.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
-var redirectToAuthPage = require('./redirect-to-auth-page.js');
 
 function handleClientErrorFactory({
-  request
+  request,
+  onError
 }) {
   return async function handleClientError({
     error,
@@ -22,8 +22,12 @@ function handleClientErrorFactory({
       statusText: error.response.statusText,
       body: JSON.stringify(error.response.body)
     });
-    if (error.response.code === 401) {
-      throw await redirectToAuthPage.redirectToAuthPage(params, request, session.shop);
+    if (onError) {
+      await onError({
+        request,
+        session,
+        error
+      });
     }
 
     // forward a minimal copy of the upstream HTTP response instead of an Error:

package/build/cjs/server/authenticate/admin/helpers/redirect-to-bounce-page.js

@@ -11,12 +11,14 @@ const redirectToBouncePage = (params, url) => {
 
   // Make sure we always point to the configured app URL so it also works behind reverse proxies (that alter the Host
   // header).
-  url.searchParams.set('shopify-reload', `${config.appUrl}${url.pathname}${url.search}`);
+  const searchParams = url.searchParams;
+  searchParams.delete('id_token');
+  searchParams.set('shopify-reload', `${config.appUrl}${url.pathname}?${searchParams.toString()}`);
 
   // eslint-disable-next-line no-warning-comments
   // TODO Make sure this works on chrome without a tunnel (weird HTTPS redirect issue)
   // https://github.com/orgs/Shopify/projects/6899/views/1?pane=issue&itemId=28376650
-  throw serverRuntime.redirect(`${config.auth.patchSessionTokenPath}${url.search}`);
+  throw serverRuntime.redirect(`${config.auth.patchSessionTokenPath}?${searchParams.toString()}`);
 };
 
 exports.redirectToBouncePage = redirectToBouncePage;

package/build/cjs/server/authenticate/admin/helpers/redirect.js

@@ -49,13 +49,9 @@ function isBounceRequest(request) {
   return Boolean(getSessionTokenHeader.getSessionTokenHeader(request)) && request.headers.has('X-Shopify-Bounce');
 }
 function isDataRequest(request) {
-  const {
-    searchParams
-  } = new URL(request.url);
   const isGet = request.method === 'GET';
   const sessionTokenHeader = Boolean(getSessionTokenHeader.getSessionTokenHeader(request));
-  const sessionTokenSearchParam = searchParams.has('id_token');
-  return sessionTokenHeader && !sessionTokenSearchParam && !isBounceRequest(request) && (!isEmbeddedRequest(request) || !isGet);
+  return sessionTokenHeader && !isBounceRequest(request) && (!isEmbeddedRequest(request) || !isGet);
 }
 function isEmbeddedRequest(request) {
   const {

package/build/cjs/server/authenticate/admin/helpers/trigger-after-auth-hook.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createAdminApiContext = require('./create-admin-api-context.js');
 
-async function triggerAfterAuthHook(params, session, request) {
+async function triggerAfterAuthHook(params, session, request, authStrategy) {
   const {
     config,
     logger
@@ -13,7 +13,7 @@ async function triggerAfterAuthHook(params, session, request) {
     logger.info('Running afterAuth hook');
     await config.hooks.afterAuth({
       session,
-      admin: createAdminApiContext.createAdminApiContext(request, session, params)
+      admin: createAdminApiContext.createAdminApiContext(session, params, authStrategy.handleClientError(request))
     });
   }
 }

package/build/cjs/server/authenticate/admin/strategies/auth-code-flow.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var shopifyApi = require('@shopify/shopify-api');
 var beginAuth = require('../helpers/begin-auth.js');
-var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 var redirectToShopifyOrAppRoot = require('../helpers/redirect-to-shopify-or-app-root.js');
 require('@remix-run/server-runtime');
+var handleClientError = require('../helpers/handle-client-error.js');
+var redirectToAuthPage = require('../helpers/redirect-to-auth-page.js');
 var redirectWithExitiframe = require('../helpers/redirect-with-exitiframe.js');
 var getSessionTokenHeader = require('../../helpers/get-session-token-header.js');
 var triggerAfterAuthHook = require('../helpers/trigger-after-auth-hook.js');
@@ -52,12 +53,16 @@ class AuthCodeFlowStrategy {
       await this.ensureInstalledOnShop(request);
     }
   }
-  async authenticate(request, session, shop) {
+  async authenticate(request, sessionContext) {
     const {
       api,
       config,
       logger
     } = this;
+    const {
+      shop,
+      session
+    } = sessionContext;
     if (!session) {
       logger.debug('No session found, redirecting to OAuth', {
         shop
@@ -82,6 +87,28 @@ class AuthCodeFlowStrategy {
     });
     return session;
   }
+  handleClientError(request) {
+    const {
+      api,
+      config,
+      logger
+    } = this;
+    return handleClientError.handleClientErrorFactory({
+      request,
+      onError: async ({
+        session,
+        error
+      }) => {
+        if (error.response.code === 401) {
+          throw await redirectToAuthPage.redirectToAuthPage({
+            api,
+            config,
+            logger
+          }, request, session.shop);
+        }
+      }
+    });
+  }
   async ensureInstalledOnShop(request) {
     const {
       api,
@@ -197,7 +224,7 @@ class AuthCodeFlowStrategy {
         api,
         config,
         logger
-      }, session, request);
+      }, session, request, this);
       throw await redirectToShopifyOrAppRoot.redirectToShopifyOrAppRoot(request, {
         api,
         config,
@@ -293,7 +320,7 @@ class AuthCodeFlowStrategy {
         shop
       };
       if (error.response) {
-        context.response = JSON.stringify(error.response);
+        context.response = JSON.stringify(error.body);
       }
       logger.error(`Unexpected error during session validation: ${error.message}`, context);
       throw new Response(undefined, {

package/build/cjs/server/authenticate/admin/strategies/token-exchange.js

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shopifyApi = require('@shopify/shopify-api');
+require('isbot');
+var respondToInvalidSessionToken = require('../../helpers/respond-to-invalid-session-token.js');
+require('@remix-run/server-runtime');
+var handleClientError = require('../helpers/handle-client-error.js');
+var triggerAfterAuthHook = require('../helpers/trigger-after-auth-hook.js');
+
+class TokenExchangeStrategy {
+  constructor({
+    api,
+    config,
+    logger
+  }) {
+    this.api = void 0;
+    this.config = void 0;
+    this.logger = void 0;
+    this.api = api;
+    this.config = config;
+    this.logger = logger;
+  }
+  async respondToOAuthRequests(_request) {}
+  async authenticate(request, sessionContext) {
+    const {
+      api,
+      config,
+      logger
+    } = this;
+    const {
+      shop,
+      session,
+      sessionToken
+    } = sessionContext;
+    if (!sessionToken) throw new shopifyApi.InvalidJwtError();
+    if (!session || session.isExpired()) {
+      logger.info('No valid session found');
+      logger.info('Requesting offline access token');
+      const {
+        session: offlineSession
+      } = await this.exchangeToken({
+        request,
+        sessionToken,
+        shop,
+        requestedTokenType: shopifyApi.RequestedTokenType.OfflineAccessToken
+      });
+      await config.sessionStorage.storeSession(offlineSession);
+      let newSession = offlineSession;
+      if (config.useOnlineTokens) {
+        logger.info('Requesting online access token');
+        const {
+          session: onlineSession
+        } = await this.exchangeToken({
+          request,
+          sessionToken,
+          shop,
+          requestedTokenType: shopifyApi.RequestedTokenType.OnlineAccessToken
+        });
+        await config.sessionStorage.storeSession(onlineSession);
+        newSession = onlineSession;
+      }
+      try {
+        await this.handleAfterAuthHook({
+          api,
+          config,
+          logger
+        }, newSession, request, sessionToken);
+      } catch (error) {
+        throw new Response(undefined, {
+          status: 500,
+          statusText: 'Internal Server Error'
+        });
+      }
+      return newSession;
+    }
+    return session;
+  }
+  handleClientError(request) {
+    const {
+      api,
+      config,
+      logger
+    } = this;
+    return handleClientError.handleClientErrorFactory({
+      request,
+      onError: async ({
+        session,
+        error
+      }) => {
+        if (error.response.code === 401) {
+          config.sessionStorage.deleteSession(session.id);
+          respondToInvalidSessionToken.respondToInvalidSessionToken({
+            params: {
+              config,
+              api,
+              logger
+            },
+            request
+          });
+        }
+      }
+    });
+  }
+  async exchangeToken({
+    request,
+    shop,
+    sessionToken,
+    requestedTokenType
+  }) {
+    const {
+      api,
+      config,
+      logger
+    } = this;
+    try {
+      return await api.auth.tokenExchange({
+        sessionToken,
+        shop,
+        requestedTokenType
+      });
+    } catch (error) {
+      var _error$response$body;
+      if (error instanceof shopifyApi.InvalidJwtError || error instanceof shopifyApi.HttpResponseError && error.response.code === 400 && ((_error$response$body = error.response.body) === null || _error$response$body === void 0 ? void 0 : _error$response$body.error) === 'invalid_subject_token') {
+        throw respondToInvalidSessionToken.respondToInvalidSessionToken({
+          params: {
+            api,
+            config,
+            logger
+          },
+          request,
+          retryRequest: true
+        });
+      }
+      throw new Response(undefined, {
+        status: 500,
+        statusText: 'Internal Server Error'
+      });
+    }
+  }
+  async handleAfterAuthHook(params, session, request, sessionToken) {
+    const {
+      config
+    } = params;
+    await config.idempotentPromiseHandler.handlePromise({
+      promiseFunction: () => {
+        return triggerAfterAuthHook.triggerAfterAuthHook(params, session, request, this);
+      },
+      identifier: sessionToken
+    });
+  }
+}
+
+exports.TokenExchangeStrategy = TokenExchangeStrategy;

package/build/cjs/server/authenticate/const.js

@@ -4,6 +4,10 @@ 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 RETRY_INVALID_SESSION_HEADER = {
+  'X-Shopify-Retry-Invalid-Session-Request': '1'
+};
 
 exports.APP_BRIDGE_URL = APP_BRIDGE_URL;
 exports.REAUTH_URL_HEADER = REAUTH_URL_HEADER;
+exports.RETRY_INVALID_SESSION_HEADER = RETRY_INVALID_SESSION_HEADER;

package/build/cjs/server/authenticate/flow/authenticate.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var factory = require('../../clients/admin/factory.js');
+
+function authenticateFlowFactory(params) {
+  const {
+    api,
+    config,
+    logger
+  } = params;
+  return async function authenticate(request) {
+    logger.info('Authenticating flow request');
+    if (request.method !== 'POST') {
+      logger.debug('Received a non-POST request for flow. Only POST requests are allowed.', {
+        url: request.url,
+        method: request.method
+      });
+      throw new Response(undefined, {
+        status: 405,
+        statusText: 'Method not allowed'
+      });
+    }
+    const rawBody = await request.text();
+    const result = await api.flow.validate({
+      rawBody,
+      rawRequest: request
+    });
+    if (!result.valid) {
+      logger.error('Received an invalid flow request', {
+        reason: result.reason
+      });
+      throw new Response(undefined, {
+        status: 400,
+        statusText: 'Bad Request'
+      });
+    }
+    const payload = JSON.parse(rawBody);
+    logger.debug('Flow request is valid, looking for an offline session', {
+      shop: payload.shopify_domain
+    });
+    const sessionId = api.session.getOfflineId(payload.shopify_domain);
+    const session = await config.sessionStorage.loadSession(sessionId);
+    if (!session) {
+      logger.info('Flow request could not find session', {
+        shop: payload.shopify_domain
+      });
+      throw new Response(undefined, {
+        status: 400,
+        statusText: 'Bad Request'
+      });
+    }
+    logger.debug('Found a session for the flow request', {
+      shop: session.shop
+    });
+    return {
+      session,
+      payload,
+      admin: factory.adminClientFactory({
+        params,
+        session
+      })
+    };
+  };
+}
+
+exports.authenticateFlowFactory = authenticateFlowFactory;

package/build/cjs/server/authenticate/helpers/idempotent-promise-handler.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const IDENTIFIER_TTL_MS = 60000;
+class IdempotentPromiseHandler {
+  constructor() {
+    this.identifiers = void 0;
+    this.identifiers = new Map();
+  }
+  async handlePromise({
+    promiseFunction,
+    identifier
+  }) {
+    try {
+      if (this.isPromiseRunnable(identifier)) {
+        await promiseFunction();
+      }
+    } finally {
+      this.clearStaleIdentifiers();
+    }
+    return Promise.resolve();
+  }
+  isPromiseRunnable(identifier) {
+    if (!this.identifiers.has(identifier)) {
+      this.identifiers.set(identifier, Date.now());
+      return true;
+    }
+    return false;
+  }
+  async clearStaleIdentifiers() {
+    this.identifiers.forEach((date, identifier, map) => {
+      if (Date.now() - date > IDENTIFIER_TTL_MS) {
+        map.delete(identifier);
+      }
+    });
+  }
+}
+
+exports.IdempotentPromiseHandler = IdempotentPromiseHandler;