0

I'm building a Shopify app with Next.js and I need to grab the query string so I can check in getServerSideProps the identity of the merchant (bear in mind that Cookies are not recommended for Shopify apps)

When visiting some apps I noticed some of them are getting the query string passed down from Shopify in each request.

This image shows how it should look on each request

Shopify app

This image shows how my app behaves

enter image description here

In this image you can see that when you hover the routes no query strings are present, meaning that are passed somehow by the parent app.

enter image description here

As of right now I'm using a Cookie to pass the shopOrigin but I feel like it's not necessary if somehow I'm able to get the query string in each request, also with the HMAC I will be able to verify that the requests are coming from Shopify.

2 Answers 2

0

The solution was pretty straightforward.

Shopify provides a TitleBar AppBridge component that you can use to to handle the App's navigation. What it does is that on each route change it reloads the iframe and the hmac, shop, code and timestamp are coming in the request. It's a tad slower then client side routing but it works as expected.

In order to use it you just need to go to: Partner's dashboard / Your App / Extensions / Embedded App (click Manage) / Navigation (click Configure) and add navigation links, then you just need to import TitleBar from app-bridge-react and put it in index.js

enter image description here

-1

Any calls to your App originating from Shopify properly provide the shop parameter when they make requests. In your own App calls to itself, you would also likely be using the shop name as a query string value.

Note that you are still able to validate your sessions internally using a cookie, you just don't do it via the third-party route, outside the iframe, like we used to. Shopify has plenty of documentation on how to properly authenticate, and construct Apps, check them out. They even give you a working Node App to play with, so you can ensure you get it right.

6
  • Thank you. Unfortunately their tutorials are outdated and the Node.js app example uses koa-shopify-auth which utilizes cookies, Shopify is moving towards cookie-less authentication. Also, Shopify passes the shop param on the initial request but I'm using an SPA, more specifically Next.js and my app requires the shop param to be persisted across route changes.
    – Ivor
    Commented Dec 28, 2020 at 14:36
  • You will figure it out. It is not that complex. You are making a mountain out of a molehill! The pattern is pretty simple. You have a route into your App that is not authenticated, where you evaluate the incoming params. If the request is not logged in, log it in. Once a logged in request hits your App, ensure you append a JWT token if you want to go that route to all outgoing requests, so any incoming ones use that. Or, just use cookies old school style IN YOUR APP and you're in business. Nothing new, or terrible for you to deal with. Commented Dec 28, 2020 at 16:43
  • Sadly Shopify doesn't like cookies in embedded apps. Ref: twitter.com/ShopifyDevs/status/1342130667694546944 Thanks for your suggestion, though. I'll keep looking.
    – Ivor
    Commented Dec 29, 2020 at 12:58
  • Only the cookies passed from outside the iframe. Your own internal App cookies are fine. Commented Dec 29, 2020 at 17:18
  • "leave them off your embedded apps" doesn't sound like we can leave them in our internal App. My app is embedded. :)
    – Ivor
    Commented Dec 29, 2020 at 17:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.