401 when attempting to login to local hydrogen instance

[RichKucheraCQL]

I am following this guide:
https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen

I have a local instance of Hydrogen that's running and is connected to a dev store (not a merchant store) via Shopify's Headless app.

When I attempt to login as a customer via the Hydrogen storefront:

1. I get correctly redirected to the Shopify hosted login.
2. Enter my email.
3. Enter the one time use passcode emailed to me.
4. Get a 401. Hydrogen logs the following (I've removed the code and state values):
   GET 401 render /account/authorize?code=&state=&fwd=country%3DUS
   I think (but am not certain) the 401 is a result of Hydrogen calling the Customer Account API endpoint:
   https://shopify.com//auth/oauth/token

My Hydrogen instance at this point is completely vanilla except for the configuration changes as called out in the Shopify docs:

1. I've set all the environment variables mentioned here:
   https://shopify.dev/docs/storefronts/headless/hydrogen/environments#required-environment-variables
2. I modified the content security policy to allow my ngrok domain per the instructions here:
   https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen#add-your-ngrok-domain-to-the-content-security-policy
3. I've added the Callback URI and Logout URI to the Headless app's Storefront API configuration per the instructions here:
   https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen#update-the-application-setup

I suspect I have configured something wrong but I cannot tell what. The 401 returned does not include any details as to what might be missing.

[frandiox]

Can you try with npm run dev -- customer-account-push__unstable? With this you won't need all the Ngrok orquestration. Just to test if this is the issue or not.

That said, I'm not sure if this all works in dev stores... cc @michenly

[RichKucheraCQL]

Thank you for the suggestion.

Results:

1. Launched with npm run dev --customer-account-push__unstable. I got an error with a space between the dashes and the customer-account-push__unstable argument.
2. Going to the store via http://localhost:3000/ and attempting to login, I get a "redirect_uri" mismatch error. Which makes sense, I have to configure the authorize callback in the Shopify headless app and it doesn't accept localhost as a domain.
3. Tried to login via the Ngrok domain again but got the same 401 results. I don't think you were suggesting this but thought I'd give a try anyway.

[frandiox]

This flag should give you a different domain to test your app, and it should push this domain variables automatically to Admin on your behalf. Please find this log in your terminal.

It's still unstable so it might fail.

[RichKucheraCQL]

Thanks for the clarification. I think the command I needed to run is npm run dev -- --customer-account-push__unstable but that results in the following:

  The Admin GraphQL API responded unsuccessfully with errors:                                                          │
│                                                                                                                       │
│  [                                                                                                                    │
│    {                                                                                                                  │
│      "message": "Access denied for hydrogenStorefronts field. Required access: Request must be initiated from the     │
│  Shopify CLI and user must have full access to apps or access to the Hydrogen channel."

I'm not sure if this all works in dev stores

Maybe this is the case. Since this is a dev store, I cannot install the Hydrogen app, I instead installed the Headless app. On the plus side, aside from customer login, it was looking promising. The storefront loaded the products from the dev store for example.