# Should API keys be kept secret? How?

**URL:** <https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907>\
**Category:** General\
**Created:** [March 15, 2017, 9:42am UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907 "2017-03-15T09:42:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![marekjedlinski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marekjedlinski/32/162819_2.png) [@marekjedlinski](https://forum.freecodecamp.org/u/marekjedlinski)\
**Post date:** [March 15, 2017, 9:42am UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/1 "2017-03-15T09:42:25Z")

</div>

Instructions for the “Local Weather” challenge read:

> Normally you want to avoid exposing API keys on CodePen, but we haven’t been able to find a keyless API for weather.

This is understood, but I am curious: what is the regular, recommended practice for API keys? As long as you’re making an ajax call from JavaScript, the API key will be visible in the html source of the page. But the only way to hide the key would be to make all such calls from the server side, which defeats the purpose.

I imagine if someone took somebody else’s paid-for key and used it, it could incur costs or drive the original site over its API quota. So what is typically done?

---

<div class="post-metadata">

**Author:** ![AndreiCalazans](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/andreicalazans/32/16199_2.png) [@AndreiCalazans](https://forum.freecodecamp.org/u/AndreiCalazans)\
**Post date:** [March 15, 2017, 9:52am UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/2 "2017-03-15T09:52:48Z")

</div>

well i dont know how to do that if you use codepen like most do,  
but on actual development we put the API keys in environmental variables.  
that is the safe way to do this.

now how to do this will depend on what language you are using (Node , ruby , etc)

---

<div class="post-metadata">

**Author:** ![jenovs](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jenovs/32/60963_2.png) [@jenovs](https://forum.freecodecamp.org/u/jenovs)\
**Post date:** [March 15, 2017, 10:20am UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/3 "2017-03-15T10:20:42Z")

</div>

> [@marekjedlinski](#):
>
> what is the regular, recommended practice for API keys?

You answered your own question:

> [@marekjedlinski](#):
>
> only way to hide the key would be to make all such calls from the server side

If you want to hide your api key, you make a your own api endpoint (on the server) which calls the original api with the key, and your frontend app calls your api. Also in your api settings you allow for it to be called only from your website (you may have seen “Access-Control-Allow-Origin Error” in console - it’s when you try to call an api which you are not allowed).

---

<div class="post-metadata">

**Author:** ![AmirF27](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/amirf27/32/30721_2.png) [@AmirF27](https://forum.freecodecamp.org/u/AmirF27)\
**Post date:** [March 15, 2017, 11:04am UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/4 "2017-03-15T11:04:20Z")

</div>

Well I personally did an edX course called CS50, and in the assignments they always used environment variables for the API keys, so that’s what I’m doing in the final project of the course. I don’t know if this is the standard way to do it, but it does make sense. Also, since it’s a variable, you can change it without much issue, which is convenient.

---

<div class="post-metadata">

**Author:** ![sw-yx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sw-yx/32/43914_2.png) [@sw-yx](https://forum.freecodecamp.org/u/sw-yx)\
**Post date:** [March 15, 2017, 2:26pm UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/5 "2017-03-15T14:26:49Z")

</div>

hey OP

the above comments are all on the right path. look for a tutorial on `dotenv` and stick your environment variables in a `.env` file. then also make sure to include `.gitignore` so your api keys dont get pushed to github.

---

<div class="post-metadata">

**Author:** ![marekjedlinski](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marekjedlinski/32/162819_2.png) [@marekjedlinski](https://forum.freecodecamp.org/u/marekjedlinski)\
**Post date:** [March 15, 2017, 6:47pm UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/6 "2017-03-15T18:47:37Z")

</div>

Thanks, everyone! This certainly makes sense.

(As an aside, online courses such as those at Udemy and such usually gloss over security issues: “of course you would not put your password in the clear like I’m doing here, but this is just for demonstration”. I could do with a serious course on how to tighten up js and php apps.)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:59pm UTC](https://forum.freecodecamp.org/t/should-api-keys-be-kept-secret-how/96907/7 "2021-01-16T17:59:36Z")

</div>

Closed on January 16, 2021, 5:59pm UTC


