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

tomasdelaveau
Tourist
16 0 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

 

Then I arrive at https://undefined/admin/oauth/authorize?client_id=[client_id]&scope=read_products&redirect_uri=[ngro...

tomasdelaveau_1-1622770860537.png

 


The second time I load the homepage, it appears fine

tomasdelaveau_2-1622770860658.png

 


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

tomasdelaveau_3-1622770860605.png

 

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.

Replies 2 (2)

Luke_K
Shopify Staff
402 66 98

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.

 

 

 

| Shopify |
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
tomasdelaveau
Tourist
16 0 1

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 🙂