The error was: "redirect_uri" mismatch when signing in as a customer to a newly created storefront

[rfried]

I am using a custom hydrogen storefront version 2024.1.4. It was configured for typescript, tailwind and I used all the default route scaffolding. Originally I encountered this after upgrading from 2023.10.x but during debug I have also attempted to make a brand-new default storefront using the template and am encountering the same issue.

When I click "Sign in" on the homepage like a user would do I get a redirect_uri error and I have no idea how to resolve this.

Why does the default storefront produce this error out of the box?
I cannot find any settings in Shopify or in the application code that give me any control over the redirect_uri used by my storefront.

Any ideas on how I can resolve this?

[eter5]

I have the same problem

hydrogen storefront version: 2024.1.4

Anyone who can help us?

[rfried]

I'm still confused by the document you linked and what it has to do with credentials. It's a whole lot of "how to set up customer API when running in development using ngrok and manual storefront route configuration". I am using an Oxygen-hosted Hydrogen storefront deployed as "production" with a publicly accessible domain that was automatically created by Shopify. This makes it sound like the Hydrogen storefront should have everything it needs to configure correctly: https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#production-storefront

The only thing I can think that's missing is that the createContentSecurityPolicy by default doesn't include the Hydrogen storefront domain that is automatically created for production. If this is what's missing then may I suggest that the h2 link/setup process create the CSP that's needed?

[blittle]

The new Customer Account API follows an oauth user authentication flow. This means, when they click "login" they are redirected to another domain. At the moment that domain is owned by Shopify, similar to checkout (vanity domains are coming). On successfully logging in, the user needs to be redirected back to your app. As a result, the redirect configuration needs to be defined inside the Shopify admin. The challenge comes when you are running locally on localhost. For a variety of security reasons, we have yet to allow localhost URLs as a redirect destinations from Shopify's domain. This is why ngrok, or something is needed to proxy localhost to an actual publicly accessible domain. We realize that this is extremely painful, and the 2024.4 release will include changes that automatically handle creating a public domain for local development. I apologize for the confusion and difficulty. I really hope it will be easier in just a few weeks.

[rfried]

I'm not running on localhost though. I'm saying that the production environment doesn't work with Sign in. Like... following the reproduction steps in the bug I filed (and you closed as duplicate) deploys the generated Hydrogen template to production. There's a public domain that Hydrogen assigns and Oxygen should have the environment variables automatically. Do you see where my expectation is coming from that this work out of the box and my confusion on what exactly I would be configuring in this normal production Hydrogen workflow? I don't think the tutorial you sent addresses my needs which is why I unmarked the answer.

[eter5]

Hello rfried,

I had the same problem. You are very right in saying that the Shopify tutorial does not help much in understanding how to solve this.

My website is also in production so it occurred to me to do the configuration but with the production domain instead of the ngrok one:

This seems to be how it should work.

I hope this help.

Greetings.

[rfried]

Thanks! that was the missing piece. I would still consider this to be a bug. Hydrogen created this domain itself and could have easily scripted the domain as default for the storefront so that it would work with the generated site.

[eter5]

I agree with you, since I thought that this configuration was not necessary for production. The URI can be obtained from the domain configured as primary for production. I understand the purpose of this configuration for development, but for production it seems unnecessary to me.

Greetings.

[ihorvyshniakov]

blittle, reply to your message
For now I'm trying to modify Account page for my custom storefront locally, and I have the same issue.
So for now it start working in auto-generated environment, but still I can't sign into Shopify account from my localhost.

This issue answer is worked for me!
After changing links in Admin, it has start working on auto-generated environment.
https://hydrogen-storefront-04693f20e68949eaf222.o2.myshopify.dev/
( Hydrogen(on side panel) - Chose my storefront - Storefront settings - Customer Account API - Application setup )

[davidwilliford99]

This helped me a ton! I can now send users to login on the development Hydrogen server.

Now I am running into the following error after being redirected to /account/authorize.

Here is the full URL it is redirecting me to:
https://sizzlefish-hydrogen-e42c406482adba55457e.o2.myshopify.dev/account/authorize?code=&state=.

I left out my code and state for security reasons, but the state parameter was multiple lines long, and the state looked closer to around a 15 character random ID

I am getting an HTTP 401 for some reason. Would love some help with this, thanks in advance.

[mhmdjaw]

h2 dev --customer-account-push__unstable

Is it possible to use this with headless channel instead of hydrogen? This is the only missing piece for me everything else works fine.

[herveguetin]

See my answer below - #1893 (comment)

[herveguetin]

For those using the Headless channel (because, for example, using a development store not eligible to the Hydrogen channel), here is how to :

• configure the .env file
• use LocalTunnel (https://localtunnel.github.io) to have public domain
• setup the application URIs

👉 Configure .env file

PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=<CLIENT_ID>
PUBLIC_CUSTOMER_ACCOUNT_API_URL=<ENDPOINT>

---

<CLIENT_ID> is the "Client ID" value from Customer Account API credentials:

---

<ENDPOINT> is the https://shopify.com/XXXXXXXXX URL found in the Application endpoints section:

---

👉 Use LocalTunnel

• Add LocalTunnel to your project: npm install --save-dev localtunnel
• Add a script to your package.json file:
  "tunnel": "npx localtunnel --port 3000 --subdomain <CUSTOM_SUBDOMAIN>".
  Replace <CUSTOM_SUBDOMAIN> ; ex: your-subdomain.
• npm run tunnel => this will give you the final domain. Ex: https://your-subdomain.loca.lt

👉 Setup the application URIs

Use the final domain from the previous step to configure the application URIs in the Headless channel customer API configuration:

[RomanKaliupinMelonusa]

@herveguetin I was able to deploy the code through Oxygen to the https://........23c08.o2.myshopify.dev and the login flow start working.
Is there are any ways how to configure it on localhost in order to debug the code?

[kalenjordan]

This thread sent me on a wild goosechase.

All you have to do is npx shopify hydrogen dev --customer-account-push__unstable

#1989

[setoseng]

Thank you for comment. Saved me from going down the wild goose chase myself.

[888jacklee]

Thank you for comment. Saved me from going down the wild goose chase myself.

[joevingracien]

Thank you for comment. Saved me from going down the wild goose chase myself.

[brunogarciavaz]

Thank you for comment. Saved me from going down the wild goose chase myself.

[ghost]

I don't know who needs to hear this but for local development what fixed it for me was adding to vite.config.ts

  server: {
    allowedHosts: ['<ngrok_domain>.app'],
  },

as well as the other steps

[tomfuertes]

Anyone found a way to do this with github branch / preview urls?