back to all posts

Add YouTube API Key and hide in React App

by Nabendu Biswas / June 27th, 2020

#react #javascript #youtube

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.

ClonedCloned

After that went to https://console.developers.google.com/ and it took me to below screen.

Developer consoleDeveloper console

Then click on the search bar and typed Youtube data and clicked on YouTube Data API v3.

YouTube Data API v3YouTube 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 UsageHigh 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.

DeleteDelete

Now, i click on the CREATE CREDENTIALS button on the top right corner of the page.

Create CredentialsCreate 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.

CredentialsCredentials

In the next screen, we will get our API Key. Save it and click on the Done button.

DoneDone

Now, on the API page a new entry will be shown.

API KeyAPI 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.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.jsApp.js

Next, we also need to add the .env file in .gitignore file, so that it is not pushed to github.

.gitignore.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 APIYouTube API

Hope, this helps and you don’t commit the same mistake which i did to expose a API key on the internet.

Nabendu Biswas