Solved

Webhooks settings

Uhrick
Shopify Partner
430 68 91

Hey people, could someone please help? I'm new to app development, and have been for hours trying to understand the reason that the app doesn't register the webhooks as I install it. My console of the app shows constantly the phrase "Authenticating admin request", but the afterAuth hook never triggers. I have tried uninstalling and reinstalling countless times. Only once, yesterday, for some reason, when I tried using the code provided on the webhooks admin, using the url from my store (the documentation wasn't clear as to what link should I use)

 

// Session is built by the OAuth process

const webhook = new shopify.rest.Webhook({session: session});
webhook.address = "pubsub://projectName:topicName";
webhook.topic = "customers/update";
webhook.format = "json";
await webhook.save({
  update: true,
});

 

 it finally functioned and triggered the afterAuth hook. But then, when I came back to work on it today, the app was saying that the address with 'myshopify.com' wasn't allowed. So, I got back to trying to make it work with the out-of-the-box code, but it just doesn't. Can someone try to tell me what is missing?

 

app/shopify.server.js

 

import "@shopify/shopify-app-remix/adapters/node";
import {
  AppDistribution,
  DeliveryMethod,
  shopifyApp,
  LATEST_API_VERSION,
} from "@shopify/shopify-app-remix/server";
import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
import { restResources } from "@shopify/shopify-api/rest/admin/2023-07";

import prisma from "./db.server";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion: LATEST_API_VERSION,
  scopes: process.env.SCOPES?.split(","),
  appUrl: process.env.SHOPIFY_APP_URL || "",

  sessionStorage: new PrismaSessionStorage(prisma),
  distribution: AppDistribution.AppStore,
  restResources,
  webhooks: {
    PRODUCTS_UPDATE: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: "/webhooks",
      callback: async (topic, shop, body, webhookId) => {
        console.log('--- Product update ---');
        const payload = JSON.parse(body);
        console.log(payload);
        console.log('--- /Product update ---');
      }
    }
  },
  hooks: {
    afterAuth: async ({ session }) => {
      shopify.registerWebhooks({ session });
      console.log("Auth happened");
    },
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
    : {}),
});

export default shopify;
export const apiVersion = LATEST_API_VERSION;
export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
export const authenticate = shopify.authenticate;
export const unauthenticated = shopify.unauthenticated;
export const login = shopify.login;
export const registerWebhooks = shopify.registerWebhooks;
export const sessionStorage = shopify.sessionStorage;

app/routes/webhooks.jsx

 

import { authenticate } from "../shopify.server";


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

  if (!admin) {
    // The admin context isn't returned if the webhook fired after a shop was uninstalled.
    throw new Response();
  }

  switch (topic) {
    case "PRODUCTS_UPDATE":
      console.log("updated");
      break;
    case "CUSTOMERS_DATA_REQUEST":
    case "CUSTOMERS_REDACT":
    case "SHOP_REDACT":
    default:
      throw new Response("Unhandled webhook topic", { status: 404 });
  }

  throw new Response();
};

 

 

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
Accepted Solution (1)

Uhrick
Shopify Partner
430 68 91

This is an accepted solution.

Ok, I'm not sure I got this right, but it seems that the app only considers the webhooks registered on his first time initiated, and not every time it is installed in the store, if this is in the documentation, I didn't notice. But I solved my problem by using 

 

npm run shopify app dev -- --reset

 

And connected it to the current app everytime I added a new webhook. Seemed to work.

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

View solution in original post

Replies 5 (5)

Liam
Shopify Staff
2731 294 744

Hi Uhrick,

 

I think the issue might be related to the URL you're using for the webhook. In your code, you have:

webhooks: {
    PRODUCTS_UPDATE: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: "/webhooks",
      ...
    }
}

In this case, "/webhooks" is a relative URL. Instead, you need to provide a complete, absolute HTTP(S) URL where Shopify can send the webhook when the event occurs. This URL must be a publicly accessible endpoint, hosted on a server that your app controls.

Here is an example of how it might look:

webhooks: {
    PRODUCTS_UPDATE: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: "https://your-app-domain.com/webhooks",
      ...
    }
}

Make sure to replace "https://your-app-domain.com/webhooks" the actual URL of your webhook endpoint.

 

Also, it's important to ensure that your endpoint is set up to receive POST requests, as Shopify sends webhooks via HTTP POST. You should check your server logs or use a tool like ngrok to inspect the incoming webhook request and ensure it's being received correctly.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Uhrick
Shopify Partner
430 68 91

Ok, I don't know exactly what was going on, but I used relative, but, yesterday, I tried deleting what I had and recreated a new app from scratch, and, for some reason, this time, npm run dev wouldn't work. In the previous app, npm run dev somehow generated a cloudflare link for me, that was registered in shopify.app.toml, in the "application_url". This time, this field wasn't filled, then, I generated the ngrok url, put it in application_url, and it worked. Even with "/webhooks". It's still working after I went sleeping and got back today, so I hope it keeps like that, but I have no idea what happened that the previous shopify.app.toml was filled like that, but thanks anyway haha if I run into another problem like that, I'll try adding the full link

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

Uhrick
Shopify Partner
430 68 91

This is an accepted solution.

Ok, I'm not sure I got this right, but it seems that the app only considers the webhooks registered on his first time initiated, and not every time it is installed in the store, if this is in the documentation, I didn't notice. But I solved my problem by using 

 

npm run shopify app dev -- --reset

 

And connected it to the current app everytime I added a new webhook. Seemed to work.

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
Dayjo
Shopify Partner
4 0 1

Hi Uhrick,

 

Did you end up having this issue on a production app too? I'm running into the same issue where it just doesn't seem to be registering the webhooks using this method. If I manually register them with graphQL they work fine. I'm worried that if we implement a new webhook using their suggested code is just not going to be functional. 

Uhrick
Shopify Partner
430 68 91

hey, Dayjo. It's been some time since I did it, I don't remember exactly how it functioned, but yeah, I was getting into a lot of trouble even in production

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution