How to fix "redirect_uri" mismatch in Shopify Hydrogen

How to fix "redirect_uri" mismatch in Shopify Hydrogen

A common bug in Hydrogen is getting this "redirect_uri" mismatch error upon user sign-in.

The official Shopify documentation for user authentication is not very helpful on this. So I will be sharing my own, simple solution.

Step 1: Make sure you are using the Hydrogen dev environment, not localhost

For security reasons, Shopify does not allow authorization redirects to localhost URLs. Therefore, when you are testing user auth, you are going to want to do that through the Hydrogen app in your Shopify Admin (will be under 'sales channels' when installed)

For help with Hydrogen setup.

To access your hosted dev server through Hydrogen, click the Hydrogen sales channel, then the blue URL under your storefront name.

You should now see your current Hydrogen app in a dev environment, hosted through Oxygen rather than your local machine.

Step 2: Edit your Callback URI(s)

For some odd reason, Shopify makes you do this manually, rather than auto-configuring this for you.

Go to:Hydrogen sales channel > select storefront > storefront settings > Customer Account API > scroll down to Application Setup.

You will now see a list like so:

Yours will likely not have the 2nd URIs for callback and logout.

TO FIX:

Add your Hydrogen dev url as a callback URI, and append /account/authorize to the end of it.

Add the regular Hydrogen dev url as a Logout URI.

Add the regular Hydrogen dev url as a Javascript origin URI.

Remember the Hydrogen dev URL was the blue link below your listed storefront in the Hydrogen sales channel. And can also be seen at the top left of the settings page.

Honorable Mention

I originally found a similar solution here, from Github users eter5 and rfried . I found their fix, tweaked it so it worked for me, and added more detail.