Shopify OAuth Flow

Need help APIs
1

Hello bubble community!

I’m trying to create a public Shopify app using bubble. As part of this, the app needs to perform a very specific OAuth flow that currently doesn’t appear possible with the OAuth2 User-Agent Flow in the Bubble API Connector plugin (due to the redirect and endpoint urls needing to be dynamic).

Here are the steps that should happen to complete the OAuth flow if a merchant goes to install the app on their store:

  1. On the Shopify app store, a merchant clicks ‘install’ on the app page.
  2. A GET request is sent to the app URL (specified when setting up the app in the Shopify partners account, e.g. myapp.bubbleapps.io)
  3. App verifies authenticity of request using hmac value provided (using HMAC-SHA256 hash function)
  4. App redirects the merchant to an install link (e.g. https://,shop,.myshopify.com/admin/oauth/authorize?client_id=,api_key,&scope=,scopes,&redirect_uri=,redirect_uri,&state=,nonce,&grant_options[]=,access_mode,). This will then take the merchant to a page where they can approve the app install.
  5. When the merchant approves the app install, the authorisation code is passed in the confirmation redirect (the redirect_uri specified in the call from the previous step).
  6. App verifies authenticity of request again, including hmac, nonce, and shop parameters
  7. App sends POST request to get a permanent access token (e.g. POST https://,shop,.myshopify.com/admin/oauth/access_token) 8. The access token is returned in JSON format and now the app can make authenticated request to the Shopify APIs.

Full Shopify documentation for this flow can be found here.

I’ve been able to test and successfully complete the later half of the flow (from step 4, including hmac verification) within my app, but I’m now struggling to deal with the incoming request (step 2). I’ve read on the forums about some people setting up subdomain redirects (see here but this is quite a technical approach that I’d not like to go down unless I really need to.

Would anyone have any guidance for how I might be able to set up my app to properly handle this OAuth flow? Specifically, how I might handle the incoming GET request (step 2) if I have the app URL set as my apps index (i.e. myapp.bubbleapps.io).

Any help would be greatly appreciated!

Many thanks,
Adam

3 Likes