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.
There are 2 primary fixes for this.
Set up a tunnel domain (using Ngrok etc).
Deploy changes on the Oxygen environment
This tutorial will cover #2
Read my article on setting up Ngrok for Hydrogen stores here.
Step 1: Make sure you are using the Oxygen 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)
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.