Trouble authenticating app proxy request in remix

hacun3jr
Shopify Partner
23 2 16

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:
 
<script>
  async function getData() {
    const response = await fetch('/apps/boostbundle');
    const res = await response.json();
    console.log(`---> ${res.content}`);
    getData();
  }
</script>
 
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
 
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!!
Replies 0 (0)