Skip to main content

Subscribing to webhooks

Your app must respond to mandatory webhook topics. In addition, your app can register optional webhook topics.

Anchor to configConfiguring webhooks subscriptions

Configure shopifyApp and setup webhook subscription with the following steps:

  1. The webhooks you want to subscribe to. In this example we subscribe to the APP_UNINSTALLED topic.
  2. The code to register the APP_UNINSTALLED topic after a merchant installs you app. Here shopifyApp provides an afterAuth hook.
  3. Review the required scopes for the webhook topics, and update your app scopes as necessary.
Note

You can't register mandatory topics using this package, you must configure those in the Partner Dashboard instead.

Configure webhooks subscriptions

/app/shopify.server.ts

import {shopifyApp, DeliveryMethod} from '@shopify/shopify-app-remix/server';

const shopify = shopifyApp({
apiKey: 'abcde1234567890',
// ...etc
webhooks: {
APP_UNINSTALLED: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: '/webhooks',
},
},
hooks: {
afterAuth: async ({session}) => {
shopify.registerWebhooks({session});
},
},
});

export const authenticate = shopify.authenticate;

Anchor to endpointsSet up your endpoints

Create a route in your app to handle incoming webhook requests for each callbackUrl you set in your configuration.Legitimate webhook requests are always POST requests signed by Shopify, so you must authenticate them before taking any action. To do this you must set up an action that uses the authenticate.webhook function to authenticate the request.

Please keep in mind that webhook endpoints should respond as quickly as possible. If you need to run a long-running job, then consider using background tasks.

Caution

Webhook endpoints must respond with an HTTP 200 code, or Shopify will retry.

Receive webhook requests

/app/routes/webhooks.tsx

import {ActionFunctionArgs} from '@remix-run/node';

import db from '../db.server';

import {authenticate} from '~/shopify.server';

export const action = async ({request}: ActionFunctionArgs) => {
const {topic, shop, session} = await authenticate.webhook(request);

switch (topic) {
case 'APP_UNINSTALLED':
if (session) {
await db.session.deleteMany({where: {shop}});
}
break;
case 'CUSTOMERS_DATA_REQUEST':
case 'CUSTOMERS_REDACT':
case 'SHOP_REDACT':
default:
throw new Response('Unhandled webhook topic', {status: 404});
}

throw new Response();
};

Anchor to resourcesResources

authenticate.webhook