[FIXED] How to pass query string from Shopify to an embedded app?

Issue

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

This image shows how my app behaves

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.

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.

Solution

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

Answered By - Ivor

Answer Checked By - Terry (PHPFixing Volunteer)