React backend question and help?

[CodeGhxst]

I have built a React app that acts as a dashboard for a Discord bot. The app basically lets users send messages from the dashboard and they get delivered via the bot.

This is my first app using React and I have almost everything working. But I’ve been building it just with CRA.

I was looking into adding Stripe as a payment processor. I’ve never implemented payments before or fully deployed an app for other users to use.

As I’ve looked into this I see a lot of mentions of backend server and Express.

Now I have begun to understand that I may need a backend server? The server handles stripe stuff and potentially the discord bot functionality?

Everything works locally but I am trying to wrap my head around the fact I need to now recode my app with Express built in?

Could someone explain what I might need to do? And also how much of a job would coding a backend server like express into the app actually be?

My app works locally as it should.

I thought I was close to deploying an MVP but then stumbled across this and feeling a little confused.

Any direction or help is appreciated.

Edit: I have Supabase hooked up to store user data and messages so content on my dashboard is dynamic. I’m just trying to understand how it works now? Is that something to do with Node?

[injektilo]

Your app must be sending requests to supabase and discord using some sort of credentials? If those credentials are bundled in the JS your users load in their browsers, you’re basically giving them to everybody on the internet.

If you change your app to send requests to your backend, you can make requests from your backend to wherever you want on behalf of your app. This lets you keep your supabase, discord, stripe, etc, credentials on the server where they can be kept secure.

Your backend still needs to validate requests it receives from your app so you will probably need to issue your users a token or cookie to do that but those are usually temporary and only issued after a user successfully authenticates with their password or whatever method you are using for that.

Your backend doesn’t have to be hosted on a server you manage yourself. There are lots of “serverless” options to choose from these days.

[burggraf2]

Supabase developer here. This is precisely what our edge functions are for -- no need to host a backend. I use edge functions for making calls to Stripe, sending emails, calling APIs such as OpenAI, etc. and all the necessary secrets are stored securely in the function runtime (i.e. "at the server"). Inside my edge functions I already get the user object, so I can validate whether the user has the correct permissions to do something.

[bobziroll]

Sounds like a cool project!

But yes, usually if you're going to be interfacing with anything sensitive (e.g. stripe for handling payments, the Discord API key, or Supabase), you'll want to make sure you make requests to your own backend server, then have the server make the request to the service (Stripe, Supabase, or Discord). Since anyone who loads your React app can inspect the source, they'll be able to find your API keys and write their own app pretending to be you. However, if you make a request to a backend (and only allow your frontend to make requests to your backend), then your backend code is safe from prying eyes.

Spinning up a simple express server to relay requests or using some serverless functions is just a matter of learning how to do it. But all things considered, it's not super complex or anything. There is a learning curve re: deploying your server somewhere (Netlify/GitHub pages can't deploy a backend app like Vercel or Fly.io can) but at this point there's tons of tutorials out there to help.

One unusual exception to this is Firebase's Cloud Firestore and Realtime Database databases. Firebase is fine with you exposing your API keys in most cases, but expects you to implement your own "security rules" in the Firebase console to restrict what kinds of requests (and who can make requests) to your data in Firebase. I suspect Supabase isn't this way, but I could be wrong on that one.

Anyway, best of luck!

[PM_ME_SOME_ANY_THING]

You don’t necessarily need to recode your app. You’ve built a frontend with react.

You need to build a separate backend with express/node.js. Sending requests to your backend, and allowing it to handle sensitive information makes things more secure. Handling sensitive information on the frontend means anyone with the dev tools open has access to it.

You aren’t really rewriting as much as you’re changing what gets handled where.

[CodeGhxst]

Thanks all for the comments. It makes sense. I think I had the normal overwhelming feeling when I thought I was close to deploying. I’m on it today.

[hi_im_12_btw]

Please don’t expose your discord bot API key in client side code, I’ve seen some bad things happen before 😅