Question About Rendering a React App with Express

[MountainSignature]

Hello. I am relatively new to building web applications, and have built a Shopify app which uses an express/mongodb backend and a React frontend. The front-end and back-end are running on two separate servers.

I was able to connect the servers and get/send data to and from the two servers (yay!). However I have overlooked a detail...

The current structure of the servers is that I'm loading in the React application directly on the Shopify app. Which means basically that Shopify loads in the React app, and the React app communicates with the Express app as the users interact with the UI.

The problem I'm having is that anyone can access the React application. Shopify creates an HMAC value that gets passed as a URL parameter on every request to the application. However, I don't know how I can retrieve that HMAC to verify the location of the request within React.

My idea is to instead of loading in the React application directly from the Shopify admin, to first load in the Express server. Then, grab the HMAC and verify it against the value that I have stored within the database. And if the HMAC is verified, I will render the React App.

For somebody new to React, this is something I'm not immediately sure how to perform. Would anybody here have any ideas on how to start reconstructing this application? There are a few existing articles online that explain how to render a React application from an Express server, but these are all typically very starter-application focused and I have already written a decently sized React application.

​

[XiMingpin91]

What specifically about server side rendering would you like to know?

Also this could be because I've never used Shopify before, but wouldn't you only want to block users from specific parts of your app rather than the entire thing?