Unable to pass additional params/state to app store install URL

[optik]

We have a public app that allows our users to connect Shopify stores to their store(s) on our e-com platform (let's call it OurApp).

1. Our user can have many stores in OurApp.
2. Our user can choose to connect any of their stores to a store in Shopify
3. The authorization enables product and order sync etc

So far, the authorization started with us asking the user for their store name and then passing the OurApp's store id in the oauth state of the permissions grant URL constructed as per the doc. However, we've been requested to change this as per the below:

All Applications may only be installed or otherwise initiated directly on or through the Shopify Service. Your app must not request manual entry of the myshopify.com URL or shop's domain during the installation or configuration flow.

The "Shopify Service" entry point, we assume, is https://apps.shopify.com/<ourapp>/install.
Our problem is that we cannot find a documented way of passing any extra information to this entry point, which breaks our existing UX. Obviously, we cannot construct the redirect URL to contain the necessary data, as it is fixed in the app definition. 
One of the solutions would be to make the authorization flow stateful eg. by storing the id of the store to connect in OurApp (eg. in a cookie, session), but that seems far from clean and prone to issues. 
Has anyone found themselves in a similar situation and found a solution? 

[Liam · Accepted solution]

Hi Optik,

The OAuth process allows you to pass a state parameter (you can see an example of that in our docs), which Shopify returns to you unmodified in the callback. This parameter is typically used for CSRF protection, but it can also be used to pass a short piece of information, such as an identifier for the user's store in OurApp. This approach is straightforward and secure but does require that you initiate the OAuth process from a context where you know which OurApp store is being linked.

After the Shopify store owner installs your app, you should redirect them to a configuration page within your app. On this page, you can ask them to log in to OurApp (if they are not already) and select the store they want to sync. 

Hope this helps,

[optik]

Hi Liam,
Thanks for your answer.
We've been doing exactly that ie. pushing our data through oauth with state param, starting from this url:
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={client_id}&scope={scopes}&redirect_uri...

The problem is, you need to get "shop" from the user, which is supposedly a no-no nowadays, so instead of asking the user for a shop name, we direct them to Shopify to select their Shopify store (https://apps.shopify.com/<ourapp>/install) but any params we add to that URL are not passed further down the Oauth flow.

We were hoping that there was some way of passing state (params? cookies? headers?) starting with this URL.

[tha_n]

Hey Optik,
Did you find out how to do this?
I have landed here searching for the solution of same problem, i.e. "How do I pass extra information like store name on which the store owner installs my app(built using shopify remix), email etc., to the redirect url of my platform(built using nextjs), so that I can authenticate using the  store name?

[pia1]

Hi Tha_n,

Did you find out how to do this?

We're encountering a similar problem as well.

We would greatly appreciate it if you could share the solution you found, if any.

[eswaran04]

Hi @Liam ,

The answer provided is possible regarding the authorization part. However, initially, we have the installation link where we obtain the shop name, and at this stage, we cannot add any additional parameters.

For example:

https://admin.shopify.com/oauth/install_custom_app?client_id=&no_redirect=true&signature=

In this link, we cannot add any extra parameters.