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:

1. User enters app at server.ngrok.io/api/shopify-auth/

2. 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

3. Shopify redirects back to server.ngrok.io/api/shopify-auth/callback

4. 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 thehost 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.