New Customer Account login shows unfriendly error page in some cases

[chrisvltn]

What is the location of your example repository?

https://github.com/Shopify/hydrogen/tree/main/templates/skeleton

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2025.7.3

What version of Remix are you using?

react-router@7.12.0

Steps to Reproduce

New Customer Account login process works fine most of the time, but in some specific cases it might show the Bad request: Unauthorized error page, which doesn't provide any support for the user to complete their login.

This could be better avoided by using an error boundary and asking the customer to try again, but there are ways we could fix the error automatically without user intervention.

How to reproduce - Version 1

1. Access the shop via a app webview (for example, via Instagram webview - this is the case we see the most)
2. Click on "Sign In" - You will go to the Shopify New Customer Account login page
3. In the webview options, select "Open in browser"
4. Finish the login process in the browser

You'll see the Bad request: Unauthorized error. Why? Because the state in the session was created in the webview. The browser has a different cookie jar, so it doesn't have the state in the session anymore, causing the authentication to fail.

How to reproduce - Version 2

1. Access the shop via the browser
2. Open the link in "Sign in" in a new tab (for example, cmd+click/ctrl+click it twice)
3. Close the last opened tab
4. Finish the login process in the first tab you opened

You'll see the Bad request: Unauthorized error. Why? Because the state is re-generated in the session every time you open the login page. As you finished the login process in the first tab, the state this tab has in the URL is not up-to-date anymore. So when you go back to the Hydrogen website, the authentication fails due to mismatch between the state in the session and the state in the URL.

Expected Behavior

The login to be successful in both cases.

Actual Behavior

Bad request: Unauthorized error appears.

Workaround

We replaced the Hydrogen's authorize function in the customerAccount client with a custom one that will generate server-side logs when this Bad request issue happens, allowing us to investigate deeper on why some of our customers were facing this issue.

We noticed that 40% of them bounced off when this happened, while the remaining 60% just tried logging in again.

In both scenarios, the user is already logged in in shopify.com, meaning that if they just click in "Sign in" again, they will be logged-in without having to enter their email and one-time password again.

This also means that if we just redirect the customer back to the login page, the state will be re-generated, and Shopify will send them back to the authorize route without any user intervention needed.

Something like:

// authorize route
export function loader({context}) {
  const response = await context.customerAccount.authorize();
  if (response.status === 500)
    return context.customerAccount.login();
  return response
}

Ideally, though, would still be good to have a similar logic directly in authorize, as this just applies to this state mismatch check, while authorize does many other checks to the customer authentication where an actual error makes more sense to appear.