0

I want to use the EmailJS service to send info from a contact form. However, I have several issues

  1. In the head section should add the following script

     <script type="text/javascript">
     (function() {
         emailjs.init('my-token');
     })();
 </script>

How can I hide that token? I have tried storing it in the .env file and accessing it with

emailjs.init(`${process.env.REACT_APP_INIT_KEY}`);

But that didn't work.

Ben
  • 139
  • 1
  • 2
  • 10
  • the only way to store API key is in backend language like nodejs ,php, etc. – Robin Hood May 27 '22 at 09:34
  • 1
    relevant answer for this https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app#answer-57103663 – Robin Hood May 27 '22 at 09:35
  • Hi @RobinHood thanks for sharing the relevant answer, which makes sense. I will look into that. – Ben May 27 '22 at 09:39

2 Answers2

1

You shouldn't. Secrets should be kept on the backend.

Using JavaScript obfuscation techniques to hide an API key on the frontend won't protect it.

Mahmoud
  • 9,729
  • 1
  • 36
  • 47
0

Create index.js file at the same level of your html file, and put this statement in it emailjs.init('my-token');, then call this file in your html page.

your code:

<script type="text/javascript">
     (function() {
         emailjs.init('my-token');
     })();
 </script>

the solution:

in index.js file

function() {
         emailjs.init('my-token');
     })();

call it in Html file

  <script type="text/javascript" src="index.js"></script>
omar
  • 3
  • 4