How to validate App Proxy signature in Shopify Remix app?

Shopify Apps

Topic summary

A developer is encountering a “Query does not contain a signature value” error when implementing App Proxy in a Shopify Remix app. The app uses App Proxy to fetch product variant IDs from the storefront to the server.

Current Implementation:

  • Frontend makes fetch requests to /apps/wishlist endpoint with productId and shop parameters
  • Remix loader uses authenticate.public.appProxy(request) to authenticate and query Storefront GraphQL API
  • Returns variant ID extracted from product data

Key Questions:

  • How to properly generate and validate App Proxy signatures in Remix/Node.js
  • Whether signature verification is required when using the authentication method
  • How to handle query parameters for hash generation
  • Whether the signature needs to be manually appended in frontend fetch calls

Community Response:
One user confirmed they’re using authenticate.public.appProxy(request) for App Proxy authentication in their loader/action functions, suggesting this is the standard approach. The discussion remains open regarding specific signature handling implementation details and best practices.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m working on a Shopify Remix app and using App Proxy to send requests from the Shopify storefront to my app server. However, I’m getting the error:

“Query does not contain a signature value”

I understand that Shopify App Proxy requests using a signature parameter, and I need to validate this signature on my server using the app’s shared secret.

Could someone please guide me on:

How to correctly generate and validate the App Proxy signature in a Remix (Node.js) environment?

Do I need to use signature for verification?

How should I handle the query parameters before generating the hash?

Any code examples or best practices for handling this in a Remix app would be greatly appreciated!

2

Hi @greeshma

did you use authentication for app proxy at your api (loader or action)?

const { admin } = await authenticate.public.appProxy(request);
3

@BiDeal-Discount

I’m using an App Proxy to fetch the variant ID of a product. I have this JavaScript code in my Liquid theme to make a request to my custom Remix App route:

// Fetch variant ID dynamically
fetch(/apps/wishlist?productId=${productId}&shop=${shop})
.then(response => response.json())
.then(data => {
if (data && data.variantId) {
wishlistButton.dataset.variantId = data.variantId;
}
})
.catch(error => console.error(“Error fetching variant ID:”, error));

Here’s my loader function inside the Remix app

import { json } from “@remix-run/node”;
import { authenticate } from ‘../shopify.server’;

export async function loader({ request }) {
const url = new URL(request.url);
const productId = url.searchParams.get(“productId”);
const formattedId = gid://shopify/Product/${productId};

const { storefront } = await authenticate.public.appProxy(request);

const response = await storefront.graphql(
query getProduct($id: ID!) { node(id: $id) { __typename ... on Product { id title variants(first: 1) { edges { node { id title } } } } } },
{ variables: { id: formattedId } }
);

const jsonResponse = await response.json();

let variantId = null;
if (
jsonResponse?.data?.node?.__typename === “Product” &&
jsonResponse.data.node.variants.edges.length > 0
) {
const fullVariantId = jsonResponse.data.node.variants.edges[0].node.id;
variantId = fullVariantId.split(“/”).pop();
}

return json({ variantId }, {
headers: {
“Access-Control-Allow-Origin”: “*”,
},
});
}

How do I pass and verify the signature parameter in the frontend API call for the App Proxy? Do I need to append the signature manually in the fetch call?