node.js - Shopify Public Embedded App (SPA) Auth Flow
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 feel like Shopify's documentation isn't super helpful (as it's all scattered and not very structured). I'm trying to avoid the shopify-cli tool as it's forcing me to use NextJS.
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 (https://shopify.dev/apps/tools/app-bridge/getting-started), 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
After the last step is where I'm getting stuck. If I redirect the user to client.ngrok.io, the app will open in a new window, not in the iframe. I've tried going to my test store's admin -> apps' page and I could render the app but the AppBridge isn't working as the
host parameter is never passed to the AppBridge instance.
Does anyone know how I should handle the redirect and how to obtain and pass the host query param back to the client after the /api/shopify-auth/callback step?
Thanks in advance for your help!
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.