Unauthenticated graphql admin api request results in a `GraphQL Client: Unauthorized` error

[javangriff]

Starting with a fresh app, making an unauthenticated admin request as below, where example.myshopify.com is the shop url of a store where the app has been successfully installed, results in a GraphQL Client: Unauthorized error.

import { ActionFunctionArgs } from "@remix-run/node";
import { unauthenticated } from "../shopify.server";

export async function action({ request }: ActionFunctionArgs) {
 const { admin } = await unauthenticated.admin("example.myshopify.com");

 const response = await admin.graphql(
   `#graphql
     mutation populateProduct($input: ProductInput!) {
       productCreate(input: $input) {
         product {
           id
         }
       }
    }`,
    { variables: { input: { title: "Product Name" } } }
  );

 const productData = await response.json();
 return json({ data: productData.data });
}

[lizkenyon]

Hi there 👋

I was not able to reproduce your error.

Could you confirm that your app has the required scopes to make that GraphQL mutation? (write_products).

[javangriff]

Hi @lizkenyon thanks for taking a look!

Yep, it does have the write_products scope. I scaffolded the app using the shopify app init command and added a route with the above graphql query, so everything is pretty standard other than that.

[sle-c]

Hi @javangriff,

I've tried to replicate the issue by creating a new remix app, installing to my dev shop, and adding a new route with the code you shared. The unauthenticated request worked fine. Is there any reason you use unauthenticated instead of authenticate?

[Andyrei]

I do not know if this issue was solved but i get the same thing as you do.

in the documentation it even says to use request into the function admin but accepts a string only. So passing the shop it will do :)

const { admin } = await unauthenticated.admin(request)

But i still get GraphQL Client: Unauthorized

Hi @javangriff,

I've tried to replicate the issue by creating a new remix app, installing to my dev shop, and adding a new route with the code you shared. The unauthenticated request worked fine. Is there any reason you use unauthenticated instead of authenticate?

In my case @sle-c, I have an extension theme type block with a button that calls the api.random.tsx.
The call goes through but on a post request when i try to use the admin.graphql() to modify metafields or, stupidly, just read an order. It gives the unauthorized error.

By trying to use the authenticate.admin(requst) does not work as into the request do not have everything it need to make the call so it redirect to a /login

...

[lizkenyon]

Hey @Andyrei

authenticate.admin(request) is for authenticating requests that were triggered from with the embedded app in the Shopify Admin. If your request was triggered from a theme app extension this request will fail like you are seeing.

If you are getting GraphQL Client: Unauthorized that means your access token is not valid for making the request. The easiest way to completely ensure that the bad access token is deleted, is to delete the the record in your database for the shop, and visit the embedded admin of your app. This will trigger the generation of a new token. (You can also uninstall your app and a APP_UNINSTALLED webhook will trigger. But you need to ensure that your webhook subscription URL is set to your current app url for this to work.)

Thanks for flagging the issue in the documentation, I believe there will be a fix for that shortly.

[Andyrei]

Hey @Andyrei

authenticate.admin(request) is for authenticating requests that were triggered from with the embedded app in the Shopify Admin. If your request was triggered from a theme app extension this request will fail like you are seeing.

If you are getting GraphQL Client: Unauthorized that means your access token is not valid for making the request. The easiest way to completely ensure that the bad access token is deleted, is to delete the the record in your database for the shop, and visit the embedded admin of your app. This will trigger the generation of a new token. (You can also uninstall your app and a APP_UNINSTALLED webhook will trigger. But you need to ensure that your webhook subscription URL is set to your current app url for this to work.)

Thanks for flagging the issue in the documentation, I believe there will be a fix for that shortly.

Thank you very, very much for clarifying that :D. Is my first week of app development in Shopify so it's a bit overwhelming with all the information :D

Thank you, i saw that the token was not valid by going in deep the old fashion way and discovered the problem..

f(request.method == "POST"){
    try {
      const response = await fetch('https://mystore.myshopify.com/admin/api/2025-01/graphql.json', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Shopify-Access-Token": "access_token"
        },
        body: JSON.stringify({
          query: `#graphql
          {
            orders(first: 10) {
              nodes {
                id
              }
            }
          }`
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const resData = await response.json();
      console.log(resData);

      return json({
        message: resData
      }, { status: 200 });

    } catch (error) {
      console.error(error);

      return json({
        message: error
      }, { status: 442 });
    }
  }

so now using it like this it works

if(request.method == "POST"){

    let gql_query = `#graphql
          {
            orders(first: 10) {
              nodes {
                id
              }
            }
      }`

    try {
      const response = await admin.graphql(gql_query)

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const resData = await response.json();
      console.log(resData);

      return json({
        message: resData
      }, { status: 200 });

    } catch (error) {
      console.error(error);

      return json({
        message: error
      }, { status: 442 });
    }
  }

[joePichardo]

@javangriff Had a similar issue just now, I had to manually delete the Session row in my database to refresh the token so it can get the new scopes to the token. On my end, probably an issue with not setting up webhooks to update the token when there are app changes.

[lizkenyon]

I am going to close this issue, as it seems to have been resolved. Feel free to create new issues, for any new problems that you run into.