Search for a command to run...
How to Use Ngrok Tunnel Domain for Hydrogen Authentication Locally
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...
On this page
One thing you will learn when working with Hydrogen, is the strict security policies surrounding the Shopify Customer Account API. This is Shopify’s new API to handle customer authentication (released August 2023, and now pre-configured by default in new Hydrogen setups).
These security policies will prevent you from running any sort of customer account authentication on localhost. Shopify does not support any http address being authorized to utilize the customer account API. You will see errors like so if you try to run any customer API endpoints on localhost:
In summary, we are going to set up a https tunnel domain via ngrok, to run your app locally on a static https address. If this sounds new to you, I promise this is not as complicated as it sounds.
Here are the steps we are going to take throughout this article.
Download ngrok
Create static ngrok domain
Connect local dev server to ngrok domain
Authorize your new ngrok setup
Visit ngrok and create an account
For Windows
You should see a terminal command under your download instructions to add your ngrok auth token. This can be run in your terminal anywhere, since ngrok is installed globally.
ngrok config add-authtoken <your-token-here>
In your ngrok dashboard, select:
This will create a new static domain for you to use. This domain will serve as your new local dev server url.
This domain will be the primary component throughout the rest of this tutorial.
Here are the steps for connecting your local Hydrogen setup to your new ngrok url
Run your Hydrogen app locally via npm run dev
In a new terminal window, connect your ngrok domain to the local port you are running your Hydrogen app on (3000 for example).
ngrok http --domain=<your-ngrok-domain> 3000
Now when you refresh, you can access the dev environment through your ngrok domain.
Keep in mind, that anything running on port 3000 now can be accessed via this url.
Now that you have connected your ngrok domain to your local Hydrogen dev server, we need to let Hydrogen and Shopify know this url is safe to use.
Navigate to your CSP setup in Hydrogen. Mine is in the file entry.server.jsx. Add the following code to your CSP:
const {nonce, header, NonceProvider} = createContentSecurityPolicy({
connectSrc: [
'wss://<your-ngrok-domain>.app:*'
],
// rest of CSP
})
If you don’t understand the concept of CSPs, feel free to read my breakdown of them here
In your Shopify admin, navigate to the following:
Sales Channels > Hydrogen > Select your Hydrogen Store > Storefront Settings > Customer Account API
Scroll down till you see the Application Setup panel. Enter the ngrok url in the following places
Every yellow box denotes where your ngrok url should be placed. Don’t forget to add your authorization endpoint to the Callback URI field. Mine is /account/authorize.
Everything should work fine now! Start using customer authentication on your Hydrogen local evnironment!
In the future, I plan on writing on how to ditch the customer account API completely. These setups require a ton of configuration, and the login and authorize endpoints are not exposed publicly to store owners. Therefore, you can not have a custom login form with this setup.
Hope you enjoyed! Please leave a like if this informed you or helped. And feel free to reach out to me if you ever have any questions! I will answer them personally.
Cover Photo by GuerrillaBuzz on Unsplash