Problems getting started using React and Node

Highlighted
New Member
1 0 0

I'm struggling a bit to get my first embedded app working properly after trying several different approaches with React and Node.

I suspect the problem is related to the authentication flow being 'in-flux' with browser changes related to cookies.  I'm able to build an app and make it functional, but I run into different problems with different browsers.  These don't stop me from working on the app, but I'm hesitant to go too far in development when there seem to be fundamental issues with the app loading.  Some approaches work fine in Safari on Mac (but with console errors) and fail on Chrome and mobile.  Some approaches work on Safari and Chrome (with console errors), but fail on mobile.

I'm still a ways out from preparing the app for publication, so I'm fine waiting a bit for the newer JWT authentication stuff to be finalized, but I want to be sure the approach I'm using to build the app is one that can be updated to work with the new stuff.

Over the last few days, I've stopped working on my app, and have been trying different tutorials to see if I can get any of them working without errors.

Here's what I've tried:

  • Creating a sample React+Node app (using NextJS) using the Shopify CLI v1.1.0, following the demo from 8/19/20 on the YouTube channel (https://www.youtube.com/watch?v=PIXN032XJJ8).  Runs on MacOS Safari and Chrome, but gives multiple 400 errors on the /auth route (no shop parameter) on the console.  Doesn't run at all on mobile (iPad).  The app does appear to install and run on Safari/Chrome, just gives errors.  Note that this test app followed the tutorial exactly, and has no additional code.  It runs, but generates lots of console errors and completely fails on an iPad.  (Screenshot below is just from a simple load of the app in Safari, despite the errors, it appears to function normally.)
  • Screen Shot 2020-08-26 at 11.47.12 AM.png
  • Creating a React+Node app that uses koa-shopify-auth and delivers a seperately built React frontend (delivered using koa-static) .  Runs in MacOS Safari and is functional, but with the 400 errors as above on the console.  Doesn't run on mobile Safari (redirect loop).  Doesn't run on Chrome.  This approach seems to work fine if the static delivery is just an HTML page, but as soon as it delivers a React app, it generates errors.  (Even if the React app is stripped down to just displaying a single node like an H1.)
  • Also tried every other React+Node tutorial and boilerplate I could find, including the one in the Shopify docs, all with similar problems (400 errors, fails on mobile, etc.)

I'd prefer not to use NextJS (just a personal preference), but if that is the recommended method, I can deal with that.

So my questions are...

  • Since it looks like using the Shopify CLI to create a React+Node+NextJS app is a recommended approach, should I use that instead of building a separate React front end?
  • Should I just ignore the 400 errors on the console for now, and ignore the failure on mobile, and assume that at some point there will be clear documentation or updates to address those?
  • Are these problems something that nobody else is getting (and the tutorials are working fine for others), and I'm doing something horribly wrong?

I realize it's not really possible to diagnose my specific problem without seeing the code.  I guess right now my goal is to determine the preferred approach for developing an app (use NextJS or not?), and if the tutorial code should actually run without these errors. (Or if I should ignore the errors for now)

 

0 Likes
Highlighted
Explorer
41 9 9

Hey mate

I've seen some people have the same issue as I don't believe the shopify cli create script had been updated

Chrome blocked cross site cookies so you'll need to add the sameSite attribute to your cookie in server.js

If you're getting an error in your browser saying shopOrigin is not loaded. Chances are the entire cookie was discarded by chrome. 

Since our apps run in shopify and do not originate from the shopify domain we have some problems. But we can fix.

https://shopify.dev/tutorials/migrate-your-app-to-support-samesite-cookies

 

0 Likes