Build Youtube in React 19: Getting a Youtube API key

1 Overview

Now that we have set our Redux store up and running let’ see where we will get all the video data from.

Fortunately, Youtube exposes an API for third party developers to fetch information about videos, video categories, comments, video metadata and so on.

I highly encourage you to check out Youtube’s official documentation.

2 Getting a Youtube Data API key

To make Youtube API calls, you need to create some credentials first.

Head over to Google’s developer console and log in using your Google account.

2.1 Enabling Youtube Data API

1. Head over to your dashboard
2. Create a new project by clicking on the Select Project button. If you have not worked with the Google Developer Console before, you won’t have any existing projects. In any case, create a new project by clicking New Project on the top right of the modal that pops up
3. Enter a meaningful project name such as youtube-react
   

   

4. Once you created your project, you will be redirected to your dashboard. An API key is always associated with a specific project. Click the Select Project button and select the project you just created. You should see something like this.
5. Since Google offers a lot of APIs, we first have to activate the APIs we want to use. Click on the blue Enable APIs and Services button as shown in the screenshot above.
6. You will now have the possibility to search for the API(s) you want to activate. Type youtube data into the search field.
7. Click on the card with the label Youtube Data API v3 as shown in the screenshot below.
   

   

   
   
8. Click on the blue enable button.
   

   

2.2 How to get a Youtube Data API key

1. Now that we successfully enabled the Youtube Data API, we can finally get our API key.
2. After enabling the API, you will be redirected to a dashboard. Click Credentials on the left sidebar.
   

   

3. Click the blue Create Credentials button. Select Youtube Data API v3 as your targeted API. For now, we will just access public data. Later on we might access user data by using Google's OAuth interface. But let’s not overcomplicate things. To load videos and their metadata from the backend, we only need an API key for public data. We will be making API calls from a browser, so please select Web browser in the second dropdown.
   

   

4. Now click the blue What credentials do I need?
5. You should now see your API key. Please copy this API key and store it somewhere, we will need it later on. Please also don’t commit this API key to Github or any other public repository.

3 Wrap Up

All right, that’s it. You now have an API key.

In the next tutorial, we will have a look at how we actually can actually make use of it.

You can find this project’s code on Github.

Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.

If you are interested in more high-quality production-ready content, please enter your email below.