Can't Authenticate GraphQL in Remix

Retired Boards Appdev Tools
, ,
1

I am trying to create a basic app using the Remix template that calls on the Admin GraphQL API but my app keeps redirecting to a login page on authentication

Here is my current fetch request in the liquid theme-extension

fetch("https://{{ shop.permanent_domain }}/apps/name/product?customerId={{ customer.id }}&productId={{ product.id }}&shop={{ shop.permanent_domain }}")
      .then(response => response.json())
      .then(result => {
        console.log(result);
      })
      .catch(error => console.log(error));

and here is my api.product.tsx:

export async function loader({ request }: ActionFunctionArgs) {
    const url = new URL(request.url);
    const customerId = url.searchParams.get("customerId");
    const productId = url.searchParams.get("productId");

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

    console.log("test");

    return new Response('test', {status: 200})
}

With my App proxy set for Subpath prefix: “apps”, Subpath: “name” and URL: https://xxxxxxxx.trycloudflare.com/api/.

I also have my shopify.server.ts configured with:

const shopify = shopifyApp({
 ...
  isEmbeddedApp: true,
  future: {
    unstable_newEmbeddedAuthStrategy: true,
  },
});

I have read through a lot of the docs and other forums but have yet to figure out why every request is still being redirected to /auth/login when it hits authenticate.admin(request).

2

I have solved the issue, I did not know the authentication needed to be different when using app proxies.

Changing:

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

To:

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

Fixes the problem.