Login on local dev hydrogen.

Shopify Discussion
1

I have been having a hard time setting up the login/authentication part of my local hydrogen dev setup. Here is what I have done

  1. I have installed Hydrogen and have created my development store “haaila-test-1”

  2. I installed the Headless channel and created a storefront. Using the information from the “StoreFront API” and “Customer API” I updated my environment variables in .env file.

  3. I am able to access the store front api and that is working fine.

  4. I create the my ngrok setup and domain is pointing to localhost:3000

  5. I have added this as allowedHosts in the vite.config.js and have also added it as connectSrc in the entry.server.jsx

  6. I am able to access the domain and carry out all storefront api activity

  7. Where I am facing the issue is in bringing up the login page. When I am hitting /account/login it redirects to "https://www.shopify.com/authentication/haaila-test-1/oauth/authorize?client_id…" and throws a 404

Please let me know if this is even possible or you have faced this issue and have a solution.

1 Like
2

Thank you for your reply and offering help.
I am not using the Hydrogen Sales channel for my development store. I have been using Headless channel. I will use your pointers and give it a shot.

3

Yeah its a real mission getting it setup, what version of Hydrogen are you using ? I had to give it a few goes to get the admin api functioning in the latest Hydrogen via ngrok.

I didnt add allowedHosts (Vite 5) but i did add connectSrc: [‘wss://foo-bar-xyz.ngrok-free.app:*’], to createContentSecurityPolicy, and make sure you have responseHeaders.set(‘Content-Security-Policy’, header);

Another method and if you wanting to keep the custom login screens is by using @Shopify_77 /shopify-api, create a new instance in your lib/context.ts

const shopifyAdminAPI = shopifyApi({
    apiKey: env.SHOPIFY_ADMIN_API_KEY,
    apiSecretKey: env.SHOPIFY_ADMIN_API_SECRET,
    adminApiAccessToken: env.SHOPIFY_ADMIN_API_ACCESS_TOKEN,
    apiVersion: '2025-01',
    isCustomStoreApp: true,
    scopes: env.SHOPIFY_ADMIN_API_SCOPES.split(','),
    isEmbeddedApp: false,
    hostName: `https://${env.PUBLIC_STORE_DOMAIN}`,
    future: {
      customerAddressDefaultFix: true,
      unstable_managedPricingSupport: true,
      lineItemBilling: true,
    },
  });

  const adminApi = new shopifyAdminAPI.clients.Graphql({
    session: shopifyAdminAPI.session.customAppSession(env?.PUBLIC_STORE_DOMAIN),
  });

The leverage this method, only issue it you will have to build a gate and also build out all required routes and custom forms

4

Thanks for responding to my post. It turned out that I was not using SHOP_ID environment variable correctly. I was under the impression that it would be using the PUBLIC_STORE_ID. once I added that it started working.
It would be great if Shopify clearly documents this especially for beginners like me :slightly_smiling_face:

1 Like
5

Yeah docs arent the greatest when it comes to beginners and tech questions in this community dont normal get much response, this community seems to be a place sales people to push their apps

6

Hey Ygpatel, I’m running into the same issue and would really appreciate some guidance. I’m a bit unclear on what exactly the SHOP_ID and PUBLIC_CUSTOMER_ACCOUNT_API_URL values should be and where to find them. If you could point me in the right direction or share how you set them up, that would be super helpful. Thanks in advance! :blush:

7

i figured it out

8

Not sure if its too much to ask, but can you share in steps what exactly you did. I am experiencing the same issues, but my login page url redirects to, "https://www.shopify.com/authentication/undefined/oauth/authorize?..".

The ‘Undefined’ part of this url is my issue. I am not sure what I should do.