Build a Shopify App with Node and React - Build your user interface with Polaris

Retired Boards Appdev Billing
1

I’m in the the fourth part (Build your user interface with Polaris) of this tutorial.

The first time I attempt to load the App’s homepage, the following page appears for an instant:

tomasdelaveau_0-1622770860578.png
tomasdelaveau_0-1622770860578.png400×127 11.8 KB

Then I arrive at [https://undefined/admin/oauth/authorize?client_id=[client_id]&scope=read_products&redirect_uri=[ngro...](https://undefined/admin/oauth/authorize?client_id=[cleint_id]&scope=read_products&redirect_uri=[ngrok_tunnel]%2Fauth%2Fcallback&state=213686033183569&grant_options[]=per-user)

tomasdelaveau_1-1622770860537.png
tomasdelaveau_1-1622770860537.png400×187 11.5 KB

The second time I load the homepage, it appears fine

tomasdelaveau_2-1622770860658.png
tomasdelaveau_2-1622770860658.png399×208 13.9 KB

When I try to access [app_homepage]/annotated-layout, the same sequence follows, except that I arrive here instead:

tomasdelaveau_3-1622770860605.png
tomasdelaveau_3-1622770860605.png400×114 14.4 KB

Considering the connection limit inherent to Ngrok, I tried the same approach using Local Tunnel. And the same sequence of events took place, except that for annotated-layout I keep arriving at the ‘undefined’ error page after the flashing ‘enable cookies’ page. After four attempts, Shopify redirects to admin/apps with the following warning:

tomasdelaveau_4-1622770860554.png

But this happens even after I’ve added [store_domain].myshopify.com in Sites that can always use cookies in Chrome (v91.0.4472.77) settings.

I’ve checked the Ngrok/LocalTunnel address in the App setup ( in App URL and Allowed redirection URL(s) ) and in the .env file of the app. I also checked the annotated-layout page URL (compared to the filename in pages directory) and tried clearing cookies. By checking the server logs I can see that the request doesn’t even hit the server.

I tried using Safari (v14.0.2) and it doesn’t work either, with the difference that the browser stays on the ‘enable cookies’ instead of just flashing it. I’m using the latest version of koa-shopify-auth (4.1.3) and I’ve double-checked the code in server.js to verify it matches the one in the tutorial.

The last fix I attempted was adding the following inside the afterAuth(ctx) block (with and without the domain key):

[...]
const { shop, scope } = ctx.state.shopify;
  ctx.res.setHeader('Set-Cookie', cookie.serialize('shopOrigin', shop, {
    sameSite: 'none',
    secure: true,
    domain: process.env.SHOPIFY_APP_URL.replace(/https:\/\//,""),
  }))
ACTIVE_SHOPIFY_SHOPS[shop] = scope;
[...]

After doing this, instead of failing it just keeps redirecting to the apps homepage.

2

Hey @tomasdelaveau

To save you pain in the long run with getting this application spun up, you might like to pull the branch entitled “tutorial charge with billing api” which is here. Hope that helps.

In terms of the ngrok/local tunnel ‘too many connections’ message, you can run the command killall ngrok to kill ngrok connections. Either that or try lsof -i -P which will list all the ports that are active, and you can then kill the running processes from there.

3

Hi @Luke_K , I ended up going for a non-embedded app. I might have a look at that if I need to do an embedded one in the future. Thanks for your help :slightly_smiling_face:

1 Like