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.
Cloned
After that went to https://console.developers.google.com/ and it took me to below screen.
Developer console
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.
High Usage
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.
Delete
Now, i click on the CREATE CREDENTIALS button on the top right corner of the page.
Create Credentials
In the next screen select YouTube Data API v3, then Web browser (JavaScript), after that the Public Data and finally click on What credentials do i need? button.
Credentials
In the next screen, we will get our API Key. Save it and click on the Done button.
Done
Now, on the API page a new entry will be shown.
API Key
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.
.env
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
App.js
Next, we also need to add the .env file in .gitignore file, so that it is not pushed to github.
.gitignore
Now, i did a npm install and npm start for the app and it is working fine and getting the data from Youtube API.
YouTube API
Hope, this helps and you don’t commit the same mistake which i did to expose a API key on the internet.