3.4 Hiding API Keys with Environment Variables (dotenv) and Pushing Code to GitHub

In this lesson, we will address how to can hide an API key using environment variables and open source the code on GitHub.
💻github.com/CodingTrain/Intro-...
🔗 dotenv: www.npmjs.com/package/dotenv
🔗 GitHub: github.com/
🎥 NEXT LESSON: • 3.5 Web Application De...
🎥 PREVIOUS LESSON: • 3.3 Mapping Database E...
🎥 FULL COURSE: • Working with Data and ...
🎥 Git and GitHub: • 1.1: Introduction - Gi...
🚂 Website: thecodingtrain.com/
💖 Patreon: / codingtrain
🛒 Store: www.designbyhumans.com/shop/c...
📚 Books: www.amazon.com/shop/thecoding...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

[@Warpgatez]

After years, I still come back to your videos. Doesn't matter which one. I just come back to them. They solve so many issues. When I first discovered you I wasn't working with JS at all. But enjoyed watching your videos. Now I am working with JS. So I am back

[@honeybcomb]

I randomly came across this video and I can't go without thank you ! Your explanations are very clear and makes the course material simple to understand. Thank you very much ! I am so happy I fond your channel today :))

[@SaiKumar-vf9lz]

From hiding api keys to adding local source to GitHub ..well summarized things in 10 mins ..great video !

[@hj1916]

It was never boring! Actually, you made this serious topic so fun like magic. Also, I loved the ending credit of the train. Creative idea!!! Thank you so much!!!!

[@MrGreg557]

What a great series man, I'm grateful everyone can use resources like this. Going from knowing almost 0 JS to deploying my app was very satisfying. One update though: if you get this error like me: "npm ERR! Missing script: "start"", add this to the end of your package.json file, before the finishing curly brace: ,"scripts": { "start": "node index.js" },

[@janetrajkoski1424]

As someone who just started learning to code and my first interview being: "The hell you doing your API key is public", this was a godsend video. Very to the point and clear explanation. Subscribed

[@simonmafanye.3537]

Watched your video for 5minutes and i have no choose but to hit the Subscribe button very fast. I love your style of teaching,

[@Rlc201]

How i didn't know this channel? Awesome tutorial and one of the best teachers that i have ever seen on youtube. Keep up!

[@aakash-codes]

I just love the way you teach things! Doesn't even let me feel boring for a single sec! 😊🚀

[@aristotleanderson930]

This is a great tutorial! Thank you for being quick and to the point, as well as informative and helpful!

[@gustavotomas5214]

You probably dont give a damn but does someone know a way to log back into an instagram account? I somehow forgot my account password. I love any help you can give me.

[@casenace5722]

@Gustavo Tomas Instablaster :)

[@gustavotomas5214]

@Casen Ace thanks so much for your reply. I found the site thru google and Im waiting for the hacking stuff now. Seems to take a while so I will reply here later when my account password hopefully is recovered.

[@gustavotomas5214]

@Casen Ace It did the trick and I finally got access to my account again. I am so happy! Thank you so much, you really help me out!

[@casenace5722]

@Gustavo Tomas no problem =)

[@bandarabdullah40]

I was suffering to understand the environment variable and its benefits this video the best explanation I have ever seen.

[@moaazbhnas886]

I was searching for a video about env file and felt relief when I saw yours

[@gme0ver24]

Useful stuff as always. Waiting for the next video!

[@benSfft]

Thanks a lot ! That's clear and the objectives are so well explained ! I didn't even know that we could code on ecstasy !

[@zeyadahmedsamer3443]

no words can describe your awesome explanation

[@leerenae313]

Hey, love your videos! they're so straight to the point Thank you for putting this out for free 🙏

[@snehagangurde6266]

Thank you so much i have been searching one good video for days. finally got this one. this one is quick, understandable

[@kareng9484]

Bro, thank you very much, this is exactly what I needed, you're so good at explaining things

[@smashing_data4292]

As someone who has done this before on my own projects I can say this is legit. Immediate subscribe.

[@arshamazami159]

The best video about environment variable and how to use them👍👍👍

[@SnobbyLion]

You're so good at explaining things! Thank you!

[@sharadsharma3176]

eagerly waiting for the next video of this series.... I want to know more about the available hosting services for node.

[@tegaogheneovo5881]

So keep working on my project and when I want to deploy hide all my keys and db names thank you 😁

[@drhastings]

Simple and straight to the point thank you👏🏿

[@zorro1rr]

I'm getting the api key returned in my terminal, but now my data is not being returned in the browser and getting console error: Uncaught ReferenceError: require is not defined. Help please

[@TheCodingTrain]

Our Coding Train Discord is a great place to get help with coding questions ! discord.gg/hPuGy2g - The Coding Train Team

[@patrickporter6441]

I had a question: Can the same effect be accomplished with a config.json and including that in the gitignore?

[@kritikshivanshu]

@TheCodingTrain Hi there! I am facing problem in order to upload .env file in my github repo. Since the application doesn't fetching information. What to do???Please help me.

[@RayfranRocha]

Spectacular tutorial! Thank you. It's very clear. I wonder if using any browser inspector, can anyone see the API_KEY? Looking inside the code or in the Request to the API message?

[@kingsley3194]

Thank you so much. You saved my day with this explanation

[@Niehde]

Nice video! I've just recently pushed some API keys to Github. Fortunately they have a service that lets you know when you've screwed up.

[@amjedbouhouch7993]

Same 🤣🤣

[@Cam-lm6wo]

incredible video, I spend like 1 year in a College trying to use GitHub as they told me without actually know what I was doing. thank you! Just a question... Can I add to the .env file a private key from firebase?

[@unscripted483]

so if someone down loads the repository to try out the web app will they still be able to use is even though they wont have the api key... (for me i didn't want to show the world my database URL and password)

[@sweickel]

Thank you! This is exactly the video and explanation I needed!

[@oyetorostephen5010]

THank you! I find this fun to learn

[@dennisgonzales9521]

Very engaging! thank you for the lesson.

[@zensic]

Thank you! Was just looking for this

[@Jb67912]

you don't need an access token for the logs js file? It seems the website of mapbox requires one

[@zwlw]

you're a legend dude this is a life saver

[@adedimolao9094]

can you use .env and gitignore in a vanilla js project?

[@familyjuega12345]

Awesome content and explanation, thanks man!

[@skrillex15]

Thanks for this playlist. Really helped

[@bhavsar9904]

Hello I am using Angular latest version with nodejs and I am new to it. In Angular we have environment.ts file where we keep API key details. I have used dotenv and generating environment.ts with with node script using dotenv. Now when we build and serve angular application and go to browser and do page view source. Enviornment.ts file is viewable in main.js file with all the details and that I dont want to expose. Any suggestion how to stop exposing this file data in page view source?

[@bluemagicuk]

super helpful - thank you!

[@dreznik]

sheefmahn brilliant series of videos. any videos where you interact with a Database-as-a-Service? SQL or not

[@Viralplace]

but this works just for development on github... if I go in production like a jam stack project? it is not hidden right?

[@jonathan-._.-]

:( iwanna follow the CodingTrain git organization but there is no button

[@DieHard88913]

Thank you! this helped me a lot, earned a new sub :D

[@nicholashendrata]

THIS SAVED MY LIFE THANK YOU

[@appiahseth5319]

Great presentation. Thank you very much

[@gokulkannan1348]

can xhr requests be hidden from the console?

[@pjguitar15]

You're a great teacher!!!

[@Felipecuevas]

it only work with node servers but if I try to do it with angular have some several problems

[@lorisp186]

Thank you man, I was exactly looking for that

[@ivankljun2542]

Very nice, thank you, very educational and entertaining! :)

[@cperez7785]

Does anyone know how to find your API key? The text folder I created I accidentally deleted and I had to re-generate new APY keys but I do not know where I may find this text file to update it. Any help will appreciate it!

[@cosmos9227]

Sir where I can Find import and export folder maker in android app resource?

[@edwincaceresi.3284]

Thanks! It was very clear!

[@nofacee94]

If your file is called index.js, you can just do `node .` or `node index`

[@notprivy]

I see that we can do without require by using node -r. Can you explain how to do it?

[@GopalChand]

Hi, how about if i am using Docker and dont want to publish my .env file in git. But my application is require env file. Can you pls help how to use .env file in Docker container or K8

[@harshpatel7704]

Hey guys, can anyone help me how to manage these variables in open source project where anyone can contribute to the project. How can i manage database passwords and API keys?

[@noco2605]

Thank you very much for your explanation 😊

[@lochsandro]

Nice video!!! How to use this environment variables in the CI(actions)?

[@220syedrazamehdirizvi7]

U made it so fun to watch ....❤

[@abigiyatadesse2672]

Thanks so much this is helpful.

[@magebol]

Hi, Great tutorial!. I am new to this. I need to hide api keys but I don´t know how to install the dotenv. I tried to run install command you showed in he video, but I am doing something wrong in the terminal of my mac. Any recommendation anyone? Thanks

[@bacanalienigena]

It works amazingly, thanks a million!

[@nicetomeetugaming7024]

Amazing video sir!

[@techmarinar]

thanx man , this was helpful

[@pierosabino]

Hi, I followed your video to publish code on github using dotenv but it doesn't work

[@mohammedraqeeb4392]

Great explanation

[@davidchopin6583]

So, so useful. Thanks!

[@nighknight9012]

if you are working on linux you may experience a problem when running the code, "undefined" gets returned, thats because you need to set the env variable yourself. go to bashrc and do export ENV_VARIABLE=VALUE no spaces around the equal and if the VALUE has spaces add quotes around it

[@aham3687]

could continue this series with PWA. This has been popular with web technology in this modern day.

[@ankurkhandelwal1375]

What if index.js and .env are in different folders?

[@lynx7077]

Great Tutorial! Although i have a question and i hope some good soul will answer me. During my Bootcamp, we never got tought or warned to hide our API Keys. So now that i am about to apply for jobs, i have been overwhelmed with the fact that i need to hide my personal API key that i used for my projects (it's a free personal key from my bootcamp). So my question is: What should i do that i already committed and publicly pushed all of my projects and API keys on my github? Thankfully no one has access to it yet but i need to take action before sending applications or post my github to Linkedin. Any advice would be greatly appreciated 🙏🙏

[@kenfeier5542]

Great tutorial, but I do want to mention one thing. Environmental variables help you hide your sensitive information for version control purposes. If you build a public website and have environmental variables showing on client side, a user can open the debugger and hover over those variables and see the values of them. Make sure that you use these variables on back-end (server) side if you don't want anyone to see their values.

[@ilearncode7365]

From a “security/ privacy” standpoint, how is this any better than just having a js file with a variable for thr api key in it?

[@predator-np2bt]

if i hide env files , will it work if hosted

[@LimitlessGamingYoutubeChannel]

Super helpful video!

[@carlosduque8767]

Why when you put the node_modules in the .gitignore file you put a / in front of it?

[@dusanlukic6784]

because node modules is a folder and then git will ignore every file in that folder

[@danieloliveira9815]

Typing those command line commands made me feel like a real programmer 😎 Thank you for this awesome playlist!

[@hargur4121]

Thanks a lot! This has been a lifesaver

[@catalinhora6489]

i'm working with custom-env pretty similar, but I need to have two env files, for two environments, how should this be treated? How can i make it work?

[@catalinhora6489]

Nevermind, got it :)))

[@sirdragoon4625]

Cant anyone browsing our git repository can access out API_Key , can someone explain i an new to github?

[@michaelroysomera1068]

Is this supported in Angular?

[@m_ko]

So nice thanks for this video

[@pepew7102]

But your API key is still visible in the sources og the project right ?

[@serdarinjo]

Muchas gracias bro 😀!

[@montazmeahii6029]

always sounds to me like you're saying "I'm going to post this in the video's subscription," but I'm sure you're saying "video's description".

[@kwameagyenim-boateng2968]

console.log(process.env) doesn't include my .env variable

[@Philson]

Is it secure deploying it tho

[@cholasimmons]

what about for typescript, doesn't anyone use typescript???? :(

[@alejandrocano88]

I have a react with typescript project and the console.log(process.env) works just fine without intalling 'dotnet' , perhaps this function is already implemented?

[@nickspringer5755]

Theres a SOLID chance dotenv is a dependency of CRA

[@alejandrocano88]

@@nickspringer5755 here's all my dependencies "@material-ui/core": "^4.9.8", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.47", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/classnames": "^2.2.10", "@types/jest": "^24.0.0", "@types/lodash.orderby": "^4.6.6", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/react-input-mask": "^2.0.5", "@types/react-redux": "^7.1.7", "@types/react-router-dom": "^5.1.3", "@types/react-table": "^7.0.16", "@types/recompose": "^0.30.7", "@types/redux-actions": "^2.6.1", "@types/yup": "^0.26.34", "axios": "^0.19.2", "classnames": "^2.2.6", "clsx": "^1.1.0", "date-fns": "^2.12.0", "formik": "^2.1.4", "lodash.isequal": "^4.5.0", "lodash.orderby": "^4.6.0", "react": "^16.13.1", "react-date-range": "^1.0.3", "react-day-picker": "^7.4.8", "react-dom": "^16.13.1", "react-input-mask": "^2.0.4", "react-intl": "^4.5.3", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "react-spring": "^8.0.27", "react-table": "^7.0.4", "react-thunk": "^1.0.0", "react-transition-group": "^4.3.0", "react-use-measure": "^2.0.0", "recompose": "^0.30.0", "redux": "^4.0.5", "redux-actions": "^2.6.5", "redux-persist": "^6.0.0", "redux-persist-transform-filter": "^0.0.20", "redux-saga": "^1.1.3", "reselect": "^4.0.0", "rsuite": "^4.5.0", "sweetalert2": "^9.10.12", "typescript": "^3.8.3", "use-react-router": "^1.0.7", "yup": "^0.28.3"

[@santiagootero3580]

you are the goat, thanks so much

[@coffeymay6775]

It says require is not defined for me in the console. I followed the steps in terminal, have the lastest version of node etc.???

[@tannermartz6761]

same ugh this is so annoying

[@abidsiraj5728]

tell me how to find that api keys again on GitHub??

[@iTonymvm]

even if u use the .env file u still have the api key in the bundled js source code when u deploy. Is there a backend solution with express or smth ? thank you

[@TheCodingTrain]

You'll see you don't have to bundle it when you deploy! I show this in my final video in this series.

[@iTonymvm]

@@TheCodingTrain I know. I am not talking about deploying an open source project but a real one where you have to use, somehow, the api key. Anyway, thank you for your response, i'll do some research on my own.

[@hasi90s]

Whatt if someone catch api key from network tab

[@gideonaswani2449]

Awesome, thanks