Github Secrets to Vanilla JS files

Question

I am building a static website, HTML, CSS, and Vanilla JS. I came to a point where I have to use MailChamp to send emails to the client whenever there is a form submission. Not so tricky, docs are very clear on how to do an API call. But I need to send an API_KEY with every request. Which is a problem. I do not want to save this secret key in the code. I have added it as a secret on github repo. But I am not sure how I can access it on Vanilla JS files. I tried the following,

process.env.API_KEY and API_KEY

I am getting this error, sendEmail.js:1 Uncaught ReferenceError: process is not defined

Which makes sense, because it's a static website. But I cannot think of any other way. If it was a node process it would have been very simple :/

---

Let's say I create an API endpoint, and the server where I can securely save API_KEY, how would I authenticate the request coming from the front-end/static website? Assuming that I cannot securely save the token on the client side.

Answer 1

There is no way to do it the way you want, i.e. with pure front end (FE) because it would mean that you need to send your secrets to them. Whatever you send to the front end will always be accessible to your users, so it's not safe. What you need to have is the back-end (BE), some kind of server that will receive an async call from the FE, connect to the external API and do whatever you want it to do, and then send some kind of confirmation to the FE that the process was successful. Now, the BE will know your secrets, and this is fine because you control it and the users won't have access to it directly.

Now, you do not always need a full-blown application for that, some people are getting stuff done with platforms like Firebase, that can handle authentication of users for example for you.