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

[rfried]

What is the location of your example repository?

https://github.com/rfried/redirect_uri-error

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.1.4

What version of Remix are you using?

2.8.0

Steps to Reproduce

Follow getting started guide: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development

1. in your shopify account, add the Hydrogen app
2. open command prompt
3. run "npm create @shopify/hydrogen@latest"
4. during creation name the project "redirect_uri-error" (for the sake of these reproducion instructions"
5. select "Typescript", "Tailwind", scaffold all standard routes, and allow it to create a hydrogen shortcut "h2"
6. run "cd redirect_uri-error"
7. run "h2 link", link to your account and create new Storefront. Name it whatever
8. run "h2 deploy". Now you have a boilerplate hydrogen storefront
9. In your shopify account, open the Hydrogen app and find the storefront you just created
10. Open the storefront URL
11. Click "Sign in"
12. See redirect_uri error.

Expected Behavior

I expected to see a sign in page and to be able to create/sign in as a customer

Actual Behavior

I got a redirect_uri error message and the only way to recover was to go back in the browser. There's no way to sign in as a customer on my custom hydrogen storefront

https://private-user-images.githubusercontent.com/1892407/316275996-9db13cf4-5d32-4094-bd53-9edf552c99ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTEzMjU5MDYsIm5iZiI6MTcxMTMyNTYwNiwicGF0aCI6Ii8xODkyNDA3LzMxNjI3NTk5Ni05ZGIxM2NmNC01ZDMyLTQwOTQtYmQ1My05ZWRmNTUyYzk5ZWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDMyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDAzMjVUMDAxMzI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGIwYjQxODQyNzRjMTE3ZWMzMjQ5N2UyZjE4NjgwN2JlOGFiMmU5YjBmMzY5ODU5MDYxYjZhYmI0YjQ0M2Q1OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.HaDxvPNQ9WYeopaO0WJsG89bVdmrVvPL5OwOgyf6M6o

[blittle]

Duplicate: #1893 (reply in thread)

[rfried]

Depends on how we should track this as bug or not. I find this to be a bug and this form includes the reproduction instructions. This isn't a scenario where Sign in isn't working in localhost. It's not working in the production Hydrogen storefront. Something I would expect to work without additional configuration

[rfried]

As noted in the help discussion. It looks like even for a domain generated by shopify when creating a storefront the customer API must be set up. I wish that when hydrogen creates a public URL for a new storefront, that by default it would also set up that storefront's customer API to use that URL. All of the URLs in this screenshot I set up manually but it was a domain that shopify created for my store when it created the store. This is information that should have already been set up correctly for people using the hydrogen generator.

[blittle]

@rfried ah I understand. This is more of a feature request, and I agree, the oxygen preview deployment URLs should automatically support the Customer Account API redirects. We are tracking this internally, but have no timeline on when this might be available.

[rfried]

@blittle perhaps in the meantime the documentation can be updated to include oxygen default production URL instructions?

[FinnKinnear]

Hi team! I have a report of a Plus merchant running into this exact issue on their Hydrogen storefront.

If you access the storefront here, then click Sign in, you will be able to replicate.
Screenshot:

An error occured
invalid_request
The error was: "redirect_uri" mismatch
Show request details
client_id=shp_dce6cf2d-d4dc-49f9-a1ce-d8e6497a7ffa
scope=openid email https://api.customers.com/auth/customer.graphql
response_type=code
redirect_uri=https://ar.waterdropfilter.com/account/authorize
state=1713412431297k14gvq68nxg
nonce=5f520f9420ed1d49cc04a4dff06ee5a4
code_challenge=52HnM1t3ax9aA4-XB6Hrl6eNH-XrbHpwfsmemSrnv-8
code_challenge_method=S256

Request ID: 47595cc6-ee86-44f9-8fec-d486d72652a2-1713412431

Splunk logs using index=catchall 47595cc6-ee86-44f9-8fec-d486d72652a2-1713412431
We see:

{:message=>"#<Rack::OAuth2::Server::Authorize::BadRequest: invalid_request :: \"redirect_uri\" mismatch>", :redirect=>false}
...
Completed 400 Bad Request in 29ms

Are you able to advise on a fix? From your discussion above, it sounds like there might be an issue with the merchant's use of the Customer Account API?

Internal
Ticket

@blittle @rfried

[rfried]

@FinnKinnear try reviewing this related discussion:
#1893 (reply in thread)