Build a React.js Youtube Data API to Fetch User Channel Videos With Google OAuth2 Login in Browser

uh Hello friends welcome to this video so in this video we will look at how to integrate the YouTube data API version 3

uh with authentication and display your Channel videos and we will also be able to

search the videos as well so it's a complete project inside react CH and we

have the actual demo that I'm showing you we have a login with Google button right here for the authentication and we

are running this application on Local Host this is my react Chas project and

if I click this login with Google button I will be authenticated and I will display the Channel videos and you will

see the latest videos will be shown right here this is my videos and we are

actually displaying the title of the video and a link the open Button we can click and I can open this video so you

can see the video is opening so in this way we can

basically open any video you can see and I can search for any video Let's suppose

I can want to search let's suppose PHP videos so I can just write here

PHP and you will see all the PHP related videos it is automatically filtering out

the videos which are actually having PHP so containing this in the title PHP PHP

you can see that let's if I want the videos only related to my SQL so as I

write my SQL in the search bar you will see only videos containing my SQL will come you will

see so in this way it's very easy to filter out videos inside your channel

this is you can open this video you will see that the video will

open so this is actually the application we will be building all this data we are pulling it after authentication from

your uh YouTube data API version 3 so after authentication you allow access to

actually fetch videos from your channel and display it in the browser and then we have the search filter here we can

actually search the videos so as I type it you will see it automatically the

videos will be filtered so as you submit your title all the videos will have that title you will see that so you will try

to build this application it's a very simple application at the same time you will be able to see how to integrate the

you data AP API version 3 inside react Chas and so for building this

application we are actually using some packages the first package we are using is this package which is Google API

script this package is responsible for actually integrating your Google API

inside your react Chas application and the command is very simple npmi G ai- script this is a module and

just go to your command line so just make a simple react CH project

and then just install this package also for building the user interface we are actually using react

bootstrap for building the interface so you need to install these three packages

first is the this script Google API script package and then for building the user interface react bootstrap and

bootstrap so these are the three packages which are needed I've already installed these three package so what I

will do and also for integrating the login user authentication for

specifically for react Chas application the login with Google button you do need to install this package as well which is

react Google login this will integrate the user

authentication login with Google so install this package as well so I've already installed all the packages so I

will just start the development server so these are the different components which are responsible this is

for the authentication search bar video item video list and this is a main component

app.jsx here we are importing all these components so it's a complete project if you need the full source code the link

is given in the description so now let me start it from scratch let me delete the components folder so we have let me

create a very basic functional component you'll see nothing is there so if you refresh it it will automatically Auto

reload so if you now refresh this

application so now you can see app is showing so H Auto reload is working so

now the very first thing we need to do we need to impact uh import all the packages which we installed so the first

package we need to install sorry import is the Google API so this will be imported from this package that we have

Google aps script and then we also need to import bootstrap we need to import the CSS file

which is bootstrap test CSS bootstrap main. CSS and now we need to create two

variables first is the API key and the second one is the client ID so both is

will be const variables so it will be constant in the application so now to fetch the API key and the client ID you

do need to create a Google Cloud console account inside so you need to have a Google

Cloud console account and then you need to enable the apis and services go to the section and enable that YouTube data

data API so just click this button search for the API that you are

working with so there are lots of apis here so you can search for your API YouTube data API so you need to enable

this API so just click on enable so after

clicking enable this will change to manage I want already enabled that now to get the credentials you need to go to

the credentials option right here and just click on create

credentials and for the client ID you need to click on this option o or client

ID and the application type will be web application just simply select that and

now in these two options which is authorized JavaScript Origins authorized redirect URI you need to copy paste your

home URL this is a URL you need to copy paste so what I will do I will simply copy this and uh paste it right

here in both these sections and make sure this trading slash is not there in

the first one and click on this create opt create button so now it will give

you your client ID and this will be different for you just copy your own

client ID and paste it here and then for the API key uh we just need to have in

this section click on API key section and simply create your own API key so

this will give you the API

key so again copy to clipboard and just paste it so just after getting all these two

information now we can create some State variables first will be for keeping track of the authenticated if you are

authenticated or not this will be a Boolean parameter the initial value we'll be using use State hook it will be

false so the user will not be authenticated whenever you load the application and then we need to keep

track of the videos which will be fetched so you'll be fetching these videos in an array so the initial value

will be empty array and the next will be for storing the access token as you all

know in order to communicate with the Google apis you need the access token so this access token will be available

after authentication so you'll be storing it in this variable so ini value will be empty and now we also need to

keep track of what search query the user will type we also need to store the

search query set search query initial value again will be nothing so now we

have these four state variables so now after this now we need

to come to the jsx part so right here we will have

the container class of bootstrap all these are bootstrap classes and we will

be having the a simple heading in the center position and you simply say

that your latest YouTube videos something like this and now we need to

conditionally show that login button if the user is not authenticated you'll simply check in this jsx expression that

if this variable that we have this Boolean parameter if this is false in that case we need to

show the authentication but if this varable is

uh true in that case we need to show the actual videos of the

channel so right here we

can you are authenticated we can simply say so here we need to first of all a

make a component which will be authentication component here we need to pass three things client ID on success

and on failure but if the user is authenticated we can say you are

authenticated for now but now we need to make this component so just create in the source

directory just create a folder called as components and we'll be making this o

component jsx simple functional component so we can now include this

simply by typing Au so automatically it will be imported sorry not this

component we need to import we delete we need our own custom

component that we created which is this one it will be coming from this

component so this component here in this component we will be passing three three things first is the client ID so we have

stored this in the variable client ID the second one will be a function which will be on success this will be a custom

function that we will make so whenever the user is authenticated this function will get executed and similarly we will

have another call back function if any sort of error take place in the failure section we will use basically make this

function so now we need to Define these functions at desktop so we can simply Define the both these

functions so now we can actually go to the actual component which is the

authentication component and simply make it so now we actually are receiving

these three parameters to this component first is a client ID then these are the two call back functions on success and

all on aure so now what we need to do right here inside this component we just need

to return jsx expression and this will be the simple component which will be Google login it will be coming from

react Google login it's a simple login button that will be shown to the user and here we need to pass some things to

this component which is the client ID so we are getting the client ID and then we need to have the button text this will

be simple login with Google the third one is the on success so we

have this function which is on success and the fourth when the on failure so

again we have this on failure and here we do need to provide the Scopes as well

Scopes are information what information you are requesting it from the Google API so we need to access the information

of au scope we need all the Scopes we can read

information from the YouTube channel so we only need the read read only

permission so we only need to get access to the YouTube channel information such as the videos so that's why we are only

requesting the read only scope that's all so now if you refresh your

application you will see a login button appearing so if I start the application so what you will see a login

with Google button will you will see right here this button so if you click this button you will see this uh you

will automatically be logged

in so if you just refresh let me just

so this on success will be called here whenever you are successfully logined so

here we can simply inside the handle

login let me just write this so this response will be coming whenever you are successfully logged in so we can what

whatever is the response coming we can console log the

response and whatever is the error coming in case of any sort of error we can console like that also so if I rerun

it once again click on the login with Google button so if I go to console I will see

this uh information coming right here which is actually all this information profile

information about the user which is access token is also coming you can see this is access token we can need to

store this access token somewhere in order to access the information so this is my you can see

that the email address coming this is Google ID image all these things are coming so now we just need to store this

access access token some somewhere else so write in this

function so now after console loging the response

uh we just need to set this variable is authenticated from false to true so now the user is

authenticated and now we also need to store this access token using this hook function which is response. access

token and after you do this we also need to make a function which will be

fetching the videos from their YouTube channel we'll simply say response. access token we will pass the access

token as the first argument and the second argument will be nothing so now

we need to make this function this function will be responsible for fetching the YouTube channel

videos so we just need to make this function which is fetch

videos so this will be a Asing function and we just need to pass the token here

you're receiving the token is the first argument and the search query the second argument so by default search query is

nothing and now we need to use this module which is Google API that we are actually

importing it from this it contains a method called as load so we need to load

the YouTube client here this call back function will execute it will be a Asing

function so right in this function we will can use the await keyword because it's a Asing function so now this

function has a init function right here and here we need to initialize the

client by passing the API key parameter as the first argument so

we have stored this API key variable you're passing it and then it takes the

discovery dogs this will be array and it

basically contains the actual URL where you will be requesting the data

so this uh we will pass this URL so we are requesting the data from this

URL https Google ap.com disovery verion one API YouTube version

3 so we using the YouTube data version API 3 the rest API so after you just do

this uh now the next step is that we need to

fetch the videos from the API so for doing this we

make a simple fetch call so you will simply say Google API

it contains do client. YouTube and then we will use the actual

channels. list method and it takes an object and it takes three par parameters

first is a part parameter and this part parameter value you need to pass

snippit and then you need to pass comma content details we also need

the information about the video as as well so content details put a comma the second one is the parameter mine is true

this means that you need to fetch the videos of your own channel not third party videos so we will request the

videos from our own channel the channel associated with this email address the third parameter is the

access token that you need to pass with every request you need to pass this access token this is actually been three

parameters passed now we can actually request the channel

ID and this basically comes as response. result and it is stored inside item zero

and it has the ID of the channel so in this way you can request the channel ID

so once we get the channel ID using that channel ID we can request the videos so

we can just do this in try catch block so if any sort of error take place we can console lock that error so now in

this we can request the video list and for this we can again use this

STK it contains a method which is search method so in this

SDK the search method is available so this search method actually has a method

of list and this list method takes an object so this object will have some

properties again the part parameter is snippet the second parameter you need to give

the channel ID so we are actually getting the channel ID in the previous step so we are simply passing it the

third parameter is the maximum results that you want to fetch so only we only need to fetch the latest 20 videos from

your channel which we'll pass 20 here and then the C parameter so this simply

means whatever search query you are passing we are simply passing it and then lastly we need to also pass

the access token so X underscore token so we need to pass the token so we

are passing these five things part Channel ID maximum results Q is a search

query and access token so once you do this we will get the response and we can

use the hook function to set the videos and we can say video list response.

result. items this will be a simple array we have setting is using the hook function that we declared you will see

which is initially it is but now we are setting this the array which is coming

so once you do this uh now in the

jsx so I can simply console log the response which is coming I can write the

console log right just to show you in the browser let console log all this

information the channel ID as well and then this response which is

coming video list response so now if you go to the browser and if you just uh

click the

button uh let me just okay some error has there

let me rerun the application here npm run Sometimes some errors you can see

now it is running HTTP uh let me just see what is fail to

resolve entry for package htdp proxy agent

uh I think guys some type of mistake has happened that's why it is giving me this

error I think in this section we have made some error so let me just fix it by

pasting the code you can find all the source code in the description I think in somewhere I made

a mistake let me paste this code once again contrl C

so now you can see now the application is running so it was just a mistake in this you can just pause the video and

just see what mistake I done so this is actually the correct code so if I

refresh

now uh again the same mistake let me just see guys uh guys I fix figured out the error

uh basically accidentally I imported this line at the very top I'm not using

this you will see import Discovery from Google apis I just accidentally imported this line so just need to delete this so

once you delete this the code will work and refresh it you will see the login with Google button

so now if I click the button you will see now it is showing this message that

you are authenticated and if I inspect element and uh see the

result you will see this will be showing my profile

information so we are actually right here we have calling this

function so what I need to do I just need to console log this

response which is coming from the API and then from that we are extracting the

channel ID and from that channel ID then we are getting the L list of videos so

let me console log all these responses which are coming from the API so once I click login with

Google so now you can see first of all we get the profile information we get this response and then from this profile

information we get the access token and that from the access token we get this channel ID and you can see

we get the channel ID this is the channel ID that you can see so we get the channel ID and from

that channel ID we get you will see the channel name description everything and

then from that channel idid we get the total number of videos that we got which

is the top 20 latest videos you will see and for each video we have this

information which is the ID channel ID this is the snippet and if you see

snippit contains the channel information the publish date publish time thumbnails

so each sort of information is there and then we have the information related to

video as well this is a thumbnail this is the title everything so now we need to show this information in the browser

so it's very easy so now coming back to the jsx part so when you are authenticated

instead of this heading we just need to show the video videos so we will have a diff section and here we need to create

a component I will call that component at at search

bar so now I just need to make this components in the components folder

search bar so I just need to import this

component which simply I will say search bar

so what I will do I will import this

component you'll see that let we changed the

so now you can see it has been imported so now in this component we

need to pass three things first is the actual search query that the user will write the search

query variable so whatever is the search query we have storing it in the variable

and then the second one is the act ual function which will execute once the user writes in anything in the search

query we will execute this function handle search change you need to Define this function in

this and then the third one will be a on search so when the user starts

to search so you'll basically call this fetch videos function and again pass the

access token plus the search query that the user has entered so this on search

will be a simple call back function so here we do need to Define on

search change we need to Define this

function handle sech change so now in the search bar

component if you see we need to now we are receiving three these three

parameters first is the actual search cury second is the on search change call

back function the third one is on search so now in this component we need

to use some bootstrap for showing uh the search field we'll be using the

form component you will see it will be imported from react bootstrap we need to use the bootstrap

class margin bottom three

so in this we need to have this will be of type text so this will be a form element

so let me inside this we need to define the

form

control so this will be of type text and here we need to give the

placeholder which will be search videos and the value here uh which will

be we need to bind the search query which is coming right here in this component and then the on on change

function so whenever the value is change of this input field we need to bind this function which is we are defining which

is on so change and also we need to give it a class name of

me to so if you now refresh now you will

after you click the button you will see the search input field the search bar you will see

that you will not see the bootstrap because we do need to import the bootstrap file here

this is a search

field form control um

let just wait let me just paste

this okay I think we are not calling this uh in this appjs

function we having this div section right here

so we have this app section right

here search for click on

that so we have this search bar field and now after this we need to create

another component which will be responsible for showing the total number of videos from the channel so this will

be video list component this will be a simple

functional component and after this search field we will show

this component which is video list and this component will take uh the videos

as the first parameter so videos we have the array we are storing it and then this call back function which is on open

so this will be a simple call back function which will take the video

ID this will be a function which will be responsible for opening the video in a new tab so we are passing the video ID

as the argument so I will just console log for

now so first of all we need to receive this information in this component which

is video list so in this video list component if you

see we are passing the first parameter is the videos and then the call back function on open so right here in this

we need to actually create a unordered list UL

element and we need to give it a class name of list

group these are all bootstrap classes

and here we need to Loop through all the videos using the map operator and for each video we will

be having another component here which will be video item and we need to pass the key here

which will be coming from video ID so we are simply passing the video ID

as the key and the actual video we will pass as this object and then we will

pass the third argument is on open so this is a function that we are passing so we need to create another component

where we'll be showing the actual video so again in the components folder just create video

item so this will be a function component and we can just import this

component here which is we can simply say video

item this will be imported if you see so now in this

component we are actually passing uh two things what is the actual video

and then the function which is on open so now from this

uh we will actually have a Alli

tag and we will be giving the bootstrap class list group item

deflex justify Center justify content

between so these are all bootstrap classes and now to align the videos in

the center position align items

Center so right here we will be embedding the title of the video so will simply show the title inside C brackets

and then we'll be having a bootstrap button and the variant will be primary

button and the size here will be small basically binding on click

function when we click the button we will be binding this on open function and we'll pass the video ID as the

argument and we'll be giving a class name of this bootstrap

class so if you refresh

here so it is saying that title is not

defined okay we do need to import the information about the video from this video object so we need to extract the

title here from video do snippet do title so if the title is not

accessible then we can simply say no title same goes with the video ID as

well you can extract the video ID from this object which is video. id. video

ID so if the video ID is not available in that case we can simply return n

so you will see all these video titles will be shown right here top 20 videos you will see

that and then this open Button you need to show the label of the button as well

so what I need to make sure it's say

open so my top 20 videos are showing right here here and we click the open

button I need to bind a listener here we are executing this on open function

because we are passing it again right here we are getting this from the video list component and here we are passing

this on open function and instead of console loging the video ID we need to

actually open the video in a new tab so for now opening that

video we can simply say the video it ID has been there in that case we need to

open the video window. open so you use the backtick symbol and

uh we'll open this youtube.com/watch

and we just need to pass the video ID question mark V is equal to and then we

need to pass the video ID which is like this comma and then we need to open it

in the blank window we can simply say add underscore

blank so if you refresh

now so if you click any of the video open Button you will see the video will

open in a new tab so in this way uh the videos are

displaying right here and now we need to implement the searching functionality we need to

display a search field where we can search the video so now in the search bar component if you

see uh you can see we I think we defined this function which is handle search

change yeah I think we defined that so this event will be there whenever we

change the value it will automatically be passed

and we just need to say set search query to be whatever is event. target. Val so

whatever you

write so we have written this

so this is actually your search for component

and uh let me see what is the problem here why the search field is not displaying because if you see only the

search bar is

displaying oh I think that's the problem if you see we actually misspelled this

this needs to be Capital because if you see the file name right here it's s is capital here just make sure s is capital

here

let me include that once again search

bar so now it is included

uh I think guys we misspell this so let me change the component name uh let me

say here search

field so let me just import this delete

this so now this will be imported uh you see search field component and hopefully

now it will show it will now see it was just a smelling mistake now we have the

search field if I write something here nothing happens if you see we are not

doing uh the filtering process now we doing that I have already attached a

method uh to this search whenever you we are cing this search field component if

you see we have this on search function executed which is fetch videos

on search function is

there if I console lock we call

L so now if you click on the search button you will see all the laral related videos will

show after writing laral you do need to click the search button so after that

you will see all the laral videos will show you will see the title will contain

larable same goes if I search for MySQL click on search you will now see all the

videos related to mySQL will show so in this way you can filter all your videos

all your Channel videos based upon a title using this simple project and you

can do a lot more with this project you can extend this project you can add a filter for date as as well you can

receive input if you want a videos related to a specific date you can also

do that as well the code will remain the same the base code so all the source

code is given in the description guys this is a full project that we made it compos of four components authentication

component search field video item video list so we have used the YouTube data

API version 3 for getting access to all this information coming from your YouTube

channel we're displaying the top 20 videos you can also display top 50

videos as well you just need to change the value whatever from 20 to 50 right

here so that's all guys this is thank you very much for watching this

video please hit that like button subscribe the channel and do check out my website as well free mediat tools.com

which contains thousands of videos related to audio video and image and I

will be seeing you in the next video