How to Create Events in Google Calendar API using OAuth2.0

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 modes here 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 the start date time so let's simply choose the start date time let the start time be 9 49 pm 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 uh 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 will be creating a full stack application using react and backend 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 will be using or2 so the flow of the video would be look 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 will be creating the credentials to be used for or2 and then we will be adding in the required scopes that is for the google calendar api we need to add the scope and we will 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 back-end 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 will 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 asked 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 have 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 api's 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 would 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 local 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 dot 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 and 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 we 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 provided my test email address so that would be again yours truly 2607 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 api keys associated with this application or for or this project we do not have any or2 client ids and neither the service account so since we are going to use or2 for this application so let me click on create credentials and over 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 board 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 okay so here inside my terminal what i've done is that i 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 frontend 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 eon 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 front-end so if i do ls we see that we have a folder called front-end 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 front end and the typical react application is created inside this folder so let me open my terminal here let's see the into the front-end folder because currently we are in the calendar api folder and now what i'll do i'll 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 to clipboard and let's go here and what i'll do is simply control v here or command v on mac 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 back-end 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 like this and here what i'll do is simply create one more div and these divs 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 enb file here somewhere inside your application but since it's a tutorial so i am hard coding it here 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'm 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 a in a moment and then we have the cookie policy 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 and 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'm marking it here because if you do not do it then you won't be getting the 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 does 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 scope and 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 oauth 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 resp 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 let 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 am 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 npmi hyphen g to install this package globally on your machine and then you need to simply do x 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 hyphen 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 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 dot 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 dot env file and if you open the app.js file here we see that we have a typical express application folded 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 dot route and if we open this api routes 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 dot 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 back-end 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 back-end 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 nodemon to start the application and this nodemon simply restarts the application whenever it sees changes inside the dot js files and this is node 1 is the div dependency of this package here or this application here so what i'll do is 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 okay api is working so now let's create a post route inside this application or inside this api route.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 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 in 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 router.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 our 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 restructure 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 auto complete here uh 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'm going to do axios dot 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 dot 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 our response from google we are making a post request as soon as we get back our response and in that 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 you 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 a request dot body simply like this and for now what i'm going to do i'm simply going to say rest.send uh code so that we can see that if everything is working fine so let's save it and let's go to our wrap.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 phone and that is because our back end 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 post 4000 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 request from port 3000 or what you can do you can simply make a proxy pass inside your react.js 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 localhostport4000 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 request 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 password see that since this url is not handled by a react application so it would proxy all the request 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 front-end 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 back end application because i need to install a couple of packages here so inside my back end 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 api so i would say const something equal to require google apis like this and what i need to restructure i simply need to restructure google here simply like this and now what i need to do i need to create an over 2 client from this google thing here so what i can say i can simply say const auth to client equal to new google dot auth dot o auth 2 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 although 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 local host port 3000 and not local host port 4000 though local host port 4000 is a backend application but the redirect url which you provided inside the console.google.com was this uri so you 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 i uh client id equal to something and cost 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 calendar react app 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'm simply doing it because i'm going to delete this google client id and client secret after recording this tutorial so now we have this or2 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 let me simply call it response because it would make more sense for you guys so cons response equal to await or 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 rest.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 you 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 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 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 today structure 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 uh 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 quotes multiple times so therefore i am not getting back here any refresh token here but we can do so very easily so what you can do you can go to my account 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 backend application and instead of sending back the response i can simply restructure 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 let me clear out the console once again so let me click on sign in and authorize and now here let me click on yours truly to 607 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 for 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 boost route here so router dot post forward slash create event like this and then we have the async function that would be request response command 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 uh to the back and to create an event so for that what i'm going to do i'm going to again create a 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 it 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 summit 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 summation of the form and now 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 d 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 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 in 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 forming 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 user 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 use state value for start date time and initially it would be again an empty string and similarly we would be having a state variable that would be the end date time that it would be the events end date time so end date time like this and initial state would be an empty string simply like this so now let me going 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 i'm not getting auto complete here so let me copy it 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 am going to do i am 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 and date time location and description so this is the first field which we handle that is the summary the second one would be description uh 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 am going to do it this way and now we have the location here so i can simply say location 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 uh id would be start date time and this would simply say start date time and here i can simply say start a date time like this and now instead of text i would simply call it date time local 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 entity time what i can do i can simply copy this state variable that is entity time and i can use it here that is entity 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 entity time simply like this and the type would be a 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 summit button so submit like this and that's all what we have inside our form so why 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 ended 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 am 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's logged in or not but here i'm 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 our response from the server so here i can simply say set signed in to be true like this so let me save it uh 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 back end application so now let's provide in some summary here so let's say it's 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 p.m like this and for the end date time let me simply call it like 12 15 p.m and if i can click here that is create even we would be getting a log statement here inside a 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 backend application so let's go to our backend application or let me first make a post request to our backend 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 dot 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 in 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 back end application here and here inside the create event what i can do i can simply extract all these variables that are these variables that is 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 white 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 two 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 uh route here and i can say oauth2 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 package 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 dot events dot 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 oauth 2 client so we can simply say oauth 2 client like this and now we need to provide in the calendar id so calendar i 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 though uh you can again make a uh request to calendar api to get the color ids but here is what i have here so if you provide an one here then you would be getting an event that is with the background blue in color if you provide in color id2 then you will be getting green here and three purple and so on and so forth so here i am simply going to use color id6 so 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 and 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 datetime 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 is 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 indeed time string here because these indeed 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 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 prefilled form here or this form that we filled earlier so now what i am going to do i am 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 scr 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 sum relate that summary description and location with this thing here so let me change the start date time to something here so let me select 15 december and time 12 10 pm and the end date time would be again 15 december and the letter end time be 4 15 pm 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 i i can hear 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 but 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 or two 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 tl10 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 we 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 strain 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 tada take care and have a good day and have a great day you

Channel: Mafia Codes

Views: 86,489

Keywords: yourstruly, How to use Google Calendar API, How to use google oauth2, How to use Google OAuth, OAuth2 For Google APIs, How to use google apis, How to create event in google calendar using api, Google refresh tokens expire after 7 days, oauth2 refresh token flow, How to get access and refresh token for google api, Google Calendar API

Id: c2b2yUNWFzI

Length: 60min 50sec (3650 seconds)

Published: Tue Dec 14 2021