Build a React.js Gmail API Example to Authenticate & Display Inbox Messages in Browser Using JS

uh hello guys welcome to this video so in this video we will look at how to build out a Gmail API example how to

show your inbox messages inside the table inside react chairs so we have

this full project inside react chairs we have a demo let me show you we are running this application on Local Host

we have a login with Google button so as you click this button you will be able to authenticate with Google and login

with your Gmail account and then we will be fetching all the inbox messages the

top 30 latest messages you will see the list in this table and it will show you

the title of the message right here and there are three buttons either you can

open this message or you can start it or you can delete this delete it into the

trash so now if I click the open Button you will basically see I it will redirect me to the Gmail it will open

the message in my Gmail app you can see then I can read this message very

easily so you can see how easy it is and there is a option here to Star this

message so if you want to add this message to a star you can click the star message and you will see message start

successfully so start means that you like this message now it will appear it in the star section so if I check right

here in this section there will be this message added if you check we have checked this start this message right

now which is black Black Friday special right now the you can see 12:20

the current time is there so we start this message so we can easily do this we

can let's suppose I want to start this message I can simply click this button

again if I now check there will be another message

added to the star section

so you can see in this m in this way No Shave only B you can see this message also added so let's suppose if you want

to delete a certain message that you don't want and let me delete this message only which is we start this so

Black Friday special I don't need this message I will simply click delete and now you will see it will be remove from

this list as well so it will be updated so if I again refresh you will not see

this message CU this message has been removed and it has been moved to trash you can see the message has been removed

if I want to check the trash pin here you will see this will remove the this

message has been moved to trash you will see that so in this way very easily you can delete messages that you don't need

if I click delete here also delete this message as well and check the trash pin

you will see two more messages will get added very easily so in this way we are doing it programmatically using react CH

we communicating with the Gmail API we are doing this uh changes on the Fly

using the react CH application and you can open any message you can see by

clicking the open button it will open that message in the message viewer where you can actually see that message so

this is actual complete application we will be building guys using full authentication plus the Gmail API so all

the source code will be given in the description so now let's geted started by building this application so let me

introduce to the modules that we'll be using for this tutorial so there is a certain module that I will be using

specifically for react CH application if you want to integrate the login functionality there is a dependency

which is react Google login so we are using this and then we

are using this as well Gip script so this is a package to load the

G Google API script and some functions so you need to import this so npmi also

and for building the user interface we are using this package react bootstrap this is required so now just go to your

command line just install these packages which is Google API script react Google

login button and then we need to import react boot strap and the

bootstrap also the base package so these four packages are required let me show

you the command in full screen so this is the first package second package third package fourth package so just

install all these four packages I've already done that and now in the next section we will start building this

project from scratch so I will see you guys in the next section so now to get

started guys we will start building the project from scratch we have this file app.jsx is currently empty we need to

initialize a simple functional component so it will let me start the application

it will refresh and it will show app here so this we are starting it from

scratch so now we need to actually get two informations we need to declare two Global variables right here first is the

client ID and the client API key so this API key and this client ID you need to

get it from Google Cloud console because at any time if you want to communicate

with the Google apis you need this information so in this way we will be working with Gmail API just you need to

create account at Google Cloud console and uh then you need to get your API key

I will simply paste my API key so and for the client ID it's very

simple when once you create the account you need to go to credentials and then just click the API section it will

generate for you just for client ID just click this option and select from here web application and then whatever is

your url This is My URL so just copy this URL and paste it in the first

redirect URI authorized JavaScript Origins just paste this URL without the traing Slash and now in

the authorized redirect urri again paste this that's all so click on create it

will give you your client ID so this will be different for you so

just paste it this and uh also one more thing you need to do you need to enable the apis so go

just go to the section and search for the API that you are working with which

is the Gmail API so you need to enable that API so simply search and just

enable that API I've already done that so that's why it is so after you do this

we now need to declare some State variables for our applications so we

need three variables first is our Boolean parameter which will check

either the user is authenticated or not then the array which will be storing the messages and third is the access token

so we have these three variables first is this Boolean parameter second is the messages where we'll be storing it in

Array initial will be empty array and the third one where we'll be storing the access token which we need to get once

we are authenticated after declaring these three variables we now need to go to the

jsx and before that we need to import bootstrap so we need to import the

CSS so bootstrap main.

CSS and also we also need the Google API script the package that

we installed it contains this method you can see we are importing this module

Google API script and then we are importing this method so after you do this just coming to your

GSX uh right here we will have a diff section we'll be giving

a bootstrap class which will be container margin top five these are all

bootstrap classes and inside H1 tag we will say your Gmail messages

so here you will say your Gmail messages so after this we after this H1

tag right here we now need to actually compare in this jsx condition inside cly

bracket and we'll be simply be using this variable that we declared and we'll be checking if the user is not

authenticated in that case we need to show the login button and for showing the login button we'll be creating a

component which I will call that login component and if the user is authenticated in the Turner operator we

will actually show a simple message that uh you are authenticated that's all this

is the Turner operator guys so based upon this condition if this value comes out to be false then we show the login

button if they are authenticated then we show you are authenticated now in the source directory we need to create a

folder components and right here we need to create a component called as a login

component jsx so right here we need to import this component so

we can simply say login component so it will be get imported if you see so now

inside this login component whenever we are calling this

we do need to pass some properties to this as props so we need to pass three

properties first is the so only two properties sorry on success which is a call back function which will get

executed when whenever you are authenticated and also on failure if any sort of error take place

then this function will execute which is handle login failure so we just need to initialize both these functions right

here at the

top the second one is handle login

failure so now in these both respective functions this is these are call back

functions of the API so in this we will'll get the

response the user response the user profile informations once they are authenticated we can console log this

and similarly in this failure method we will have the error if any sort of error take place so we just console logging it

so now right here in the login component we are receiving both these parameters so now receive it it's very

easy we will destructure it using curly bracket and just on success and on

failure we have these two methods we are receiving it as props so now in the js6

we need to import that Google login button you'll be using this it will be

coming from this package react Google login it's a simple login button and it

receives two parameters right here let me also pass the client ID as because we

have declared the client ID at the very top so we can simply pass it as a prop

which is the client ID so we can receive this client

ID as well so now the very first first

parameter is the client ID so we can simply pass it this variable the second

parameter it takes the button text so simply I will say login with Google the third parameter is a call back function

so we can attach this call back function that we are receiving it and then the on

failure so on failure we can attach and then lastly the scope so what

information you are accessing so we need to access these scopes

sl/ Gmail for reading the messages so we only need the readon scope and

also we want the scope for deleting messages as well so for this we need the

second scope so what I will do I will paste this so we are requesting two scopes for

reading messages and also for deleting it so you need to just give a space and

mention the second scope which is for modifying it so we are requesting two

Scopes so once you do this you will see a login button appearing it is saying

that the fail to resolve inut does the file

exist sorry this needs to be Min not MIM just make this change this is

min so you will actually see a login button appearing

it is saying that use state is not defined I think we haven't imported use State that's

why just import the UST State

hook so you will actually see the login button login with Google if you see so

if I click this button uh you will be authenticated and uh you will receive

this object a user information object which will contain the profile information access token and the profile

information as well about the user you can see given name Google ID image URL

email address so now we need to get the access token we need to store it in a

variable so inside our on handle login success so right in this call back

function you first of all need to set the authenticated user so set is authenticated needs to change from false

to true then we need to set the access token by using the hook function we can

set which will be response. access token and then we need to fetch the messages

so we will make this function custom function where we'll be passing the access token as an argument so now we

need to make this function which will be responsible for fetching the messages so it will be having a argument

passed to it which is the access token so right here in this function we will

fetch the user messages from their Gmail inbox so it will be a asnc function so

right here we have this Google API SDK and it contains a function load function and here we need

to load the client and here we need to pass our information it's Asing function our

client ID and the API key so we can say await Google API

client in it and we need to initialize the client by passing the API

key parameter and it stored inside our API

key and then we need to pass the discovery docs and it will be a simple

array and it contains which point you need to hit which end point so in this

case we are hting the Gmail API so you'll be providing Gmail API rest API

version number one rest so just need to mention that's all that we need to do

right here after this you make your rest call now to make the rest call we will

use the this method which is uh Google api. client.

gmail. users. messages so it will fetch the top 20 messages so here in this

method it has a method of list and here you need to provide an

object here the user ID option this needs to be me because we need to show

fetch our own messages that's why this parameter needs to be me and the second option here is how

many ma maximum results you want to fetch how many messages I need to fetch 20 messages at a time and then we need

to provide the access token as well which is stored inside

this access token variable so you simply passing the access token so after this

we can console log the response

coming let me just console log it and just show to you if it is working or not

and if I click the login with Google button and you will see you are authenticated and you will see this

object receiving and if you see the object we have the result and it contains 20 messages in

the Json response so each message will have property such as the thread id id

using the message ID we can retrieve the information about a particular message such as the title description everything

now using the message ID we need first of all need to store these messages in a

messages variable and you can simply say response. result. messages

and we need to store this inside this variable and then we need to retrieve

the content of the message and for this we can simply use promise all

function and we can actually Loop through each message by using the map

function and async for each message

we can get the message here so here we can use the method of

the SDK which is users

dot users dot messages

dot dotg get is the method and here you need to pass an object again the user ID

is me to fetch the own messages and ID here you need to provide the message ID

we can get this using the particular message and do ID and then again we need to pass the

access token as well for each request we need to pass the access

token so after you do this we can return the actual

message result

so after you do this we can console log

the full message and then we can also set by using the set messages function the full

messages so it will actually contain the information about each message if you now click the login with Google button

so if you now see you will receive information about each message such as

payload information label ID is actually whatever you can see the snippet which

is a title of the message payload contains the information the body of the message headers if you

see so all sort of information is available to us now we can display it in a table structure in a table like

structure and uh now for displaying it now coming back

to the js6 right here we will have a separate

component for this so instead of this H1 heading we will simply have a component

which will say message list so I will just need to make a new component in the components folder you can simply say

message list.

jsx so in this component messages message list we need to pass some

properties the first property that we need to pass is the actual messages which is the array variable so you can

simply directly pass the messages second will be the all these functions for

opening the message we will Define a function for opening the message then for starting a message for liking a

particular message we will Define this function as well star message and then for deleting the

message we will have another function which we will Define here which is delete message so we have defined these

three functions so let me Define this function right here

so then we have star message

function and then we have the delete message

function so defined these three functions so coming back to the message list component now inside this component

we need to receive these three four parameters that we are passing so

message list I think yeah so here we can destructure it

and we can say messages open message Star

message and delete message all these parameters we are receiving in

this component and now we need to return the jsx from this we will be

having the list group component of

bootstrap react bootstrap we will have this component list

group and then we will Loop through each messages so there say array so we can

simply map it through and for each

message we will have Define another component here this one I will Define it

as message item so again Define another component

here which will be message

item so in this component message item we will pass the information about a

particular message we will pass the prop property such as the key which will be the actual message ID the second

parameter is actually the actual message so it will pass the actual message as

the second property third property is actually again the call back functions

which is for opening the message for starting the

message and then for deleting the message

so now in this component message item right here we will receive all

these parameters once again so we can destructure it it's better to split code into

respective components just to make sure it happens consistently so now we will

need to actually get some information such as the subject title of the message

so for destructuring the subject we you can say message. payload do

headers doind method and you can find actually the subject h.

name triple equal to subject we need to fetch the subject in this way and then

we can get the value by question mark. value if the subject is not available then we simply say no

subject then guys uh after retrieving this we can actually now display

it so instead of this we can simply have

a list group item which again will come from react bootstrap

so we'll give some bootstrap classes for this for aligning it in the center

position so this tutorial is not about CSS so we have just used bootstrap for this so now in the strong

tag we will actually embed the subject of the

message and then we have three buttons appearing side by

side first again this button will be coming from react bootstrap you will see

this come buttons so these three buttons which will be there uh let me paste it

first one for opening the message starting the message and deleting the message let me paste all these three

buttons so if you see what we have done we have binded an onclick listener so we are having delete message we are passing

the message ID as argument starting message again we are passing the message ID and then opening message again we are

passing the message ID as argument so we have these three buttons If you just refresh your application you will see

the messages will display

I think some error is there uh message list is not defined I think

right here I think we are not including the component this needs to be message

list import that again click

message item is not defined I think we have an inside this

again we need to import this component message item it is

imported just make sure that you import components and after you see now you

will see the list of messages will display the top 20 latest messages on my Gmail inbox will display I can show you

if I open my Gmail inbox you can see these are my latest messages update to

link terms and Service Pro privacy policy you will see the title matches so

we have the top 20 latest messages and we have these three buttons for opening starting deleting but if I click the

either of these buttons the messages or the it will not work because we need to Define these messages so right here we

have defined these three methods for St deleting and opening a message for

now opening is very easy for opening a message we just need to construct a

URL all these three functions will receive the message ID as argument so we can simply

pass message ID so now for opening a Gmail message we

just need to construct a URL using using the message ID just use

destructuring uh sorry template string mail.google.com

SL mail slou slash we just paste

it so you will see we are at the end we are embedding this message ID and then

we just need to say window. open you need to open this URL and then in a new

tab so blank so if you try to now

refresh if you try to open this message click on open you will see the message will open in our inbox

automatically so we embedded this message ID right at the bottom on the end side you can read your message now

we're starting the message it's slightly different need to make a rest call for

starting a message so just make this async method this star and delete methods just

make them async so for now actually starting a

message we just need to say await Google

API do client gmail. users do messages and we have the modify

method and right here we need to modify the message user ID again need to pass

me and ID of the message and then the third object is a resource object and

here we need to specify the I add label IDs and then we need to Simply pass it

start we need to start a message so it will add this label to this message and

at last we just need to pass the access token as well so we are passing our access

token so yeah just replace the message ID sorry here passing it so access token

if you see we are passing this access token that we defined in the state variable so we have the access token

already available so in this way we can start the message and delete process is really

simple for deleting it we again use the same method modify

but for deleting we provide a different label ID because we provide one more

option here which is remove label IDs from inbox so it removes the message from the Inbox and add this to the trash

so we add this label of trash and remove it inbox again the same options we are

doing it user id id sorry this is a message ID we need to

pass lastly we also need to remove it from from the browser so you can simply say set messages whatever we need to

remove this messages so we can say messages. filter and for this message we need to

remove this message so we can say message. ID we don't want this message

so so this needs to be thread ID sorry message

ID that's all that we need to do guys this is the overall application is

complete if I click the login with Google button you will get the list of

20 latest messages you can change that number you can get more messages so now

if I want to delete this message I can simply click delete so once I click the

delete button so it is saying that some error

has been required path parameter ID is missing

let me see what is the

problem uh let me see what is the problem here it's a

ID okay I think we need to call this as ID that's a problem I think or some type

of mistake has happened let me just paste the

code so we are actually passing the ID here which is the message ID if you

see and for deleting purpose again we are filtering it passing it the actual

ID if you see so we just replace message ID with ID I think this should

work so now if you see that message has been removed it has been transferred to

trash if I change my if you refresh you will see I will not see that message if

I open the trash here that message has been moved to trash you can see update

to Links terms and privacy policy so in this way you can start a message let's

suppose this message I want to save it business activity is now Rising I can say start so now you can see message

start successfully so if I go to the star

section so you will see business activity so this message has been saved

so in this way programmatically in react you can communicate with Gmail API to read messages delete messages star

messages or open the messages very easily so I have shown a complete

example thank you very much for watching this video all the source code is given in the

description and do check out my website as well free mediat tools.com which contains thousands of free tools

regarding audio video and image and I will be seeing you in the next video