Guide to Building Google Calendar App

So this is the application we are going to make. So let's have a look at my Google Calendar. So we have no events for this week. So let's create one using the API that we create using this React application. So firstly, we need to sign in and authorize our calendar. So let me click here. So typically, this page would open as a pop up. But since we are in full screen mode, so we are seeing it in a new window. So let me select my account here. And now we need to authorize calendar. Let's click on continue because this app is in dev mode. and now here we need to simply click this that is to authorize calendar so now let me click on continue and now we are back here and now we see that we have been registered so now let me simply provide in the summary for the event so let's provide in a summary so have a date with my girlfriend and then we need to provide in the description and the location would be Eiffel Tower Paris France simply like this then we need to put in a start date time So let's simply choose the start date time let the start time be 949 p.m And now let me put in the end time and that would be again 13th of December and the end time would be 11 49 p.m. so now let me simply click create event so the event would be created so we see that event is created so now let's go to our Google Calendar and we see that we have an event here that is have a date with my girlfriend so if I click on this event we see all the details of this event so the description of the event the title of the event and the location of the event so if I simply click here we see that the map would be updated here so this is what we are going to create in this video okay guys so welcome back again so in this video we'll be creating a full stack application using react and back end would be node.js express application so we'll be using the google calendar api to create events inside our calendar and for that we'll be using oauth2 so the flow of the video would be something like this firstly we'll be creating a new project inside our google developers console and then inside that project we would be enabling the apis and then we would be setting up the oauth consent screen and then we'll be creating the credentials to be used for OAuth 2 and then we'll be adding in the required scopes that is for the google calendar api we need to add the scope and we'll be adding that also and then we'll move ahead by creating the react.js front-end application and then we'll see that how do we get the authorization token which would then be used inside the backend application to generate a pair of access and refresh tokens which would then be used inside our backend application to create events inside our google calendar so the event data would be coming from the front-end react.js application and that data would be handled by our backend express application to create events inside our google calendar and moreover we'll be looking into a couple of questions that i get in comments when i made a gmail api video and the drive api video and those questions were that a couple of you commented out that your refresh token expires after seven days so the answer you would find in this video and similarly a couple of you have said that you do not get refresh tokens from the response when you provide in the authorization code and you only get back the access token so this answer would also be answered in this video and plus some extra questions which you also ask so that would also be answered in this video and even if you are new here and you are watching this video the first time on this channel then also you might land up in trouble and you would be getting you would be getting these questions in your mind that is why the refresh token expires and why do you not get the refresh token from the response So that's all what we are going to do in this video. So without wasting any time, let's dive into our code and let's see that how it's all done. Okay, so the first thing you need to do is you need to go to this URL that is console.cloud.google.com. So if you have not created any project inside your Google console, then you might not be seeing this page. But instead, you would be seeing that as create a new project. But since I've already created some projects, so I'm not seeing create a new project. So for me, I need to go here. and then i need to simply click here that is create a new project so let me click here that is new project and now we need to give our project a name so let me simply give it a name like calendar tutorial so tutorial simply like this and for the location i'm simply going to ignore it for now and now let me simply click on create and now it takes a moment to create so the first thing you need to do when you create a new project is that that you need to enable APIs and services and this enable APIs and services is found inside the dashboard tab here so let me click on enable APIs and services and here we need to search for the calendar API so let me simply search calendar and let me press enter and we need to select this google calendar API so let me click this and then I would enable this API for this project so let me click on enable and it would take a moment or so So the API has been enabled and now we are back here. So now what we need to do, we need to simply go here and because we are inside this APIs thing here and we need to go back to the dashboard. So I simply click there and now before creating credentials for this application, we need to configure the consent screen first. So let's click on OAuth consent screen and here we need to choose internal or external. So for this thing, you need to choose external. and if you want to read what is internal you can read it here but typically you would be choosing external here so let me click on create so here you need to provide in the app name which would be publicly visible and this is the name which users are going to see whenever they are trying to sign in with your application so i will provide calendar api for tutorial And then we need to provide in the user support email address. And here I can simply provide in my email address. And for app logo, I would highly recommend that you should not provide an app logo as of now until and unless you are going for production, because it takes a couple of days to verify the app logo and publish the app. So for testing purposes or for development purposes, you should not provide an app logo. And for the app domain, I'm not providing an app domain as of now. And for the authorized domain, also, I'm not providing any authorized domains. and for the developer contact information i will be providing in my email address and now let me simply click on save and continue so now this is an important step we need to add the scopes for this application so let's click here that is add or remove scopes and now here we need to select a couple of things firstly we need to get the email address of the user we need to get the profile information of the user and we also need to get the open id so let me select these three things and now let me also search for calendar here so calendar and here we need to simply select this one that is google apis.com forward slash auth calendar and now here we need to select this api or this scope here and now let me simply click on update and now we see here that for the non sensitive scopes we have the open id email in the profile but for the sensitive scopes we have the calendar thing here and now let me click on save and continue and now here we need to add in a test user and if you do not add in a test user as of now because you are in development mode so you would be getting a screen like this that says that it is forbidden so let me simply add in a test user for development purposes and once you publish your application then there is no need to add test users to it so let me simply click on add users here and here i would simply provide it my test email address so that would be again yours truly 2607 at gmail.com so let me simply click on add here and now we have here one test user and similarly if you want to add more test users you can simply click here again and you can add as many email addresses as you want so let me simply click on save and continue again and this is the basic summary of this application or this OAuth consent screen and now let me simply click on back to dashboard and now we need to create the credentials for this application so let me click on credentials and here we do not have any apis keys associated with this application or for or this project we do not have any or two client ids and neither the service account so since we are going to use or two for this application so let me click on create credentials and or to client id so this is the thing which we need to click on so let's click here and here for the application type we need to provide in web application and for the name you can give this a name whatever you like so let me simply call it calendar react app something like this and for the authorized javascript origins i would simply like to add in my localhost port 3000 because my react applications runs on that port so http forward slash localhost colon 3000 simply like this and now let me simply click on create and now we have the client id and we have the client secret and this client secret you should keep it very secretly but since i would be deleting this application or this client id after i completed this tutorial so i can keep it open but you should definitely keep it this client secret highly secret so let's click on ok and we would be coming back to this application to copy this client id and client secret in a moment So let's click on OK. And this is the client ID which we created just now. So this is all what you need to do inside console.cloud.google.com. And now what we need to do, we need to create our front end application using React. So let's do that. OK, so here inside my terminal, what I've done is that I've created an empty directory that is called Calendar API. So if I do ls here, we see that the directory is currently empty. so what i'm going to do i'm simply going to initialize a new react application inside a folder called front end so let me do npx create react app front end use npm and basically i provide this flag that is use npm because i want to use npm as the package manager and not yarn because create react app uses yarn as the default package manager so let's press enter and it would take a couple of seconds or so to create the front end application inside this folder so the react application is created inside the folder called frontend so if i do ls we see that we have a folder called frontend so let's open our application that is this folder calendar api inside vs code so i can do code dot because i prefer to use vs code and now we see inside vs code we have a folder called frontend and the typical react application is created inside this folder so let me open my terminal here and let's cd into the frontend folder because currently we are in the calendar api folder And now what I'll do is simply start the application by doing npm start and our application would be up and running on port 3000 So this is the old application and the new application we see that we have a spinning react logo So now let me install a couple of dependencies inside this project or inside this react application So let me stop the application here and what I'll do I'll install a couple of dependencies So the first dependency I want to install is this that is react Google login because this is the thing which provides me the authorization code which i need to send to my backend server so let me grab this thing here that is the install command so let me click here to copy it to clipboard and let's go here and what i'll do i'll simply ctrl v here or command v unmark to paste it here and at the very same time i would like to install one more dependency inside this front-end package and that is called axios to make api calls to my backend server so let me install that as well as of now So let's press enter and again it would take a couple of seconds to install. So this is installed. So let me clear out again. And now what I'll do, I'll simply start the application so that it is started in the background. So let's do npm start again. And we have the typical spinning react logo here. So let's go back here. And now what I'll do, I'll open my app.js file here. And what I'm going to do, I'm going to get rid of this header tag here or this header HTML element here. And here what I need to do, I need to provide an H1. And here I can simply say Google Calendar API like this. And now let me save this. And if I go back here, we see that we have this Google Calendar API. So now let me create the sign in and authorize button here. So for that, what I need to import, I need to import one thing from the package that we installed. That is React Google login. and that is the google login component so i can simply say google login here simply like this and now here after the h1 what i'll do is simply wrap this div inside a div here uh like this and here what i'll do i'll simply create one more div and these tips are only for styling purposes which i'm going to do later in the video and here i would what i want to do i want to use this google login component or if you prefer you can also use the use a google login hook from this package itself but i prefer to use this google login here so i can simply say google login like this so the first thing this component takes is the client id so i can say client id would be equal to something and the client id we can get from our application that we created on google console so let's go to our google console here and this is the client id and this is a public client id so anyone can have this client id it doesn't matter but the client secret is super secret and that should never be present on your front-end application but you can always copy the client id here so let me copy it here and let's go back and let me paste it here and in typical production application this client id should be coming from env file here somewhere inside your application but since it's a tutorial so i am hard coding it and now the second prop it takes would be the button text so I can provide in a button text like this here so the button text would simply say sign in and authorize calendar so authorize calendar simply like this and let me save it so that it is automatically formatted here and now here I need to provide in two more props that is on success would be equal to a function here so let me simply call it response google simply like this and this function I am going to create in a moment and now we need to provide in one more prop and that is on failure in case there is a failure here so let me simply call it response error and again this function I would be creating in a in a moment and then we have the cookie poly So for this cookie policy, I can simply go to this package here and let me copy this thing from here That is cookie policy would be single host origin So let's go here. Let me provide in the cookie policy like this and now what I need to provide here This is some important step to get the refresh token. So this is important. I am marking it here because if you do not do it, then you won't be getting the A refresh token on your backend server. So here we need to provide in the response type and response type would be code here and then the access type would be offline so that we can use this code that we get back from this google login authorization we can use this code on our backend server and we can get back the refresh token which can be used even when the user is offline when we are accessing his google calendar he can be offline also so it means that we can use the refresh token generated from this code anytime we like it doesn't not depend on the user then until and unless he revokes our application so here we need to provide in one more prop that is a scope and a scope would be open ID so by default this Google login component has profile and email as the scope here but I prefer to be explicit so let me provide here open ID email profile and then we also need to provide in the scope for the calendar so let me provide in the scope for the calendar here and it is the same scope that is this scope which we added when we were configuring our auth consent screen so this scope you need to provide here otherwise you won't be getting the refresh token that can access your google calendar so that's all what you need to do here for this google login thing and now we need to create these two functions inside our app component so here i can simply say const let me copy this thing from here so response google and let me paste it here and this would be an arrow function and for now let me simply console.log the response and this response we would be getting back here as a parameter inside this function and similarly me also create this function that is response error so let me copy it so response error would be error and here I can simply log in the error so console.log error like this so let me save it here and now what i need to do or what i can do i can go back to my application here which we have running in the background we see that we get this button here that is sign in and authorize google calendar so let me increase the font size here and we see that we have this button so now what I'll do is simply right click and inspect it because we are logging everything and now here we have our console open so as soon as I click on the sign in on the authorized calendar we get back this window open here and here we would be choosing our test email account that we added inside our Google console so let me select this test account and now here we see that we are getting this message here that google hasn't verified this application and that is very true because we are in development purposes and we haven't published our application so it simply says that google hasn't verified this application so no need to worry we can simply click on continue here And now we see that we are on this page and we see that this is the name of the application that we provided in the OAuth consent screen that is calendar API for tutorial. So this is what we are getting here and now here by default these open id and email and profile are by default checked here but for the calendar the user has an option whether to select this or not to select this. So here I am simply going to select this calendar to provide our application to access to his this accounts google calendar so let's click on continue And now we are back on our application and we see that we get back this code. And this is the code which we are going to use on our backend application to get back the refresh token. So for that, what we need to do, we need to create our backend application. So to create a backend express application very easily, what we are going to use, I'm going to use this package here that is express draft. And this is a super simple package. So what you need to do, you need to simply do npm i-g to install this package globally on your backend. machine and then you need to simply do exp dot to install the boilerplate code inside the current folder or you need to simply do exp backend or my app to create a new express application in whatever folder name you specified here so let's go back to our terminal So let me clear out the terminal here and if I do ls here we only have the front-end application. So what I can do I can simply do or to install this package what you need to do you need to simply do npm-g express draft to install it globally on your system and then what you can do you can simply do exp backend to create a folder called backend and simply generate the boilerplate code for an express backend api. So let me simply do exp backend and and now it would take a couple of seconds to install this express boilerplate code inside this backend folder and now the express boilerplate code has been generated so let's go back to our vs code and here let me minimize this front end folder and we see that we have a back end folder here so if we open this back end folder we see that we have this app.js file and we have a package.json file so if you open the package.json file we see that This express draft package installs these dependency inside our backend folder. That is the .env package to get the environment variables, the express package, the HTTP errors package to handle the errors and Morgan to log in the HTTP request. So let's go to the ENV file first. And to run our backend application, I would simply need to provide in the port 4000 because I need to run my backend application on port 4000. So let me save the .env file. And if you open the app.js file, here we see that. we have a typical express application scaffolded here and we do also have a route here that is called app.use forward slash api which simply points to this folder here that is routes api.route and if you open this api route folder or before opening the routes folder we see that we are simply listening on the port that is coming from the environment variable or we are simply going to run it on port 3000 but since our react application runs on port 3000 So we are going to run it on port 4000, which is coming from the .env file. And then we are simply started listening on whatever port we need to listen. And then our server would be started or the backend server would be started. So if I go to this routes file here, we see that we have only one file that is api.route.js. And this is what this forward slash API is pointing to. So this is the only thing which we have inside this application. So why not let's start this backend application. so let's open the terminal here and now what i'll do is simply open one another terminal inside this terminal so now we have two terminals running and here what i'll do is simply cd into the backend folder and here what i can do to start the backend application we have two things here either we can use the start script which simply uses node to start the script or we can use the dev script to which simply uses notemon to start the application and this notemon simply restarts the application whenever it sees changes inside the dot js files And this is NodeMon is the div dependency of this package here or this application here. So what I'll do, I'll simply do npm run div to start the application on port 4000. And we can see that we have this application running on port 4000. So if I command click here, we see that we get this message here. That is awesome. It works. And if I simply go to the index API route, we see that we get this message here. That is OK. API is working. So now let's create a post route inside this application or inside this api.js file. So here what I'll do, I'll simply say router.post because I'm creating this route here because I need to send this code to my backend server so that I can exchange that for access and refresh tokens. Though only refresh token is required but it would simply provide us with the access token, the refresh token and the id token. So let's go back again. so here i would simply say create tokens like this and this would be an async callback function and here it would take request response in next as the arguments here and here whatever i'm going to do i'm going to do inside the try catch block so try catch like this and if there was an error i can simply call it next with the error parameter here because this would be cached inside app.js inside this error handler here so now let's go back to our api.js so let's copy this url from this thing here and let's go back to our front-end application and let's go to our source folder here and inside the app.js file so whenever we are getting back a response from google google we see that we are getting back a code here so we can get this code by using response.code here because this is a object here and we can simply destructure code from response.code so let's go back so here what we can do we can simply say const code equal to not like this but code equal to response simply like this and now what i'm going to do here i'm going to make a post request to my backend server so i can do axios uh i'm not getting autocomplete here Maybe this is installed or not. So I guess that Axios is already installed. So let's go back to our app.js file and here I can simply say let me let me import it manually. So import Axios from Axios like this and now here I am going to do axios.post and here we need to post it to forward slash api remember that this create tokens route is present inside the forward slash api route so if i go to app.js so forward slash api and then whatever route is present here so this is the create tokens route so that's what we are going to use so forward slash api forward slash create tokens and then we need to provide in the code here like this as the request body and then we would be having a then here so then we have the response so here for now let me simply console log the response so console.log response.data like this and then we have the catch block so here we have the error in case if there is any so console.log the error.message simply like this and let me minimize this console here or this terminal here so let's save this and let me remove this ugly looking logo line from here so now whenever we are getting back a response from google we are making a post request as soon as we get back a response and in the response we get back a code here and then we are simply attaching that code as a request body to this post route here and that's all what we are doing here so let's handle this route inside our backend application so let's go to our api route.js and here if we have a look at the app.js file we see that we are already handling the parsing of the request body by doing app.use express.json in the app.js file so we can say that const code equal to request.body simply like this and for now what i'm going to do i'm simply going to say rest.send code so that we can see that if everything is working fine so let's save it and Let's go to our app.js file and let's save it again and let's go back to our browser here. So let me reload the page so that the console is empty here and now let me simply click on sign in and authorize calendar and this time let me select this account here so we would be getting back our response code and now we see that we are getting this message here that is post localhost 3000 API not found and that is because our backend application is running on port 4000. so let me show you one more thing here or you'll learn one more thing here so let me copy this url here and here we need to simply paste in this url that is this url and instead of 4 000 3000 you should make it 4 000 and this time you would be getting a course issue here so let's reload here so let's click here so let me select the account so we see that we have this error here and that is a course error and we see that no access control origin header is present. The easiest way to fix this is that that either inside your express application you can add in a course package to handle incoming requests from port 3000 or what you can do you can simply make a proxy pass inside your reactjs application. So let me do that here. So for that what I need to do firstly I need to stop my front-end application. because I need to make changes inside the package.json file of the front-end application and only then this would work. So let me copy this URL here that is http://localhost.port4000 and let me go to the package.json file and here what I need to do I can simply provide in a proxy here that is proxy all my requests to this URL if that URL is not handled by our react application. So that's what this proxy thing does here. So if I save this application here and now let me start this application once again so now what i can do i can go to my app.js file so let me go to my app.js file first and here what i can do i can simply remove this piece of code from here and i can directly make post request to this forward slash api forward slash create tokens so it would see or this proxy pass would see that since this url is not handled by our react application so it would proxy all the requests to this url that we have set here So that's what that proxy pass does. So let me save it and let's go back. Let's reload. And now let me simply click on sign in and authorize calendar. So let me select the account here once again and now we see that we get back this message here and this message is coming from line number 12 as you can see here and if we go back to our application this is the line number 12 and we see that our backend and frontend applications are being connected here. So now let's go to our api-route.js file and here we need to do a couple of things to get the access token and refresh token from this code. So let me go to my backend application and let me stop this backend application because I need to install a couple of packages here. So inside my backend application I need to install one package here that is called Google APIs. So let me press enter and it would take a couple of seconds to install. So now the package has been installed. So what I'll do is simply start the application once again so that it is continuously running in background. and let me minimize the terminal here and now here what i need to do i firstly i need to require google from google apis i would say const something equal to require google apis like this and what i need to destructure I simply need to destructure Google here simply like this and now what I need to do I need to create an ova2 client from this Google thing here so what I can say I can simply say OAuth2Client equal to new Google dot auth dot OAuth2 and here I need to provide in the options here and the options we need to provide here would be the Google client ID like this though I have not created these variables but I would be creating these variables in a moment and now I also need to provide in the Google client secret and then i need to provide in the redirect uri and if you remember that for the application on the google developer console we provided this redirect uri that is localhost port 3000 and not localhost port 4000 though localhost port 4000 is a back-end application but the redirect uri which you provided inside the console.google.com was this uri so you need need to provide the URI of the front-end application here so now let me put in the values of this Google client ID and Google client secret so let me simply say const Google client ID client ID equal to something and const client secret would be equal to something so let's go back to our developer console and let's get the client ID and client secret so let's go here so let's click here the calender Reactor so these are the credentials that we generated earlier in the video so let me copy in the client ID so let me paste it here and let me also grab in the client secret and this is a super secret that should only be present on your backend application and not on your front end and this should not also be exposed like i am doing it and i am simply doing it because i am going to delete this google client id and client secret after recording this tutorial so now we have this o2 client initialized like this so now what i'll do i'll i can create tokens very easily or very simply like this so let's go to this create tokens route here and instead of sending back the code what i'll do i'll simply say const tokens equal to or let me simply call it response because it would make more sense for you guys so cons response equal to await over to client dot get token and here i need to simply provide in the code that we extracted here from request.body and now what I can do I can simply say res.send I can simply send back the response which we get here so if I save this application and if I go back to my front-end application so this time when I authorize my or when I do authorization here instead of simply getting back the code from the front from the back and as we were getting before we should be getting back the response or a response full of tokens from the google api server so let me clear out the console here and let me click on sign in and authorize once again so now here I'll simply do select this account here you And now here we see that we get back tokens here. So we have the tokens here and we have the response here. So that's why I was preferring to destructure that response. That is this response to get the tokens here. So the tokens are these tokens here. And we have the access token. We have the ID token. We have the scopes associated with this. application and so on and so forth and you might be wondering that where is the refresh token and this is one of the questions that you might ask me in the comments if you are not watching this video clearly is this that the first time you authorize your Google API you get back a code and the first time you exchange that code with the Google API server to get back the tokens then only the first time you would getting back the refresh token so it is your duty to store the refresh tokens the first time the code is issued for your application. So now we see that we have multiple time authorized our application for this user account. So we get back codes multiple times. So therefore, I'm not getting back here any refresh token here, but we can do so very easily. So what you can do, you can go to myaccount.google.com. And here we see that we have these third party applications associated with our account. So what I'll do, I'll simply remove access for this account here. So let me remove the access here. And now what I'll do, I'll simply go to my React application once again. So now we saw that we were getting back only these access and ID tokens here, but not the refresh tokens. But since now, this account would now again be authorized from our user account, or this application would again be authorized to our user account. so we would be getting back the refresh token again so what i can do i can go back here to my back-end application and instead of sending back the response i can simply destructure here tokens like this and i can simply send back the tokens here so tokens here though you should never send back these tokens so this is a highly no-no thing here that is you should never send back the tokens to the front-end applications because in this tokens is the refresh token and that refresh token is your responsibility on the behalf of the user who is authorizing your application to keep it safe somewhere inside a database so let's save it and let's go back and let's simply click here that is sign in and authorize once again or let me clear out the console once again so let me click on sign in and authorize and now here let me click on your australia 2607 and here i need to simply click on continue so you see that again we need to select this thing here that is the calendar thing here and now let me click on continue and now we see that we get back the tokens response here and this time we see that we are getting back a refresh token and this refresh token should never be sent back here to the front-end application it is only for demonstration purposes but instead you should keep this refresh token somewhere inside the database associated with that user who has authorized your application so what i'll do I'll simply copy this refresh token from here. So let me copy this refresh token here. That is copy string contents for this refresh tokens because this refresh token would be used to create an event inside the calendar or for this user. So let me copy the string contents for this refresh token. And again, I'm telling you that whenever you get back a response or you get back the tokens here from this call, you should save the refresh token in the account inside the database associated with this user who has authorized your application. So for simplicity of this tutorial, I am simply going to say const refreshed or let me simply make a variable here somewhere so let me create a variable here at the very top i would say const refresh token would be equal to this token that we simply copied from our browser though this refresh token should be stored inside the user database and whenever you want to create an event you can then simply get the refresh token from the user database and then you can use it as in what you like so now this part is complete that is create tokens so now let's jump on to the second part and that is how to create an event inside the google calendar for the user who has authorized this application or for this or for whom this refresh token is valid so what i'll do i'll create one more post route here so router.post forward slash create event so like this and then we have the async function that would be request response comma next like this and again i would be doing each and everything inside the try catch block and If there is an error, let me scroll down. If there is an error, I would simply call in next with the error is the only parameter. And now here inside the try block, I would be accessing the request body that is coming from the front end application. So let's go to our app.js file. And currently we only have this Google login button, but we do not have any form here to submit to the back end to create an event. So for that, what I'm going to do, I'm going to again create it. div here not divi but div and here what i'll do i'll simply create my form here and here this would be a very simple form and the action would be no action and we only would be having an on submit event on this form and here it would simply say handle submit like this and this function would be created somewhere here inside our application or inside our app.js file so const handle submit would be an arrow function again and the first thing we need to do we need to do e dot prevent default to prevent the default behavior of the submission of the form and here inside this form the first thing i would like to have is a label so label for this id and id would be summary not some t but summary like this and label would be summary like this and then we would be having a break statement and then we would be having an input element and the type would be text and id would be summary like this and then we need to make this and input as a controlled input field so what I can do I can create a couple of state variables inside this application so I need to use use state from react so what I can do I can simply say use state from react and the state value would be summary and initially the summary would be nil or empty so initial state would be an empty string so we see that we get a red squiggly line here so we need to use use state from react so let me simply press command and dot to import use state from react so if we scroll up we see that we have imported user state from react though this is not the best way to handle forms in react but since it's a tutorial again i'm simply doing it like this but if you are in a production application then you should definitely be using any react form library like formag or use form hook or something like that but i'm simply going to use the state variables here so let me create one more state state variable or a couple of more state variable so use the state would be description set description initially it would be null then we would be having user state so use a state for location or for the location string again it would be null initially So then we would be having a useState value for startDateTime and initially it would be again an empty string and similarly we would be having a state variable that would be the endDateTime that would be the event's endDateTime. So endDateTime like this and initially state would be an empty string simply like this. So now let me use these state variables inside our application or inside these input fields. So for the first field that is a summary field we would be seeing that value would be equal to the summary state variable. So why I'm not getting autocomplete here. So let me copy it and let me paste it here. and then we have an on change event here on this input field so we would be having an event here so here for this event i can simply say set summary set summary would be e dot target dot value simply like this and now we are going to have a break statement again and now what i'm going to do i'm simply going to copy this piece of code and let me paste it a couple of more times because we need to have it for the start date time end date time location and description so this is the first field which we handle that is the summary the second one would be description like this and this would this label would say description like this and now the value would be description and this would be set description like this instead of this input i can simply call it text area like this simply like this and the id would be description instead of input i'm simply changing it to a text area field here though it doesn't matter but still i'm going to do it this way and now we have the location here so i can simply say location here here and this would be again called location here and input type would be text ID would be location value would be location and instead of set summary it would be set location simply like this for the last or for the last two input fields we have the value would be start date time so label ID would be start date time and this would simply say start date time and here I can simply say start DateTime like this and now instead of text I would simply call it DateTimeLocal so that we can select both date and time in a single input field. and instead of set summary it would be simply called set start date time simply like this so now for the end date time what i can do i can simply copy this state variable that is end date time and i can use it here that is end date time this would be like end date time let me provide a space between and the id would be end date time value would be end date time and instead of set summary it would be set end date time simply like this and the type would be and date time local here like this so that would be all i guess for this input fields and now we need to have a button to submit the form so we would be having a button and that should say create event like this and the buttons type would be submit so it would be a submit button so submit like this and that's all what we have inside our form so what why not let's log in all the values whenever we submit our form so here what i can do i can simply do console.log summary description location start date time end date time simply like this so let's save this application and let's go back here so we see that we have a pretty ugly looking form here as you can see on the left hand side and this is all what we have here as of now but you see that you are getting the logic that how each and everything works but now what you want to have here is this that whenever the user is authorized here we do not want to see the sign in an authorized calendar button and if the user is authorized then we want to simply show this form here so that is pretty simple to do and that is a pretty ugly way to do also inside this tutorial here i'm simply going to use a state variable here but in your application you would be providing you would be using in the context api to keep a track of the user whether he is logged in or not but here i am simply going to create a state variable that would simply keep a track of whether the user has clicked the sign in button or not and here it would simply say signed in said signed in so initially it would be false and if he is not signed in then we would be showing this div that is the google login div so here let me make a check here by using the jsx expression so signed in not signed in then we want to display something otherwise we need to display something else so now inside these braces what we need to do we can simply copy this piece of code from here let me paste here and this div we can paste in the other brace so let's copy cut this div out from here and let me paste it here like this so now let's save this and here we can call this set signed in after we make a post request to our backend server and then and we get back a response from the server so here i can simply say set signed in to be true like this so let me save it if we go back to our application we see that we do not see the form here but once we click on sign in and authorize and just remember that i've already copied this refresh token inside my backend application because this time we won't be getting back a refresh token because this refresh token is only issued the first time the user has authorized your application so let me click on sign in here and we would be choosing this account here and we see that now we see the form here and as we know that this time we do not get back a refresh token but we already have that inside our backend application so now let's provide in some summary here so let's say it's uh this is summary and for the description so let me simply say lorem ipsum location let's simply call it paris france or whatever it is and for the start date time let me simply click here and let me choose a start time here or let's say 12 10 pm like this and for the end date time let me simply call it like 12 15 pm And if I click here, that is create event, we would be getting a log statement here inside our console. So let me clear out the console first. And let me also increase the font size here. So let's click on create event. And we see that we are getting these values here inside our console on the front end application. So now we are ready to make a post request to our back end application. So let's go to our back end application. Or let me first make a post request to our back end application so we can directly. do whatever we need to do with these variables here and again i'm not making any if checks or something like that for these variables here you can do it yourself because it would take much time so i can simply say axios.post forward slash api forward slash create event not event but event and here i need to provide in these values as the request body that is a summary description and so on and so forth so let me provide it here and then we have the then and catch block so let me copy this piece of code from here it would take less time so once we have the response we can simply log in the response dot data thing which is coming from the back end otherwise we are simply going to log in the error message from the back end that is coming here so let's save it here and what i'll do i'll go to my backend application here and here inside the create event what i can do i can simply extract all these variables that are these variables that are summary description location start date time end date time from the request body so i can say these things equal to request dot body simply like this why it is coming on the second line i don't know okay so let it be like this so now what i need to do i need to access the google calendar api from this refresh token which we stored inside our database or we are making that different this refresh token is stored inside our database so now creating an event is very simple to do so what i can do i can use this or to client here that is this new or to client with the same client id and the same client secret and i can set some credentials on this or to client so what i can do i can go to my create event for of route here and i can see oauth to client dot set credentials and here what i can do i can simply pass in the refresh token and the refresh token is the refresh token that is coming from the database though it is hard coded here like this but typically this refresh token is stored inside your database And that refresh token should be present here. So that's all what you need to do here. So let me make a space here so that it is more clear to you. So now we need to access calendar from the Google Calendar API from this Google APIs packet. So what I can do, I can simply say const calendar equal to Google.calendar v3 because we are interested in the v3 API. So make sure that you use the v3 here. And now what I need to do, I can create an event here. So I can simply say const response equal to whatever response we are getting back whenever we create an event. So we can say await because it's a promise. So calendar.events.insert. And here we need to provide in the options. So the first option we need to provide is the authorization option. So we can simply say auth. would be this OAuth2Client. So we can simply say OAuth2Client like this and now we need to provide in the calendar ID. So calendar ID typically would be the primary calendar ID here because this is a hard-coded primary here because a user might have multiple calendars associated with this account but typically normally a user only has a primary calendar. and this primary is the calendar id of that primary calendar. So if I go here and if I go to my Google Calendar here, so this is what I see here is my primary calendar. If I might have multiple calendars then it would be shown here but typically a user has a primary calendar and that is what is denoted here by this calendar id here and this should be primary almost 99% of the times and then we need to provide in the request body. that is the actual request event body so firstly we would be providing in the summary so summary would be summary that is coming from the request body that is coming from the front-end application so summary would be summary then we have the description would again be description from the front end application or that is coming from the front end application location would be location here that is again coming from the front end application and then we need to provide in the color id for this event so let me provide here six so what i've seen here is this that you can provide in some color ids like this so let me simply copy and paste some color ids for your reference here do you can again make a request to calendar API to get the color IDs but here is what I have here so if you provide in one here then you would be getting an event that is with a background blue in color if you provide in color ID 2 then you would be getting green here and 3 purple and so on and so forth so here I am simply going to use color ID 6 or let me use this color ID here that is 7 for turquoise so let me put in the color ID to be 7 and then what you need to provide here you need to provide in the start date time in the end date time so for the start date time you need to provide here start not like this but start and then you need to provide in the date time object here and here i can simply say new date like this and then i can simply provide in the date string that is this start date time string here to create a new date object here and similarly i would need to provide in the end date time so that would be end as an object here and then the date time would be this new date and here i need to provide in the end date time string here because these end date time and start date time are coming as strings inside my request body so that's pretty much about it and we would be having a response if we have any and just ignore this red squiggly line here everything is fine and finally we can simply send back this response to the front end so we can say rest.send a response like this so that's all about this back-end application or this back-end part so let's go to our front-end application so currently we see oer in this calendar that is for this different user so let me switch switch my account here that is for this account that we authorized here so let's go to yours truly's calendar here that is the account we authorized so let's click here so currently we see that we do not have any events created inside our application or inside our calendar here so let's go to our react application so this is the pre-filled form here or this form that we filled earlier so now what i'm going to do i'm simply going to click here that is create event so if everything went well then we should be getting back the response after creating the event so let me click on create event And we see that we get back this object here. And if we open this object, we see that we have this data thing here. And inside this data thing, we have each and everything related to our event here. So the moment of truth, let's go to our calendar here. And we see that we created this very small event that is only of five minutes. So it is very small. So let's try to create one more event using our API. And this is the summary. Let that summary description and location be this thing here. So let me change the start date time to something else. So let me select 15th December and time 12.10pm. And the end date time would be again 15th December. And let the end time be 4.15pm. like this so let me clear out the console once again and let me create the event here so let's click here and we see that we again get back an object here and if we go to our google calendar here we see that we have created this event and if i click on this event we have the details about this event and if i click on the On the location icon here, we see that we get the map here as well. So this is all about this tutorial. And for the styling, if you are seeing that in the demo, I showed you that style. And that style was designed using Chakra UI. but since this video is not about chakra ui and this is about creating an event using google o2 using the google calendar api so i'm just ignoring the styles here but if you want to learn more about chakra ui then you can watch my video about chakra ui in which i created the to-do application using chakra ui and moreover i prefer not to style this application by using any particular library because you might be using different libraries depending on your choices you might be using tailwind you might be using bootstrap or you might be using chakra ui or like whatever ui library you might be using so that's why i have not styled this application in a particular way so now one of the questions that i mentioned earlier in the videos that most of you have commented in my previous gmail api tutorial or the drive api tutorial that your refresh tokens get expired after seven days and the reason for this is that that if you go to this package here that is google apis inside github and we scroll down we see that let me scroll down here and let me show you that where it is written so let me let me scroll down so here we see that refresh tokens may stop working or let me increase the font size a little bit here so it says that refresh tokens may also stop working after they are granted and it is because so the reason is there are like a couple of reasons here but mostly that the token expires in seven days is because the application has a status of testing and the constant screen is configured for external user type and since if you have not published your application and your application is still in testing mode so then your refresh token will be expired in seven days and there is no way to get it working after seven days so you are bound to publish your application if you want that your refresh tokens do not expire in seven days. So guys that's all about this tutorial and I guess that you have liked the tutorial and that's why you are so far ahead in the video. So give me a thumbs up if you like the video and if you do not like the video give me a thumbs down and please subscribe to the channel for more videos. So thank you bye bye tata take care and have a good day and have a great day.

So this is the application we are going to make. So let's have a look at my Google Calendar. So we have no events for this week.

So let's create one using the API that we create using this React application. So firstly, we need to sign in and authorize our calendar. So let me click here.

So typically, this page would open as a pop up. But since we are in full screen mode, so we are seeing it in a new window. So let me select my account here.

And now we need to authorize calendar. Let's click on continue because this app is in dev mode. and now here we need to simply click this that is to authorize calendar so now let me click on continue and now we are back here and now we see that we have been registered so now let me simply provide in the summary for the event so let's provide in a summary so have a date with my girlfriend and then we need to provide in the description and the location would be Eiffel Tower Paris France simply like this then we need to put in a start date time So let's simply choose the start date time let the start time be 949 p.m And now let me put in the end time and that would be again 13th of December and the end time would be 11 49 p.m. so now let me simply click create event so the event would be created so we see that event is created so now let's go to our Google Calendar and we see that we have an event here that is have a date with my girlfriend so if I click on this event we see all the details of this event so the description of the event the title of the event and the location of the event so if I simply click here we see that the map would be updated here so this is what we are going to create in this video okay guys so welcome back again so in this video we'll be creating a full stack application using react and back end would be node.js express application so we'll be using the google calendar api to create events inside our calendar and for that we'll be using oauth2 so the flow of the video would be something like this firstly we'll be creating a new project inside our google developers console and then inside that project we would be enabling the apis and then we would be setting up the oauth consent screen and then we'll be creating the credentials to be used for OAuth 2 and then we'll be adding in the required scopes that is for the google calendar api we need to add the scope and we'll be adding that also and then we'll move ahead by creating the react.js front-end application and then we'll see that how do we get the authorization token which would then be used inside the backend application to generate a pair of access and refresh tokens which would then be used inside our backend application to create events inside our google calendar so the event data would be coming from the front-end react.js application and that data would be handled by our backend express application to create events inside our google calendar and moreover we'll be looking into a couple of questions that i get in comments when i made a gmail api video and the drive api video and those questions were that a couple of you commented out that your refresh token expires after seven days so the answer you would find in this video and similarly a couple of you have said that you do not get refresh tokens from the response when you provide in the authorization code and you only get back the access token so this answer would also be answered in this video and plus some extra questions which you also ask so that would also be answered in this video and even if you are new here and you are watching this video the first time on this channel then also you might land up in trouble and you would be getting you would be getting these questions in your mind that is why the refresh token expires and why do you not get the refresh token from the response So that's all what we are going to do in this video. So without wasting any time, let's dive into our code and let's see that how it's all done.

Okay, so the first thing you need to do is you need to go to this URL that is console.cloud.google.com. So if you have not created any project inside your Google console, then you might not be seeing this page. But instead, you would be seeing that as create a new project. But since I've already created some projects, so I'm not seeing create a new project.

So for me, I need to go here. and then i need to simply click here that is create a new project so let me click here that is new project and now we need to give our project a name so let me simply give it a name like calendar tutorial so tutorial simply like this and for the location i'm simply going to ignore it for now and now let me simply click on create and now it takes a moment to create so the first thing you need to do when you create a new project is that that you need to enable APIs and services and this enable APIs and services is found inside the dashboard tab here so let me click on enable APIs and services and here we need to search for the calendar API so let me simply search calendar and let me press enter and we need to select this google calendar API so let me click this and then I would enable this API for this project so let me click on enable and it would take a moment or so So the API has been enabled and now we are back here. So now what we need to do, we need to simply go here and because we are inside this APIs thing here and we need to go back to the dashboard. So I simply click there and now before creating credentials for this application, we need to configure the consent screen first.

So let's click on OAuth consent screen and here we need to choose internal or external. So for this thing, you need to choose external. and if you want to read what is internal you can read it here but typically you would be choosing external here so let me click on create so here you need to provide in the app name which would be publicly visible and this is the name which users are going to see whenever they are trying to sign in with your application so i will provide calendar api for tutorial And then we need to provide in the user support email address.

And here I can simply provide in my email address. And for app logo, I would highly recommend that you should not provide an app logo as of now until and unless you are going for production, because it takes a couple of days to verify the app logo and publish the app. So for testing purposes or for development purposes, you should not provide an app logo.

And for the app domain, I'm not providing an app domain as of now. And for the authorized domain, also, I'm not providing any authorized domains. and for the developer contact information i will be providing in my email address and now let me simply click on save and continue so now this is an important step we need to add the scopes for this application so let's click here that is add or remove scopes and now here we need to select a couple of things firstly we need to get the email address of the user we need to get the profile information of the user and we also need to get the open id so let me select these three things and now let me also search for calendar here so calendar and here we need to simply select this one that is google apis.com forward slash auth calendar and now here we need to select this api or this scope here and now let me simply click on update and now we see here that for the non sensitive scopes we have the open id email in the profile but for the sensitive scopes we have the calendar thing here and now let me click on save and continue and now here we need to add in a test user and if you do not add in a test user as of now because you are in development mode so you would be getting a screen like this that says that it is forbidden so let me simply add in a test user for development purposes and once you publish your application then there is no need to add test users to it so let me simply click on add users here and here i would simply provide it my test email address so that would be again yours truly 2607 at gmail.com so let me simply click on add here and now we have here one test user and similarly if you want to add more test users you can simply click here again and you can add as many email addresses as you want so let me simply click on save and continue again and this is the basic summary of this application or this OAuth consent screen and now let me simply click on back to dashboard and now we need to create the credentials for this application so let me click on credentials and here we do not have any apis keys associated with this application or for or this project we do not have any or two client ids and neither the service account so since we are going to use or two for this application so let me click on create credentials and or to client id so this is the thing which we need to click on so let's click here and here for the application type we need to provide in web application and for the name you can give this a name whatever you like so let me simply call it calendar react app something like this and for the authorized javascript origins i would simply like to add in my localhost port 3000 because my react applications runs on that port so http forward slash localhost colon 3000 simply like this and now let me simply click on create and now we have the client id and we have the client secret and this client secret you should keep it very secretly but since i would be deleting this application or this client id after i completed this tutorial so i can keep it open but you should definitely keep it this client secret highly secret so let's click on ok and we would be coming back to this application to copy this client id and client secret in a moment So let's click on OK. And this is the client ID which we created just now.

So this is all what you need to do inside console.cloud.google.com. And now what we need to do, we need to create our front end application using React. So let's do that. OK, so here inside my terminal, what I've done is that I've created an empty directory that is called Calendar API. So if I do ls here, we see that the directory is currently empty.

so what i'm going to do i'm simply going to initialize a new react application inside a folder called front end so let me do npx create react app front end use npm and basically i provide this flag that is use npm because i want to use npm as the package manager and not yarn because create react app uses yarn as the default package manager so let's press enter and it would take a couple of seconds or so to create the front end application inside this folder so the react application is created inside the folder called frontend so if i do ls we see that we have a folder called frontend so let's open our application that is this folder calendar api inside vs code so i can do code dot because i prefer to use vs code and now we see inside vs code we have a folder called frontend and the typical react application is created inside this folder so let me open my terminal here and let's cd into the frontend folder because currently we are in the calendar api folder And now what I'll do is simply start the application by doing npm start and our application would be up and running on port 3000 So this is the old application and the new application we see that we have a spinning react logo So now let me install a couple of dependencies inside this project or inside this react application So let me stop the application here and what I'll do I'll install a couple of dependencies So the first dependency I want to install is this that is react Google login because this is the thing which provides me the authorization code which i need to send to my backend server so let me grab this thing here that is the install command so let me click here to copy it to clipboard and let's go here and what i'll do i'll simply ctrl v here or command v unmark to paste it here and at the very same time i would like to install one more dependency inside this front-end package and that is called axios to make api calls to my backend server so let me install that as well as of now So let's press enter and again it would take a couple of seconds to install. So this is installed. So let me clear out again. And now what I'll do, I'll simply start the application so that it is started in the background. So let's do npm start again.

And we have the typical spinning react logo here. So let's go back here. And now what I'll do, I'll open my app.js file here.

And what I'm going to do, I'm going to get rid of this header tag here or this header HTML element here. And here what I need to do, I need to provide an H1. And here I can simply say Google Calendar API like this.

And now let me save this. And if I go back here, we see that we have this Google Calendar API. So now let me create the sign in and authorize button here.

So for that, what I need to import, I need to import one thing from the package that we installed. That is React Google login. and that is the google login component so i can simply say google login here simply like this and now here after the h1 what i'll do is simply wrap this div inside a div here uh like this and here what i'll do i'll simply create one more div and these tips are only for styling purposes which i'm going to do later in the video and here i would what i want to do i want to use this google login component or if you prefer you can also use the use a google login hook from this package itself but i prefer to use this google login here so i can simply say google login like this so the first thing this component takes is the client id so i can say client id would be equal to something and the client id we can get from our application that we created on google console so let's go to our google console here and this is the client id and this is a public client id so anyone can have this client id it doesn't matter but the client secret is super secret and that should never be present on your front-end application but you can always copy the client id here so let me copy it here and let's go back and let me paste it here and in typical production application this client id should be coming from env file here somewhere inside your application but since it's a tutorial so i am hard coding it and now the second prop it takes would be the button text so I can provide in a button text like this here so the button text would simply say sign in and authorize calendar so authorize calendar simply like this and let me save it so that it is automatically formatted here and now here I need to provide in two more props that is on success would be equal to a function here so let me simply call it response google simply like this and this function I am going to create in a moment and now we need to provide in one more prop and that is on failure in case there is a failure here so let me simply call it response error and again this function I would be creating in a in a moment and then we have the cookie poly So for this cookie policy, I can simply go to this package here and let me copy this thing from here That is cookie policy would be single host origin So let's go here.

Let me provide in the cookie policy like this and now what I need to provide here This is some important step to get the refresh token. So this is important. I am marking it here because if you do not do it, then you won't be getting the A refresh token on your backend server.

So here we need to provide in the response type and response type would be code here and then the access type would be offline so that we can use this code that we get back from this google login authorization we can use this code on our backend server and we can get back the refresh token which can be used even when the user is offline when we are accessing his google calendar he can be offline also so it means that we can use the refresh token generated from this code anytime we like it doesn't not depend on the user then until and unless he revokes our application so here we need to provide in one more prop that is a scope and a scope would be open ID so by default this Google login component has profile and email as the scope here but I prefer to be explicit so let me provide here open ID email profile and then we also need to provide in the scope for the calendar so let me provide in the scope for the calendar here and it is the same scope that is this scope which we added when we were configuring our auth consent screen so this scope you need to provide here otherwise you won't be getting the refresh token that can access your google calendar so that's all what you need to do here for this google login thing and now we need to create these two functions inside our app component so here i can simply say const let me copy this thing from here so response google and let me paste it here and this would be an arrow function and for now let me simply console.log the response and this response we would be getting back here as a parameter inside this function and similarly me also create this function that is response error so let me copy it so response error would be error and here I can simply log in the error so console.log error like this so let me save it here and now what i need to do or what i can do i can go back to my application here which we have running in the background we see that we get this button here that is sign in and authorize google calendar so let me increase the font size here and we see that we have this button so now what I'll do is simply right click and inspect it because we are logging everything and now here we have our console open so as soon as I click on the sign in on the authorized calendar we get back this window open here and here we would be choosing our test email account that we added inside our Google console so let me select this test account and now here we see that we are getting this message here that google hasn't verified this application and that is very true because we are in development purposes and we haven't published our application so it simply says that google hasn't verified this application so no need to worry we can simply click on continue here And now we see that we are on this page and we see that this is the name of the application that we provided in the OAuth consent screen that is calendar API for tutorial. So this is what we are getting here and now here by default these open id and email and profile are by default checked here but for the calendar the user has an option whether to select this or not to select this. So here I am simply going to select this calendar to provide our application to access to his this accounts google calendar so let's click on continue And now we are back on our application and we see that we get back this code.

And this is the code which we are going to use on our backend application to get back the refresh token. So for that, what we need to do, we need to create our backend application. So to create a backend express application very easily, what we are going to use, I'm going to use this package here that is express draft.

And this is a super simple package. So what you need to do, you need to simply do npm i-g to install this package globally on your backend. machine and then you need to simply do exp dot to install the boilerplate code inside the current folder or you need to simply do exp backend or my app to create a new express application in whatever folder name you specified here so let's go back to our terminal So let me clear out the terminal here and if I do ls here we only have the front-end application. So what I can do I can simply do or to install this package what you need to do you need to simply do npm-g express draft to install it globally on your system and then what you can do you can simply do exp backend to create a folder called backend and simply generate the boilerplate code for an express backend api. So let me simply do exp backend and and now it would take a couple of seconds to install this express boilerplate code inside this backend folder and now the express boilerplate code has been generated so let's go back to our vs code and here let me minimize this front end folder and we see that we have a back end folder here so if we open this back end folder we see that we have this app.js file and we have a package.json file so if you open the package.json file we see that This express draft package installs these dependency inside our backend folder.

That is the .env package to get the environment variables, the express package, the HTTP errors package to handle the errors and Morgan to log in the HTTP request. So let's go to the ENV file first. And to run our backend application, I would simply need to provide in the port 4000 because I need to run my backend application on port 4000. So let me save the .env file.

And if you open the app.js file, here we see that. we have a typical express application scaffolded here and we do also have a route here that is called app.use forward slash api which simply points to this folder here that is routes api.route and if you open this api route folder or before opening the routes folder we see that we are simply listening on the port that is coming from the environment variable or we are simply going to run it on port 3000 but since our react application runs on port 3000 So we are going to run it on port 4000, which is coming from the .env file. And then we are simply started listening on whatever port we need to listen. And then our server would be started or the backend server would be started. So if I go to this routes file here, we see that we have only one file that is api.route.js.

And this is what this forward slash API is pointing to. So this is the only thing which we have inside this application. So why not let's start this backend application. so let's open the terminal here and now what i'll do is simply open one another terminal inside this terminal so now we have two terminals running and here what i'll do is simply cd into the backend folder and here what i can do to start the backend application we have two things here either we can use the start script which simply uses node to start the script or we can use the dev script to which simply uses notemon to start the application and this notemon simply restarts the application whenever it sees changes inside the dot js files And this is NodeMon is the div dependency of this package here or this application here.

So what I'll do, I'll simply do npm run div to start the application on port 4000. And we can see that we have this application running on port 4000. So if I command click here, we see that we get this message here. That is awesome. It works.

And if I simply go to the index API route, we see that we get this message here. That is OK. API is working. So now let's create a post route inside this application or inside this api.js file. So here what I'll do, I'll simply say router.post because I'm creating this route here because I need to send this code to my backend server so that I can exchange that for access and refresh tokens.

Though only refresh token is required but it would simply provide us with the access token, the refresh token and the id token. So let's go back again. so here i would simply say create tokens like this and this would be an async callback function and here it would take request response in next as the arguments here and here whatever i'm going to do i'm going to do inside the try catch block so try catch like this and if there was an error i can simply call it next with the error parameter here because this would be cached inside app.js inside this error handler here so now let's go back to our api.js so let's copy this url from this thing here and let's go back to our front-end application and let's go to our source folder here and inside the app.js file so whenever we are getting back a response from google google we see that we are getting back a code here so we can get this code by using response.code here because this is a object here and we can simply destructure code from response.code so let's go back so here what we can do we can simply say const code equal to not like this but code equal to response simply like this and now what i'm going to do here i'm going to make a post request to my backend server so i can do axios uh i'm not getting autocomplete here Maybe this is installed or not.

So I guess that Axios is already installed. So let's go back to our app.js file and here I can simply say let me let me import it manually. So import Axios from Axios like this and now here I am going to do axios.post and here we need to post it to forward slash api remember that this create tokens route is present inside the forward slash api route so if i go to app.js so forward slash api and then whatever route is present here so this is the create tokens route so that's what we are going to use so forward slash api forward slash create tokens and then we need to provide in the code here like this as the request body and then we would be having a then here so then we have the response so here for now let me simply console log the response so console.log response.data like this and then we have the catch block so here we have the error in case if there is any so console.log the error.message simply like this and let me minimize this console here or this terminal here so let's save this and let me remove this ugly looking logo line from here so now whenever we are getting back a response from google we are making a post request as soon as we get back a response and in the response we get back a code here and then we are simply attaching that code as a request body to this post route here and that's all what we are doing here so let's handle this route inside our backend application so let's go to our api route.js and here if we have a look at the app.js file we see that we are already handling the parsing of the request body by doing app.use express.json in the app.js file so we can say that const code equal to request.body simply like this and for now what i'm going to do i'm simply going to say rest.send code so that we can see that if everything is working fine so let's save it and Let's go to our app.js file and let's save it again and let's go back to our browser here. So let me reload the page so that the console is empty here and now let me simply click on sign in and authorize calendar and this time let me select this account here so we would be getting back our response code and now we see that we are getting this message here that is post localhost 3000 API not found and that is because our backend application is running on port 4000. so let me show you one more thing here or you'll learn one more thing here so let me copy this url here and here we need to simply paste in this url that is this url and instead of 4 000 3000 you should make it 4 000 and this time you would be getting a course issue here so let's reload here so let's click here so let me select the account so we see that we have this error here and that is a course error and we see that no access control origin header is present. The easiest way to fix this is that that either inside your express application you can add in a course package to handle incoming requests from port 3000 or what you can do you can simply make a proxy pass inside your reactjs application.

So let me do that here. So for that what I need to do firstly I need to stop my front-end application. because I need to make changes inside the package.json file of the front-end application and only then this would work.

So let me copy this URL here that is http://localhost.port4000 and let me go to the package.json file and here what I need to do I can simply provide in a proxy here that is proxy all my requests to this URL if that URL is not handled by our react application. So that's what this proxy thing does here. So if I save this application here and now let me start this application once again so now what i can do i can go to my app.js file so let me go to my app.js file first and here what i can do i can simply remove this piece of code from here and i can directly make post request to this forward slash api forward slash create tokens so it would see or this proxy pass would see that since this url is not handled by our react application so it would proxy all the requests to this url that we have set here So that's what that proxy pass does. So let me save it and let's go back. Let's reload.

And now let me simply click on sign in and authorize calendar. So let me select the account here once again and now we see that we get back this message here and this message is coming from line number 12 as you can see here and if we go back to our application this is the line number 12 and we see that our backend and frontend applications are being connected here. So now let's go to our api-route.js file and here we need to do a couple of things to get the access token and refresh token from this code. So let me go to my backend application and let me stop this backend application because I need to install a couple of packages here. So inside my backend application I need to install one package here that is called Google APIs.

So let me press enter and it would take a couple of seconds to install. So now the package has been installed. So what I'll do is simply start the application once again so that it is continuously running in background. and let me minimize the terminal here and now here what i need to do i firstly i need to require google from google apis i would say const something equal to require google apis like this and what i need to destructure I simply need to destructure Google here simply like this and now what I need to do I need to create an ova2 client from this Google thing here so what I can say I can simply say OAuth2Client equal to new Google dot auth dot OAuth2 and here I need to provide in the options here and the options we need to provide here would be the Google client ID like this though I have not created these variables but I would be creating these variables in a moment and now I also need to provide in the Google client secret and then i need to provide in the redirect uri and if you remember that for the application on the google developer console we provided this redirect uri that is localhost port 3000 and not localhost port 4000 though localhost port 4000 is a back-end application but the redirect uri which you provided inside the console.google.com was this uri so you need need to provide the URI of the front-end application here so now let me put in the values of this Google client ID and Google client secret so let me simply say const Google client ID client ID equal to something and const client secret would be equal to something so let's go back to our developer console and let's get the client ID and client secret so let's go here so let's click here the calender Reactor so these are the credentials that we generated earlier in the video so let me copy in the client ID so let me paste it here and let me also grab in the client secret and this is a super secret that should only be present on your backend application and not on your front end and this should not also be exposed like i am doing it and i am simply doing it because i am going to delete this google client id and client secret after recording this tutorial so now we have this o2 client initialized like this so now what i'll do i'll i can create tokens very easily or very simply like this so let's go to this create tokens route here and instead of sending back the code what i'll do i'll simply say const tokens equal to or let me simply call it response because it would make more sense for you guys so cons response equal to await over to client dot get token and here i need to simply provide in the code that we extracted here from request.body and now what I can do I can simply say res.send I can simply send back the response which we get here so if I save this application and if I go back to my front-end application so this time when I authorize my or when I do authorization here instead of simply getting back the code from the front from the back and as we were getting before we should be getting back the response or a response full of tokens from the google api server so let me clear out the console here and let me click on sign in and authorize once again so now here I'll simply do select this account here you And now here we see that we get back tokens here.

So we have the tokens here and we have the response here. So that's why I was preferring to destructure that response. That is this response to get the tokens here.

So the tokens are these tokens here. And we have the access token. We have the ID token.

We have the scopes associated with this. application and so on and so forth and you might be wondering that where is the refresh token and this is one of the questions that you might ask me in the comments if you are not watching this video clearly is this that the first time you authorize your Google API you get back a code and the first time you exchange that code with the Google API server to get back the tokens then only the first time you would getting back the refresh token so it is your duty to store the refresh tokens the first time the code is issued for your application. So now we see that we have multiple time authorized our application for this user account. So we get back codes multiple times. So therefore, I'm not getting back here any refresh token here, but we can do so very easily.

So what you can do, you can go to myaccount.google.com. And here we see that we have these third party applications associated with our account. So what I'll do, I'll simply remove access for this account here.

So let me remove the access here. And now what I'll do, I'll simply go to my React application once again. So now we saw that we were getting back only these access and ID tokens here, but not the refresh tokens.

But since now, this account would now again be authorized from our user account, or this application would again be authorized to our user account. so we would be getting back the refresh token again so what i can do i can go back here to my back-end application and instead of sending back the response i can simply destructure here tokens like this and i can simply send back the tokens here so tokens here though you should never send back these tokens so this is a highly no-no thing here that is you should never send back the tokens to the front-end applications because in this tokens is the refresh token and that refresh token is your responsibility on the behalf of the user who is authorizing your application to keep it safe somewhere inside a database so let's save it and let's go back and let's simply click here that is sign in and authorize once again or let me clear out the console once again so let me click on sign in and authorize and now here let me click on your australia 2607 and here i need to simply click on continue so you see that again we need to select this thing here that is the calendar thing here and now let me click on continue and now we see that we get back the tokens response here and this time we see that we are getting back a refresh token and this refresh token should never be sent back here to the front-end application it is only for demonstration purposes but instead you should keep this refresh token somewhere inside the database associated with that user who has authorized your application so what i'll do I'll simply copy this refresh token from here. So let me copy this refresh token here. That is copy string contents for this refresh tokens because this refresh token would be used to create an event inside the calendar or for this user. So let me copy the string contents for this refresh token.

And again, I'm telling you that whenever you get back a response or you get back the tokens here from this call, you should save the refresh token in the account inside the database associated with this user who has authorized your application. So for simplicity of this tutorial, I am simply going to say const refreshed or let me simply make a variable here somewhere so let me create a variable here at the very top i would say const refresh token would be equal to this token that we simply copied from our browser though this refresh token should be stored inside the user database and whenever you want to create an event you can then simply get the refresh token from the user database and then you can use it as in what you like so now this part is complete that is create tokens so now let's jump on to the second part and that is how to create an event inside the google calendar for the user who has authorized this application or for this or for whom this refresh token is valid so what i'll do i'll create one more post route here so router.post forward slash create event so like this and then we have the async function that would be request response comma next like this and again i would be doing each and everything inside the try catch block and If there is an error, let me scroll down. If there is an error, I would simply call in next with the error is the only parameter. And now here inside the try block, I would be accessing the request body that is coming from the front end application.

So let's go to our app.js file. And currently we only have this Google login button, but we do not have any form here to submit to the back end to create an event. So for that, what I'm going to do, I'm going to again create it. div here not divi but div and here what i'll do i'll simply create my form here and here this would be a very simple form and the action would be no action and we only would be having an on submit event on this form and here it would simply say handle submit like this and this function would be created somewhere here inside our application or inside our app.js file so const handle submit would be an arrow function again and the first thing we need to do we need to do e dot prevent default to prevent the default behavior of the submission of the form and here inside this form the first thing i would like to have is a label so label for this id and id would be summary not some t but summary like this and label would be summary like this and then we would be having a break statement and then we would be having an input element and the type would be text and id would be summary like this and then we need to make this and input as a controlled input field so what I can do I can create a couple of state variables inside this application so I need to use use state from react so what I can do I can simply say use state from react and the state value would be summary and initially the summary would be nil or empty so initial state would be an empty string so we see that we get a red squiggly line here so we need to use use state from react so let me simply press command and dot to import use state from react so if we scroll up we see that we have imported user state from react though this is not the best way to handle forms in react but since it's a tutorial again i'm simply doing it like this but if you are in a production application then you should definitely be using any react form library like formag or use form hook or something like that but i'm simply going to use the state variables here so let me create one more state state variable or a couple of more state variable so use the state would be description set description initially it would be null then we would be having user state so use a state for location or for the location string again it would be null initially So then we would be having a useState value for startDateTime and initially it would be again an empty string and similarly we would be having a state variable that would be the endDateTime that would be the event's endDateTime. So endDateTime like this and initially state would be an empty string simply like this.

So now let me use these state variables inside our application or inside these input fields. So for the first field that is a summary field we would be seeing that value would be equal to the summary state variable. So why I'm not getting autocomplete here. So let me copy it and let me paste it here. and then we have an on change event here on this input field so we would be having an event here so here for this event i can simply say set summary set summary would be e dot target dot value simply like this and now we are going to have a break statement again and now what i'm going to do i'm simply going to copy this piece of code and let me paste it a couple of more times because we need to have it for the start date time end date time location and description so this is the first field which we handle that is the summary the second one would be description like this and this would this label would say description like this and now the value would be description and this would be set description like this instead of this input i can simply call it text area like this simply like this and the id would be description instead of input i'm simply changing it to a text area field here though it doesn't matter but still i'm going to do it this way and now we have the location here so i can simply say location here here and this would be again called location here and input type would be text ID would be location value would be location and instead of set summary it would be set location simply like this for the last or for the last two input fields we have the value would be start date time so label ID would be start date time and this would simply say start date time and here I can simply say start DateTime like this and now instead of text I would simply call it DateTimeLocal so that we can select both date and time in a single input field.

and instead of set summary it would be simply called set start date time simply like this so now for the end date time what i can do i can simply copy this state variable that is end date time and i can use it here that is end date time this would be like end date time let me provide a space between and the id would be end date time value would be end date time and instead of set summary it would be set end date time simply like this and the type would be and date time local here like this so that would be all i guess for this input fields and now we need to have a button to submit the form so we would be having a button and that should say create event like this and the buttons type would be submit so it would be a submit button so submit like this and that's all what we have inside our form so what why not let's log in all the values whenever we submit our form so here what i can do i can simply do console.log summary description location start date time end date time simply like this so let's save this application and let's go back here so we see that we have a pretty ugly looking form here as you can see on the left hand side and this is all what we have here as of now but you see that you are getting the logic that how each and everything works but now what you want to have here is this that whenever the user is authorized here we do not want to see the sign in an authorized calendar button and if the user is authorized then we want to simply show this form here so that is pretty simple to do and that is a pretty ugly way to do also inside this tutorial here i'm simply going to use a state variable here but in your application you would be providing you would be using in the context api to keep a track of the user whether he is logged in or not but here i am simply going to create a state variable that would simply keep a track of whether the user has clicked the sign in button or not and here it would simply say signed in said signed in so initially it would be false and if he is not signed in then we would be showing this div that is the google login div so here let me make a check here by using the jsx expression so signed in not signed in then we want to display something otherwise we need to display something else so now inside these braces what we need to do we can simply copy this piece of code from here let me paste here and this div we can paste in the other brace so let's copy cut this div out from here and let me paste it here like this so now let's save this and here we can call this set signed in after we make a post request to our backend server and then and we get back a response from the server so here i can simply say set signed in to be true like this so let me save it if we go back to our application we see that we do not see the form here but once we click on sign in and authorize and just remember that i've already copied this refresh token inside my backend application because this time we won't be getting back a refresh token because this refresh token is only issued the first time the user has authorized your application so let me click on sign in here and we would be choosing this account here and we see that now we see the form here and as we know that this time we do not get back a refresh token but we already have that inside our backend application so now let's provide in some summary here so let's say it's uh this is summary and for the description so let me simply say lorem ipsum location let's simply call it paris france or whatever it is and for the start date time let me simply click here and let me choose a start time here or let's say 12 10 pm like this and for the end date time let me simply call it like 12 15 pm And if I click here, that is create event, we would be getting a log statement here inside our console. So let me clear out the console first. And let me also increase the font size here.

So let's click on create event. And we see that we are getting these values here inside our console on the front end application. So now we are ready to make a post request to our back end application. So let's go to our back end application. Or let me first make a post request to our back end application so we can directly.

do whatever we need to do with these variables here and again i'm not making any if checks or something like that for these variables here you can do it yourself because it would take much time so i can simply say axios.post forward slash api forward slash create event not event but event and here i need to provide in these values as the request body that is a summary description and so on and so forth so let me provide it here and then we have the then and catch block so let me copy this piece of code from here it would take less time so once we have the response we can simply log in the response dot data thing which is coming from the back end otherwise we are simply going to log in the error message from the back end that is coming here so let's save it here and what i'll do i'll go to my backend application here and here inside the create event what i can do i can simply extract all these variables that are these variables that are summary description location start date time end date time from the request body so i can say these things equal to request dot body simply like this why it is coming on the second line i don't know okay so let it be like this so now what i need to do i need to access the google calendar api from this refresh token which we stored inside our database or we are making that different this refresh token is stored inside our database so now creating an event is very simple to do so what i can do i can use this or to client here that is this new or to client with the same client id and the same client secret and i can set some credentials on this or to client so what i can do i can go to my create event for of route here and i can see oauth to client dot set credentials and here what i can do i can simply pass in the refresh token and the refresh token is the refresh token that is coming from the database though it is hard coded here like this but typically this refresh token is stored inside your database And that refresh token should be present here. So that's all what you need to do here. So let me make a space here so that it is more clear to you.

So now we need to access calendar from the Google Calendar API from this Google APIs packet. So what I can do, I can simply say const calendar equal to Google.calendar v3 because we are interested in the v3 API. So make sure that you use the v3 here.

And now what I need to do, I can create an event here. So I can simply say const response equal to whatever response we are getting back whenever we create an event. So we can say await because it's a promise. So calendar.events.insert. And here we need to provide in the options.

So the first option we need to provide is the authorization option. So we can simply say auth. would be this OAuth2Client. So we can simply say OAuth2Client like this and now we need to provide in the calendar ID. So calendar ID typically would be the primary calendar ID here because this is a hard-coded primary here because a user might have multiple calendars associated with this account but typically normally a user only has a primary calendar.

and this primary is the calendar id of that primary calendar. So if I go here and if I go to my Google Calendar here, so this is what I see here is my primary calendar. If I might have multiple calendars then it would be shown here but typically a user has a primary calendar and that is what is denoted here by this calendar id here and this should be primary almost 99% of the times and then we need to provide in the request body. that is the actual request event body so firstly we would be providing in the summary so summary would be summary that is coming from the request body that is coming from the front-end application so summary would be summary then we have the description would again be description from the front end application or that is coming from the front end application location would be location here that is again coming from the front end application and then we need to provide in the color id for this event so let me provide here six so what i've seen here is this that you can provide in some color ids like this so let me simply copy and paste some color ids for your reference here do you can again make a request to calendar API to get the color IDs but here is what I have here so if you provide in one here then you would be getting an event that is with a background blue in color if you provide in color ID 2 then you would be getting green here and 3 purple and so on and so forth so here I am simply going to use color ID 6 or let me use this color ID here that is 7 for turquoise so let me put in the color ID to be 7 and then what you need to provide here you need to provide in the start date time in the end date time so for the start date time you need to provide here start not like this but start and then you need to provide in the date time object here and here i can simply say new date like this and then i can simply provide in the date string that is this start date time string here to create a new date object here and similarly i would need to provide in the end date time so that would be end as an object here and then the date time would be this new date and here i need to provide in the end date time string here because these end date time and start date time are coming as strings inside my request body so that's pretty much about it and we would be having a response if we have any and just ignore this red squiggly line here everything is fine and finally we can simply send back this response to the front end so we can say rest.send a response like this so that's all about this back-end application or this back-end part so let's go to our front-end application so currently we see oer in this calendar that is for this different user so let me switch switch my account here that is for this account that we authorized here so let's go to yours truly's calendar here that is the account we authorized so let's click here so currently we see that we do not have any events created inside our application or inside our calendar here so let's go to our react application so this is the pre-filled form here or this form that we filled earlier so now what i'm going to do i'm simply going to click here that is create event so if everything went well then we should be getting back the response after creating the event so let me click on create event And we see that we get back this object here. And if we open this object, we see that we have this data thing here.

And inside this data thing, we have each and everything related to our event here. So the moment of truth, let's go to our calendar here. And we see that we created this very small event that is only of five minutes.

So it is very small. So let's try to create one more event using our API. And this is the summary. Let that summary description and location be this thing here.

So let me change the start date time to something else. So let me select 15th December and time 12.10pm. And the end date time would be again 15th December.

And let the end time be 4.15pm. like this so let me clear out the console once again and let me create the event here so let's click here and we see that we again get back an object here and if we go to our google calendar here we see that we have created this event and if i click on this event we have the details about this event and if i click on the On the location icon here, we see that we get the map here as well. So this is all about this tutorial.

And for the styling, if you are seeing that in the demo, I showed you that style. And that style was designed using Chakra UI. but since this video is not about chakra ui and this is about creating an event using google o2 using the google calendar api so i'm just ignoring the styles here but if you want to learn more about chakra ui then you can watch my video about chakra ui in which i created the to-do application using chakra ui and moreover i prefer not to style this application by using any particular library because you might be using different libraries depending on your choices you might be using tailwind you might be using bootstrap or you might be using chakra ui or like whatever ui library you might be using so that's why i have not styled this application in a particular way so now one of the questions that i mentioned earlier in the videos that most of you have commented in my previous gmail api tutorial or the drive api tutorial that your refresh tokens get expired after seven days and the reason for this is that that if you go to this package here that is google apis inside github and we scroll down we see that let me scroll down here and let me show you that where it is written so let me let me scroll down so here we see that refresh tokens may stop working or let me increase the font size a little bit here so it says that refresh tokens may also stop working after they are granted and it is because so the reason is there are like a couple of reasons here but mostly that the token expires in seven days is because the application has a status of testing and the constant screen is configured for external user type and since if you have not published your application and your application is still in testing mode so then your refresh token will be expired in seven days and there is no way to get it working after seven days so you are bound to publish your application if you want that your refresh tokens do not expire in seven days. So guys that's all about this tutorial and I guess that you have liked the tutorial and that's why you are so far ahead in the video.

So give me a thumbs up if you like the video and if you do not like the video give me a thumbs down and please subscribe to the channel for more videos. So thank you bye bye tata take care and have a good day and have a great day.

Transcript for:Guide to Building Google Calendar App

Transcript for:
Guide to Building Google Calendar App