Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Can't Authenticate GraphQL in Remix

Solved

Can't Authenticate GraphQL in Remix

JedLT
Shopify Partner
5 1 0

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).

 

Accepted Solution (1)

JedLT
Shopify Partner
5 1 0

This is an accepted solution.

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.

View solution in original post

Reply 1 (1)

JedLT
Shopify Partner
5 1 0

This is an accepted solution.

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.