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

hello and welcome today we're going to talk about another way to hide api keys you may be familiar with using npm which is node package manager and dot env and that is one way to do that with a front-end dev project however when you use netlify to host your project i've discovered another way to do this and one of the reasons i love teaching is because i learned from my students and actually one of my students this semester suggested this and it was a great idea let's get started today we're using the openweathermap.org api for an example and this is a free api or at least it has a free tier but it still makes you use an api key so this is a good way to show this example and if you were to save this api key to your github and somebody else used it probably the worst thing that would happen would be they would cut you off after you exceeded your free usage and as we see the pricing tier here i'll click the pricing link the free api gets up to 60 calls per minute and i assume after that they just cut off your usage they don't ask for any financial data from a user to get the free api key so this seems like a good example for that let's look at visual studio code and here you can see i have a get ignore file now if you're not familiar with git and github i'm going to show a link here that will take you to my tutorial on the basics of git and github and you will need that and in the get ignore file i have my api key dot js so let's look at that and you can see it's grayed out over here in the file tree because it is in my git ignore file and that git ignore file starts with a dot so it's dot get ignore so this ensures these files will not be sent up to github when you push your repository to github let's look at this api key and here you can see mine of course i'll delete this after the video but at the same time it's not a big deal because this is the free tier again so i'm just defining a variable called weather api key it's a constant and i export that variable and then on the data functions.js file that i have and you can ignore this function underneath it but you can see i import the weather api key from that api key dot js file using the bash terminal that you would with your git and i believe on linux you could just do this from a terminal same with mac however in windows you better have get bash installed once again that same video with the introductory for git and github shows how to put bash right inside your vs code window so this is my bash terminal let's look at a way to create this api key dot js file when we build the project and launch it on netlify okay at the bash terminal what we're going to do is practice the commands that we're going to give to netlify so let's just walk through those first the first one we would tell netlify is you would start out in the same folder as the index file but you can see the api key is in the js folder so we would tell netlify to switch to the js folder so cdjs and now you can see we're not just in the weather app folder we're in the js folder so that command would work first now to get back out of this folder and go back up it's cd plus two dots so let's combine some things now we'll say cd js and we'll call echo and we're going to use the dash e flag here and what that's going to do is tell it to pay attention to some line breaks we're going to put in this string so now we can say const and put in the weather api key just like we had in our file equals now let's go ahead and look at this file again and we have quotes but we're already inside quotes here as we create this string so instead of double quotes we need to use a single quote now we can paste the key and use another single quote and end that javascript definition with the semicolon now let's put a couple of line breaks and we'll go reverse slash not forward slash but reverse slash in oh we need a lower case in and let's do that again that is actually two line breaks right there and now we'll put the second line export default weather api key and the other semicolon now we'll put the double quote again and now we'll use a greater than symbol and put the file name that we want and here i'm going to name it test dot js as we test this out and this should create the file and put the contents of the file the way we want them you can see we now have a test js file here and let's look at the contents they are identical to our api key js so the only thing we'll change in this command when we go to netlify and insert this command in the build process is to change test.js to api key dot js and then our import in data functions will work because netlify will create this file for us so now let's go to netlify and do that very thing we're at netlify now and you can see i'm logged in and i have pulled in my weather app project from github and i have a video about how to do that with continuous deployment and i'm going to show that link here once you have pulled in your project from github and you have ignored your api key file we need to tell netlify to build that api key.js file for you when you launch your app or when you deploy your app i should say so let's look at deployment settings and now that we're in build and deploy we have build settings right here and you can see i've got a command in here so let's edit the settings and look at this i've got what we started out with change directory that cd and then we move into the js folder and then i say and and then i use echo with the dash e flag so it will recognize those line breaks i put in and we define the weather api key remember to use single quotes around the key two line breaks and then we have our export default statement then the greater than symbol and the file name api key dot js so now when netlify deploys our app from github it adds this build command into the build process of course you would click save after you enter this i've already got it in there so i don't need to and then you want to come up to deploys in your netlify and once again you're already in your app and they've got a button over here that says trigger deploy so let's do this and it comes up with a deploy log that starts to build and it'll take a second or two but as we see what happens you'll see the command execute during the build that creates our api key.js file there it is and then it says netlify build complete we can go back then we can click our link for our project here you see the weather app project i've been putting together now i'm going to open up dev tools and on windows i press control shift and i at the same time to do that or you could right click and choose inspect now we're in dev tools go to the sources let me find it here well i've already got it open the sources tab in your dev tools and from sources you can go to js at least if you have your project like mine and here you can see the files and now i have an api key dot js file now will this hide your api key in your project no and neither will dot enb all it does is it keeps you from storing that api key in github and then when you have a front end project it has to pull that key in any way to make that work now there are some ways around that we could talk about serverless functions we could talk about an endpoint with node that would do a relay and i can make some videos about that in the future but for now this is a good way to hide your api key and not store it in github and of course you still need it in your projects maybe these are projects for a class or just a personal project and you aren't worried about somebody grabbing the key out of your code but if you are you need to look into some other ways to hide that api key on the back end or in a serverless function this accomplishes the same thing that you would accomplish by using dot env in a front end project hi i'm dave and i hope you enjoyed this tutorial remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time

Channel: Dave Gray

Views: 35,454

Keywords: hide api key, hide api keys, hiding api key, hiding api keys, hide api key javascript, hiding api keys javascript, hide api key netlify, hiding api keys netlify, dotenv, environment variables

Id: 2J3xbMkH2K4

Length: 10min 37sec (637 seconds)

Published: Mon Dec 14 2020