Hide API Keys Without dotenv environment variables | Hiding API Keys in Javascript Netlify

In this tutorial, you will learn how to hide your API keys without using dotenv environment variables. While there is nothing wrong with using dotenv if you are familiar with NPM, this solution is an alternative for those who are not. You should not store API keys in a public GitHub repository, and this tutorial will help you keep your API keys out of your repos.

✅ Quick Concepts outline:
Hide API Keys without dotenv
• OpenWeatherMap API example
• Utilize .gitignore to avoid storing your API key on GitHub
• Use a JavaScript module import
• Practice the git bash commands before constructing the build command
• Enter the new build command for your project on Netlify
• Trigger a new deploy
• Verify your API key is imported and working

🤖 API used in the examples for this tutorial:

📚 Further Reading:
MDN Web Docs - Modules:

📺 More Beginner JS Videos:

✅ Follow Me:

#hiding #api #keys

[danielvega]

I will never forget you, Dave Gray. Thank you so much for being so cool! Greetings from Colombia.

[HideBuz]

You rock! Your long tutorials are awesome!

[daniyalarif]

Hi, the test.js file you created, wont that be on github anyways showing the keys?

[eliodrallag]

This is what I've been looking for. Thank you

[eliz]

You have such good content. You deserve way more subscribers.

[minhduc]

Hi, thank you for the video. How about smudging and cleaning data so whenever I checkout a branch the api key is updated?

[sportsstimulant]

Can youse .env file ? And .gitignore file can put . nodemoduls and .env files recent time ?

[TheVedantshah]

Hey i'm getting a Uncaught SyntaxError: Cannot use import statement outside a module error, what am I doing wrong?

[ecdu-eu]

Dear Dave, I hope you are well. Thank you very much for your effort and the video. It's really a big help. Maybe you have time-if it's not too much trouble-to answer two questions for me: I can get your project to run locally on my Ubuntu system without any problems. However, I have problems hosting the project on netlify. My questions about this would be: 1) How can I start the project with a file index.html so that .env remains hidden and (2) do you know a way how to activate the repository on netlify? netlify deploy works, but additional modules that were integrated via package.json do not work. The background to my question is that I would like to hide a larger number of required Amazon AWS SDK API's. Does it perhaps make sense to use react at this point? I would be grateful to you for an answer, since I've been desperate here for days. Many thanks and best regards, Stefan

[ponce]

thanks for the video, but at the end you say it's a good way to hide the api key, but, you're showing it! sorry, I don't understand, it's not hidden, anyone who sniffs the code will be able to find it.

[ritakriti]

If we pass an api key this way in the headers then that key value is showing in network call ...can you help how to hide that?

[RaniaAmina]

Is there also possible to hide also from sources tab for plain html and vanilla js?

[my_vk_vlogs]

From git-hub we can hide api key this approach. but hackers can able to view our api key after deployment via source code. How we can hide our api key some one can't view our all kind of secret key.

[zenguitarankh]

"Oh man....what's this github guardian email?...oh of course...I exposed the apikey so it's flagging me....time to search around for how I deal with bet it's gonna be hard to find someone with my exact situation....with github with a weather

(Dave has entered the chat)
Thanks once again man.

[darshaanaghicha]

I want this weather app tutorial...
Where can I find it?

[avshinkampf]

Nice work again, I tried the .dotenv way on my project, but this was easier!

[martin.m.marshall]

Now, what's the point of doing this? Anyone inspecting my source code from browser can now easily read and copy my api key and db configs....

[robertomaclean]

I hadn't idea Burton C. Bell is a programmer

[muhammadk]

so after researching for hours and i got to a place to secure my api key but after all this damn api is still visible? Ridiculous😂

thanks for the tutorial btw

[webflyer]

Someone trying to steal your api-key already knows where to look for it😂