Customer Account API Headless Integration is 500 in Hydrogen Remix

GraphQL Admin API Troubleshooting
1

Hello! I’m working on a Shopify store using the Headless Sales Channel App with the Hydrogen Remix template. The Storefront API works great, and I have no issues integrating it. But I can’t get the Customer Account API to work. I get a 500 error when I go to /account.

Screen Shot 2024-10-31 at 8.14.12 PM
Screen Shot 2024-10-31 at 8.14.12 PM868×390 19.3 KB

I have set the .env file to the values from the Headless Sales Channel App.

I have created a domain using Ngrok. And I’ve input this Ngrok domain in the Customer Account API part of the Headless Sales Channel App.

I would start the Ngrok first ngrok http --domain=some-ngrok-domain.app 3000. And I npm run dev the Hydrogen Remix. But I still get the 500 error.

I followed the instructions from the Getting Started on the Customer Account API Documentation. I’ve updated the server.js to have the createCustomerAccountClient(). I’ve added the Ngrok domain in createContentSecurityPolicy() in the entry.server.jsx.

I would like the users to login/signup to view their orders within the Hydrogen Remix frontend, and not get re-routed to the Dawn Liquid theme portal.

What am I missing? Is it the Authorization step? If it’s the Authorization step, where would I set that up, in the server.js, root.jsx, entry.server.jsx?

2

So in turns out that if you upgrade the Shopify NPM package to at least 2024.7.x for Remix Hydrogen that the customerAccount comes with the storefront in the Hydrogen Context.

You just need the Ngrok account. And have the SHOP_ID in the .env file.