Clarity Verify webhooks that are sent using an HTTPS endpoint X-Shopify-Hmac-Sha256

[joe-extreme]

Currently using a Shopify remix application, both locally and on fly.io.

Is it required? It appears not when using locally. However currently hitting a 400 on a fly.io app and curious if this is the read.

On a remix app does the following built in function for a webhook not perform that for me?:

const { topic, shop, session, admin, payload } = await authenticate.webhook(request);

Should I pass in my hmac result into this function perhaps if not?

Or do I need to perform something like this comment's solution in my webhook?

Will this app be reviewed and be a requirement?

It looks like it's quite vague in the docs, the only suggestion being on a single table cell under this webhook header heading on the webhooks page which is not obvious.

Thanks

[Liam]

Hi Joe,

With the information provided, it's difficult to determine the exact cause of the 400 error you're experiencing on fly.io. However, I'll try to clarify some of your questions related to Shopify webhooks:

• The function authenticate.webhook(request) provided by Shopify's library should handle the HMAC verification for you. This function checks if the request is a valid webhook from Shopify, which includes verifying the HMAC signature. You shouldn't need to pass in your HMAC result.

• If you're receiving a 400 error, it's typically due to a bad request. This may mean that the request's syntax, size, or routing request is incorrect. You may want to check if the webhook setup and the endpoint URL are configured correctly in your Shopify admin.

• Regarding the Shopify review and requirement, if you're building a public app for the Shopify App Store, your app will need to go the Shopify review process. This includes checking if your app properly verifies webhooks. If you're building a private app for a specific store, this would not be necessary.

Hope this helps!

[joe-extreme]

Hey Liam, thanks for the reply.

I think I have found that this is not something fly.io related. Have I missed something obvious?

I just setup a completely fresh Shopify Remix application. Only updated "app/routes/webhooks.jsx", tested a "product update" webhook and got the same result where the webhook URL is the auto-generated cloudflare address shopify remix generates from the application_url value in shopify.app.toml, e.g.:

application_url = "https://boxed-suggests-reviews-lanka.trycloudflare.com" and I can preview the logs via the npm process "npm run dev" for the Shopify Remix app. One can trigger webhooks like this:

Via CLI:

npm run shopify webhook trigger -- --topic PRODUCTS_UPDATE --api-version 2023-10 --delivery-method http --client-secret=63e770f8d328c78098e78ffa26cc8e80 --address https://boxed-suggests-reviews-lanka.trycloudflare.com/webhooks

Response:

10:56:01 │ remix │ webhooks
10:56:01 │ remix │ webhooks post auth
10:56:01 │ remix │ POST /webhooks 200 - - 13.454 ms

But here is a response where webhook is triggered by updating a product, or, via the test  webhook notification area in "/store/extreme-preview/settings/notifications":

10:48:40 │ remix │ webhooks
10:48:40 │ remix │ POST /webhooks 400 - - 11.481 ms

Here is my test app repo where I have added the simple console.logs:

https://github.com/joepagan/shopify-remix-webhook-issue/blob/main/app/routes/webhooks.jsx#L9

[joe-extreme]

Update: I have seen that "app/shopify.server.js" requires a new object to potentially allow the webhook (test repo updated), however despite adding an identical one matching the pre-existing "APP_UNINSTALL" which comes with the default remix app, I still get a 400 response and it does NOT pass the "authenticate.webhook" function in the webhooks file.

Created a new github issue here: https://github.com/Shopify/shopify-app-template-remix/issues/396