React/Node tutorial: Multiple stores using the same app

Highlighted
Shopify Partner
20 2 14

Hi all! First off, I am relatively new to Shopify app development and also Node / React. Because of this, I've been following the Node and React app tutorial. My app is almost done, and I've moved my focus to QA and bug fixing.

 

One thing that I can't seem to figure out is how to use the same app on multiple stores. Whenever I open my app from my second store, I see data from the first store. I think this is because of the way the shopOrigin cookie is set in server.js:

ctx.cookies.set('shopOrigin', shop, { httpOnly: false });

 

This code only seems to run once the app initially auths. Is there a way to detect when the shopOrigin cookie doesn't match up with the current store? I've been struggling this for a few days now and I can't seem to figure it out.

 

Another question that is somewhat related, doesn't this cookie expire in 30 days? Do I need to renew it somehow? Will my app still be able to hit the Shopify API once this cookie expires?

 

Any help would be very much appreciated!

0 Likes
Highlighted
Shopify Partner
20 2 14

I was able to solve this problem, finally! Here's how I did it, in case anyone comes across the same problem:

  server.keys = [SHOPIFY_API_SECRET_KEY];

  router.get('/', async (ctx, next) => {
    if(ctx.request.url && ctx.request.url.match(/shop=([^&]+)/) && ctx.request.url.match(/shop=([^&]+)/)[1] != ctx.session.shop) {
      const referer = ctx.request.url.match(/shop=([^&]+)/)[1];
      ctx.session.shop = referer;
      ctx.session.accessToken = await getAccessTokenForShop(referer);
      ctx.cookies.set('shopOrigin', referer, { httpOnly: false });
      return ctx.redirect('/');
    } else {
      await next();
    }
  });

  router.get('/', processPayment);
4 Likes
Highlighted
Shopify Partner
11 0 4

I can't believe this information isn't in the tutorials or docs anywhere. Seems like something that all apps have to handle. This is the first solution I have found that actually detects if a shop is different from the last shop saved in the session, thanks so much! 

 

I am curious about the code for getting the new access token, if you are able to share that, I would greatly appreciate it! 

0 Likes
Highlighted

hi, Thresher, thanks for share this solution.  But there is still problem in some situation like this: 

the customer open the first store and operate something in the app,  stay in one of the pages not index,  and then open the second store, the shopOrigin will be update by this code when visit app index(/). Now, the shopOrigin is the second store, when the customer return to the first store's app, it will get the wrong shopOrigin, because the shopOrigin is shared in cookies.

It looks like a shopify's bug, I think all app developer will meet it and handle it necessary.

 

My solution is pass on the 'shop' query string in every url you need,  but there was a little trouble when you handle it. I hope shopify will give a good solution for us.

 

1 Like
Highlighted
Excursionist
34 1 5

I'd be interested to hear from anyone at Shopify for the best/recommended way to solve this. 

 

Also thanks @Thresher for sharing your solution once you found it. Too often do people end the thread saying "figured it out" (without posting the solution) and then disappearing into the abyss.

 

 

0 Likes
Highlighted
Shopify Partner
21 2 20

I too would love to hear from @Shopify staff how to best do this, both for koa router (@Thresher's solution) and for graphQLProxy requests.

 

Also, @Thresher, could you explain your

getAccessTokenForShop(referer)

call?  Is this just your own storage of sites and tokens?

 

0 Likes
Highlighted
Shopify Partner
57 0 20

Is there no official solution to this multishop cookie issue? Javascript? PHP? Anything? This has been a problem for my apps over 2 years. Merchant sees app data from Shop A in Shop B. Can Shopify just pass the myshopify domain every time they click on the launch app button? Just lost a customer over this.

0 Likes