Making API calls from App Bridge to a NodeJS Backend

RyanPhillips
Shopify Partner
7 2 3

Hey everyone!

I've been chipping away at my first Shopify app over the past few weekends and while I have made decent progress, I'm currently hitting a wall with what feels like the last piece.

I followed the NodeJS/React guide and currently have:

  • A NodeJS backend (Koa)
  • A NextJS app that gets loaded inside the Shopify admin
  • A Mongo DB (Firebase)
  • A jQuery script that gets loaded in to the theme

My app injects a button element in to the FE of the Shopify store, which then (after some UI interactions) makes some API calls to my backend. These calls communicate with Shopify using the graphQL endpoint and also store a few bits and pieces in my Mongo DB. I am using an app proxy to make these calls and have a signature verification middleware running on those routes.

This part is working fine, I believe everything is authenticated correctly and while it took some trial and error, I'm happy with this part of the app.

The last part that I am trying to solve is saving the Shopify stores app settings in my DB. I have a basic "Settings" page as part of my NextJS app, which exposes a few text fields. I need to store this data in my DB and then retrieve it when the them loads my jQuery script. Unfortunately the NodeJS guide doesn't seem to touch on this process and my attempts at making the API calls are not working.

What is the recommended approach to communicating from the embedded NextJS app and my mongo DB? If I just fetch() it like normal, I get a 'Bad Request' response - I assume because it can't validate the HMAC.

Any help or pointers would be much appreciated!

Thank you,

Ryan

Edit: I am currently not using the new JWT method - I'm still using cookies.

Reply 1 (1)

RyanPhillips
Shopify Partner
7 2 3

Replying to myself from the future!

 

Short answer: Create an instance of AppBridge in the app and use the authenticatedFetch function that comes with app-bridge-utils to make requests to the BE. All the requests will have a HMAC that needs to be validated.

 

We no longer have the Koa backend - we now use AWS Lambda functions to handle the requests, validation etc. For those interested, we've written a more detailed breakdown of our auth/api approach on our blog.

https://www.shopside.com.au/post/from-auth-to-api-how-we-rethought-our-approach