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
- Head over to your dashboard
- 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 clickingNew Project
on the top right of the modal that pops up - Enter a meaningful project name such as
youtube-react
- Once you created your project, you will be redirected to your dashboard. An
API
key is always associated with a specific project. Click theSelect Project
button 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 theAPIs
we want to use. Click on the blueEnable APIs and Services
button as shown in the screenshot above. - You will now have the possibility to search for the
API(s)
you want to activate. Typeyoutube data
into the search field. - Click on the card with the label
Youtube Data API v3
as 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 ourAPI key.
- After enabling the
API
, you will be redirected to a dashboard. ClickCredentials
on the left sidebar. - Click the blue
Create Credentials
button. SelectYoutube Data API v3
as your targetedAPI
. For now, we will just access public data. Later on we might access user data by usingGoogle's OAuth
interface. But let’s not overcomplicate things. To load videos and their metadata from the backend, we only need anAPI
key for public data. We will be makingAPI
calls from a browser, so please selectWeb browser
in 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 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.
Follow @productioncoderPlease 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.
Recent Comments