When doing local development, live app url, not ngrok url being loaded in the embeded iframe

[RavenHursT]

So I'm trying to figure out how to develop an app locally, while it's also already been deployed and available to preview in my partners account.

I've set the site-url there to the heroku url that the app is being hosted on.

What's happening is, that when I run shopify app serve on my local, the ngrok url it gives me to start loading up the app, end up authenticating, but then the iframed app that results, is that of the hosted app, not my ngrok local development app.

I'm using a custom koa server behind a nextJS app, so I'm using @shopify/koa-shopify-auth... I started reading the source code when I saw that one of the first redirects I see in my browser in the auth process looks like this: https://[id].ngrok.io/auth/inline?shop=[store-name].myshopify.com&host=undefined

So I found to my surprise that the code that causes this redirect looks like this: https://github.com/Shopify/koa-shopify-auth/blob/aa2c4b57b75b117ee26b97d53419dd3f68934dea/src/auth/client/request-storage-access.ts#L2-L15

So the method for this client side redirect, requires the second parameter to be the host, I presume that should be loaded.

But it's undefined so it's just defaulting to the "live" app url.

The place it's getting called is here: https://github.com/Shopify/koa-shopify-auth/blob/aa2c4b57b75b117ee26b97d53419dd3f68934dea/src/auth/index.ts#L66

As you can see, it's only being called w/ a single argument, ctx, so that would explain the undefined.

Is this a bug? Or is there something I'm doing wrong?

Expected behavior

The app running locally that I launched w/ shopify app serve, being served via the ngrok url should be loaded in the app UI, not the "live" configured app url.

Actual behavior

The "live" app url is loaded in the iframe instead

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

1. Run app locally w/ shopify app serve
2. copy the ngrok url given in the console to start using the app
3. Observe the url of the resultant iframed app in the shop UI

Checklist

• [x ] Please delete the labels section before submitting your issue
• [x ] I have described this issue in a way that is actionable (if possible)

[RavenHursT]

As it stands, I've had to go into the partners site and set the app url for app to my local ngrok url, instead of the "live" heroku-hosted url and that has allowed me to do local development again.

But this is obviously not ideal, especially when I finally launch my app and need to do development while people are using it. 😕

[RavenHursT]

Ok.. I made a mistake w/ where requestStorageAccess was being called from. Unfortunately, using the same token name confused GitHub's reference search..

The actual function call is being made here:

https://github.com/Shopify/koa-shopify-auth/blob/aa2c4b57b75b117ee26b97d53419dd3f68934dea/src/auth/create-request-storage-access.ts#L54

But as you can see above it, host is supposed to be coming from query.host: https://github.com/Shopify/koa-shopify-auth/blob/aa2c4b57b75b117ee26b97d53419dd3f68934dea/src/auth/create-request-storage-access.ts#L29

BUT when I start the app w/ shopify app serve, it gives me this message:

⭑ To install and start using your app, open this URL in your browser:
https://[tunnelId].ngrok.io/auth?shop=[shopDomain]

As you can see, there's no &host= in the given URL.. 😞

So what is host supposed to be here? Why is it being passed as undefined? Should there be a check if host is falsey, then don't inject it in to the JS redirect code? Is it something optional in the Oauth flow? If it's required, then why doesn't shopify app serve mention it in the message outputted above?

[github-actions[bot]]

Note that this repo is no longer maintained and this issue will not be reviewed. Prefer the official JavaScript API library. If you still want to use Koa, see simple-koa-shopify-auth for a potential community solution.