Webhooks settings

[Uhrick]

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();
};

[Liam]

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!

[Uhrick]

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

[Uhrick · 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.

[Dayjo]

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]

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

[Joe2137]

Thanks for sharing this.  Having the same issue with the latest version.

From the observation of detailed tracing, `afterAuth` callback is triggered after requesting a new access token. In this case, if the access is offline mode, so the access token is `persisted`, even upon uninstall/install, the access token is still valid hence not triggering the `afterAuth` callback. By `--reset`, it probably wipes the access token and things started to work as expected.