Build Youtube in React 19: Getting a Youtube API key
Now that we have set our
Redux store up and running let’ see where we will get all the video data from.
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
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
- Head over to your dashboard
- Create a new project by clicking on the
Select Projectbutton. 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 Projecton the top right of the modal that pops up
- Enter a meaningful project name such as
- Once you created your project, you will be redirected to your dashboard. An
APIkey is always associated with a specific project. Click the
Select Projectbutton and select the project you just created. You should see something like this.
- Since Google offers a lot of
APIs, we first have to activate the
APIswe want to use. Click on the blue
Enable APIs and Servicesbutton as shown in the screenshot above.
- You will now have the possibility to search for the
API(s)you want to activate. Type
youtube datainto the search field.
- Click on the card with the label
Youtube Data API v3as shown in the screenshot below.
- Click on the
blue enable button.
2.2 How to get a Youtube Data API key
- Now that we successfully enabled the
Youtube Data API, we can finally get our
- After enabling the
API, you will be redirected to a dashboard. Click
Credentialson the left sidebar.
- Click the blue
Create Credentialsbutton. Select
Youtube Data API v3as your targeted
API. For now, we will just access public data. Later on we might access user data by using
Google's OAuthinterface. But let’s not overcomplicate things. To load videos and their metadata from the backend, we only need an
APIkey for public data. We will be making
APIcalls from a browser, so please select
Web browserin the second dropdown.
- Now click the blue
What credentials do I need?
- 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
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.Follow @productioncoder
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.