Programmatically registering custom webhooks in privacy.js doesn't create the webhook on Admin porta

Shopify Apps
1

Hello, I am using the React Express template to build an embedded Shopify app.

I followed a YouTube video https://youtu.be/Yu08U77IgIg?si=55XxMbzbGSeayCHV to modify the content of the privacy.js file into something like this:

import { DeliveryMethod } from "@shopify/shopify-api";

/**
 * @type {{[key: string]: import("@shopify/shopify-api").WebhookHandler}}
 */
export default {
  /**
   * Customers can request their data from a store owner. When this happens,
   * Shopify invokes this privacy webhook.
   *
   * https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-data_request
   */
  CUSTOMERS_DATA_REQUEST: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
    },
  },

  /**
   * Store owners can request that data is deleted on behalf of a customer. When
   * this happens, Shopify invokes this privacy webhook.
   *
   * https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-redact
   */
  CUSTOMERS_REDACT: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
    },
  },

  SHOP_REDACT: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
    },
  },
  PRODUCTS_UPDATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
      console.log('********** webhooks: product update: ', payload);
    },
  },
  PRODUCTS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
      console.log('********** webhooks: product create: ', payload);
    },
  },
  PRODUCTS_DELETE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      const payload = JSON.parse(body);
      console.log('********** webhooks: product delete: ', payload);
    },
  },
};

And inside index.js, the webhook is registered with

app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: PrivacyWebhookHandlers })
);

I also updated the scope inside the toml file to include the necessary ones:

[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "read_products,write_products,read_orders,write_orders"

However, after running this app on a development store using

npm run dev

And I went to the Shopify Admin site to create a new product and update a product, the webhooks were triggered. It successfully triggered with the shopify app webhook trigger cli command though.

When I went to Shopify Admin > setting > notification > webhooks, I did not see any created webhooks.

And when I manually created a product create webhook with the right npm run dev url, I got an error

23:54:24 │   web-backend │ [shopify-api/INFO] Receiving webhook request
23:54:24 │   web-backend │ [shopify-app/ERROR] Failed to process webhook: Error: Could not validate request HMAC

So the manual creation of webhook was needed to catch the event. But then how do I set things up so that the store owner who installs my app don’t need to manually create the webhooks in their Shopify Admin site?

What step did I miss?

Thank you!