When i create my first blog 2.5 years back, it was a React app which was using YouTube API. You can find the link for it here.
Now, i did the classic beginners mistake of pushing my youtube data API keys to github. I received a mail also from google to remove it.
So, i decided to remove them from public github. For this i first cloned my repo from github.
After that went to https://console.developers.google.com/ and it took me to below screen.
Then click on the search bar and typed Youtube data and clicked on YouTube Data API v3.
YouTube Data API v3
It shows the usage of my API and clearly the requests are quite high, and that seems the reason, google sent me mail.
So, i decided to delete all three of them. Clicking on the Delete icon, opens this pop-up, in which you have to type DELETE and then click on DELETE button.
Now, i click on the CREATE CREDENTIALS button on the top right corner of the page.
In the next screen, we will get our API Key. Save it and click on the Done button.
Now, on the API page a new entry will be shown.
Now open the code in VSCode and create an .env file in the root directory. Here add a variable REACT_APP_API_KEY and put you API key here.
Two important things are that the variable name have to start with REACTAPP and the key should not contains quotes.
After that change the API reference in the file where it is called. I added it in App.js and now accessing it with process.env.REACT_APP_API_KEY
Next, we also need to add the .env file in .gitignore file, so that it is not pushed to github.
Now, i did a npm install and npm start for the app and it is working fine and getting the data from Youtube API.
Hope, this helps and you don’t commit the same mistake which i did to expose a API key on the internet.