Hello,
I am a Shopify dev newbie, and I am having trouble authenticating the app proxy request coming in from my theme app extension.
In my app.new.tsx file i have the following loader function that tries to replicate similarly what the docs say from
https://shopify.dev/docs/api/shopify-app-remix/v1/authenticate/public/app-proxy
loader function is:
export const loader = async ({ request }) => {
await authenticate.admin(request);
console.log(“hello from loader”);
try {
const { admin, session, liquid } = await authenticate.public.appProxy(
request
);
if (session && session.shop) {
const titleFromDb = await getBlockTitle();
console.log("title is: ", titleFromDb);
return json({ blockTitle: titleFromDb });
} else {
return json({ error: “Authentication failed.” }, { status: 403 });
}
} catch (error) {
console.error(“Error in loader:”, error);
// Check if error is an instance of Error
if (error instanceof Error) {
return json({ error: error.message }, { status: 500 });
} else {
return json({ error: “An unknown error occurred.” }, { status: 500 });
}
}
};
And in my theme app extension in the liquid code i have the following code to make the fetch call to the app proxy to communicate with my remix app:
When i try to use it all i keep getting a 404 error and sometimes a 400 error along with a log saying the query does not contain a signature value. I am really confused about how this is all supposed to be set up and I am using ngrok for the tunneling for the app proxy.
Error from server log:
16:01:06 │ remix │ [shopify-app/INFO] Authenticating admin request
16:01:07 │ remix │ Error in loader: NodeResponse [Response] {
16:01:07 │ remix │ size: 0,
16:01:07 │ remix │ [Symbol(Body internals)]: {
16:01:07 │ remix │ body: null,
16:01:07 │ remix │ type: null,
16:01:07 │ remix │ size: 0,
16:01:07 │ remix │ boundary: null,
16:01:07 │ remix │ disturbed: false,
16:01:07 │ remix │ error: null
16:01:07 │ remix │ },
16:01:07 │ remix │ [Symbol(Response internals)]: {
16:01:07 │ remix │ url: undefined,
16:01:07 │ remix │ status: 400,
16:01:07 │ remix │ statusText: ‘Bad Request’,
16:01:07 │ remix │ headers: {},
16:01:07 │ remix │ counter: 0,
16:01:07 │ remix │ highWaterMark: undefined
16:01:07 │ remix │ }
16:01:07 │ remix │ }
16:01:09 │ remix │ [shopify-app/INFO] Authenticating app proxy request
16:01:09 │ remix │ [shopify-app/INFO] Query does not contain a signature value.
My app proxy config in shopify partners is like this:
subpath prefix: apps
subpath: boostbundle
proxy url: https://7d0e-97-116-185-30.ngrok-free.app/app/new
I have that proxy url set up assuming it’s supposed to communicate with my app.new.tsx file
Where am i going wrong in all of this. Any help would be greatly appreciated!!