Search for a command to run...
I am a developer from North Carolina. I have always been fascinated by the internet, and scince high school I have been trying to understand the magic behind it all. ECU Computer Science Graduate
No comments yet. Be the first to comment.
As a technical person, it’s always been easy for me to focus on hard skills, numbers, and statistics. This worked well through school, personal projects and smaller teams; environments where I could accomplish a ton on my own. But now I’m working in ...
I recently wrote an article detailing how to embed Yotpo’s loyalty widgets on a headless site. As I was writing it, I thought “there is no way that the reviews widget will be this troublesome”. I was wrong, it was just as troublesome. For 2 primary r...
Currently, I am working on turning a Liquid-based Shopify store into a headless Hydrogen-based store. Part of this was transferring Yotpo embedded forms to the new headless site. As for the loyalty and referrals portion of Yotpo, you can embed these ...
Within Shopify, store owners are restricted from having full control of their store’s checkout page. This is a safety feature on Shopify’s end, protectecting store owners and customers from accidentally (or purposely) exposing private information. Th...
HSTS is HTTPS Strict-Transport-Security. It enforces that only HTTPS is used across your web application, preventing unencrypted traffic being monitored and collected by unwanted entities. HSTS in Hydrogen It can be enabled in your Hydrogen app via r...
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.
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.
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.
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.