search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.36k stars 262 forks source link

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

Closed rfried closed 4 months ago

rfried commented 5 months ago

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 commented 5 months ago

Duplicate: https://github.com/Shopify/hydrogen/discussions/1893#discussioncomment-8903168

rfried commented 5 months ago

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 commented 5 months ago

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. image

blittle commented 5 months ago

@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 commented 5 months ago

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

FinnKinnear commented 5 months ago

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: alt

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 commented 5 months ago

@FinnKinnear try reviewing this related discussion: https://github.com/Shopify/hydrogen/discussions/1893#discussioncomment-9100724