I'm trying to build an embedded public app for Shopify using NodeJS (Express) backend and Svelte SPA frontend but am struggling to understand the overall auth flow. I'm trying to avoid the shopify-cli tool as it's forcing me to use NextJS and I prefer to use Svelte.
The current app structure is as follows:
server.ngrok.io is the NodeJS /Express app
client.ngrok.io is a separate client side only app using Svelte (no server side rendering)
My app currently implements the following flow:
User enters app at server.ngrok.io/api/shopify-auth/
server.ngrok.io/api/shopify-auth/ redirects user to client.ngrok.io/install which is essentially just a skeleton Svelte page with the iframe escaping script per Shopify's App Bridge guide, which redirects the user to the Shopify permission page
Shopify redirects back to server.ngrok.io/api/shopify-auth/callback
server.ngrok.io/api/shopify-auth/callback exchanges temp token for a permanent one, stores perm in my db
However, I'm encountering the following problem:
Appreciate it if anyone can help me solve both of these issues!
If your application url is set to server.ngrok.io, then in all likelihood Shopify won't recognize redirects to client.ngrok.io. It may be the cause of your problem. Both your server and your web app should live on the same domain. You'd have to serve the Svelte app from your Node App instead of them running on two separate instances.
Hope that helps!
Hi @alanthai ,
Thanks for your response. I get that if I serve it from my nodejs app then it (most likely) will work. But in a dev environment, when I need hot reloading etc, rebuilding the app every time I make a change (even a minor one) would be a major downside to the DX, no? Is there a better solution to this?
You could try reverse proxying requests from your backend to your front end. If you're familiar with nginx, that would be viable. A quick Google search gives me this node alternative, although I haven't tried it myself https://www.npmjs.com/package/http-proxy