# Environment Variables **URL:** \ **Category:** Support\ **Tags:** environment-vars\ **Created:** [April 10, 2023, 10:45pm UTC](https://answers.netlify.com/t/environment-variables/89851 "2023-04-10T22:45:38Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![adamprinciotta](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/adamprinciotta/32/41668_2.png) [@adamprinciotta](https://answers.netlify.com/u/adamprinciotta)\ **Post date:** [April 10, 2023, 10:45pm UTC](https://answers.netlify.com/t/environment-variables/89851/1 "2023-04-10T22:45:38Z")
I have tried looking through as many resources as possible but I cannot get it to work. I set up a way to send emails with emailjs, and I even did this in a very similar way for a different site a couple weeks ago. However, when I set up the environment variables, they are always undefined, even when it is very clear that I have set them up. Here is where I am doing the call with the env emailjs.send( process.env.REACT\_APP\_SERVICE\_ID, “template\_sq70hbr”, { name: formData.name, city: formData.city, state: formData.state, homePhone: formData.homePhone, cellPhone: formData.cellPhone, email: formData.email, }, process.env.REACT\_APP\_PUBLIC\_KEY ); They are defined clearly here. And I tried importing from a .env file which also failed to change the results. ![image](https://global.discourse-cdn.com/netlify/original/3X/8/9/89d36ad7053570251dc06339f4f77d4797ef410b.png) This is the error I get. However when testing locally without the .env but rather with the strings themselves, it works perfectly well. ![image](https://global.discourse-cdn.com/netlify/original/3X/b/c/bca0f973444ee7225a939d1b16789a3651b8620f.png) I also tried declaring them in the build command (replaced the actual variables with \*) REACT\_APP\_SERVICE\_ID = \* REACT\_APP\_PUBLIC\_KEY = \* npm run build I created the app with vite if that changes anything. Please let me know if there is anything else I can try. Thank you ---
**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\ **Post date:** [April 10, 2023, 11:04pm UTC](https://answers.netlify.com/t/environment-variables/89851/2 "2023-04-10T23:04:02Z")
Can you share the link for your site. ---
**Author:** ![adamprinciotta](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/adamprinciotta/32/41668_2.png) [@adamprinciotta](https://answers.netlify.com/u/adamprinciotta)\ **Post date:** [April 11, 2023, 1:39am UTC](https://answers.netlify.com/t/environment-variables/89851/3 "2023-04-11T01:39:05Z")
[https://inspiring-figolla-f4d44c.netlify.app/](https://inspiring-figolla-f4d44c.netlify.app/) ---
**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\ **Post date:** [April 11, 2023, 2:18am UTC](https://answers.netlify.com/t/environment-variables/89851/4 "2023-04-11T02:18:45Z")
Indeed, I see `REACT_APP_SERVICE_ID` and `REACT_APP_PUBLIC_KEY` embedded in the code instead of the values of the variables. Do check out > [@\[Support Guide\] Using environment variables on Netlify correctly](https://answers.netlify.com/t/support-guide-using-environment-variables-on-netlify-correctly/267): > > Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or [via netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/). You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes… If using Vite, you might also check out the Vite [Env Variables](https://vitejs.dev/guide/env-and-mode.html) documentation. I would advise against doing what you currently are, as those private variables end up exposed which means anyone could potentially use your API KEY to send emails. Better to hide sensitive keys/tokens in a function. See > [@\[Support Guide\] How do I keep my API keys/tokens safe using Netlify Functions?](https://answers.netlify.com/t/support-guide-how-do-i-keep-my-api-keys-tokens-safe-using-netlify-functions/293): > > Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun… ---
**Author:** ![adamprinciotta](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/adamprinciotta/32/41668_2.png) [@adamprinciotta](https://answers.netlify.com/u/adamprinciotta)\ **Post date:** [April 11, 2023, 2:22pm UTC](https://answers.netlify.com/t/environment-variables/89851/5 "2023-04-11T14:22:50Z")
I have already looked through the first post, but I either misunderstood how to do it properly or it would throw errors. If I tried to add the variables as part of the build command, it would not let me. Also, correct me if I’m wrong, but I thought the point of using environment variables was so that I could use a variable in my client side code, but the actual values are stored in Netlify itself so that it wouldn’t be accessible. I was hoping that Netlify would act as the server protecting the API information. Am I mistaken? From the second post it says “If you just need a token during build, you can use our Environment Variables build settings to set a value for a `$API_TOKEN` environment variable, and reference it during build. Nearly all headless CMS’s use this pattern, for instance - Netlify knows how to access your data from Contentful or Sanity, and pulls it in during build. You may not need the token at browse time, and so it isn’t in your HTML output, and you’re safe!” I am trying to do this, but does it need to be specifically named $API\_TOKEN as the environment variable and then referenced through that? I am confused as to why I declared the environment variables inside of Netlify but can’t access them. I know they should be protected and that is what I am trying to do, but please let me know why it would not work the way I am trying if I am wrong ---
**Author:** ![jasiqli](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jasiqli/32/38220_2.png) [@jasiqli](https://answers.netlify.com/u/jasiqli)\ **Post date:** [April 11, 2023, 5:51pm UTC](https://answers.netlify.com/t/environment-variables/89851/6 "2023-04-11T17:51:38Z")
> [@adamprinciotta](#): > > I thought the point of using environment variables was so that I could use a variable in my client side code, but the actual values are stored in Netlify itself so that it wouldn’t be accessible. I was hoping that Netlify would act as the server protecting the API information. Am I mistaken? Yes, you are mistaken in this instance. As the Create React App [Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables) documentation states > **The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as [described here](https://create-react-app.dev/docs/title-and-meta-tags#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. The Vite documentation previously linked also states the same > During production, these env variables are **statically replaced**. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work. The second support guide linked above talks about using a function to make the API call and returning the data to the front-end. This way, the function is consuming the environment variables and they aren’t exposed to the front-end. This is the only way to keep them out of front-end code. ---
**Author:** ![adamprinciotta](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/adamprinciotta/32/41668_2.png) [@adamprinciotta](https://answers.netlify.com/u/adamprinciotta)\ **Post date:** [April 11, 2023, 10:25pm UTC](https://answers.netlify.com/t/environment-variables/89851/7 "2023-04-11T22:25:13Z")
Thank you for clarifying