cli: [Bug]: Cart API - Request to `/cart/*.js` routes returns 401 error when using dev command with password flag

Please confirm that you have:

Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

When serving the theme via localhost (shopify theme dev --password=<THEME_ACCESS_PASSWORD>) requests to the Cart API (and other Ajax APIs) should work exactly like in a production/remote environment.

Actual behavior

All requests error due to the client being unauthorized.

Stack trace

No response

Reproduction steps

Serve theme via shopify theme dev --password=<THEME_ACCESS_PASSWORD>
Try to add a item to the cart via fetch('/cart/add.js', { ... })
Check response

(Repeat steps without --password flag and login via web UI instead and it should be working again)

Operating System

macOS Monterey

Shopify CLI version (check your project’s `package.json` if you’re not sure)

3.32.0

Shell

zsh

Node version (run `node -v` if you’re not sure)

v18.13.0

What language and version are you using in your application?

Node v18.13.0

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 15 (8 by maintainers)

Most upvoted comments

Hi @davidthorand! Thanks for reaching out.

It hasn’t been released yet, but it’s scheduled to be included in the next minor release version, so you can expect it on 3.46.x. Let me know if you have any other questions or comments! 😃

karreiro on Apr 20, 2023

Thanks again @davidthorand for the detailed answers. This and the related issue #1537 should be fixed in the next release.

Poitrin on Apr 4, 2023

@Poitrin i’ve seen cases of old passwords that don’t even have a prefix at all, still being used. I think dating from the private app / themekit / slate 0 era?

knjshimi on Mar 23, 2023

I raised an issue https://github.com/Shopify/cli/issues/1354 (now closed) that was mainly about HMR and CORS, but I also pointed out a similar issue with the cart endpoint when using the password flag. Might be worth checking the logs there as well.

knjshimi on Mar 21, 2023

@Poitrin this is how my fetch request looks like:

const { routes } = window.Shopify;

const response = await fetch(routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    // This is passed as an arg of the method where this fetch request is placed.
    items,
    sections: 'cart-drawer',
  }),
});
...

This is the body (example):

{
  "items": [
    {
      "id": 123,
      "quantity": 1
    }
  ],
  "sections": "cart-drawer"
}

This is the response:

{
  "status": "bad_request",
  "message": "must be a collection of items: items",
  "description": "must be a collection of items: items"
}

The request works perfectly fine (as expected) if I don’t use the theme dev password flag.

davidthorand on Mar 21, 2023