Create Calendar Events in React With Google Calendar API and Supabase (Supabase Providers Tutorial)

what's going on guys it's Cooper codes in this video I'm going to be creating this react and Super Bass website that uses Google oauth to allow our user to create calendar events so we can sign in with Google you'll see we are on a super based application here so we're using the Google provider within superbase so we can go to an authenticated user and we will then get loaded to this interface and guys I know it's not the prettiest thing you've ever seen but it's really important because it allows us to pick dates here so I can pick a date for example I'm just going to use today and I'm going to make it let's just say one hour from now so 445 to 5 45. I can make an event name like watch Cooper codes and a description like the goat that's in my calendar too and so I'm going to create this calendar event by going to the bottom here we are then using the Google access token from superbase to talk to Google and make this calendar event and so on the right you'll see we have our created event that has the inputted times and also the inputted title and description so although the website isn't exactly the best looking thing you've ever seen there's a bunch of functionality here that can be applied to meeting applications tutoring applications whenever you have to do a one-on-one meeting for example and being able to create events from your react applications is super powerful let's get started by setting up Super Bass let's get started by going to superbass.com and then signing in we can then create a new project in this dashboard by going to new project and you can make it under any organization I'm then going to name the project so I'm just going to say Google Calendar creation whatever you want to name it then you can generate a password here if you like feel free to save this but it's not going to matter for this video choose the region closest to you so shout out to the West Coast and then create new project alright guys this will take a couple minutes to get started once Superbass is done getting set up we can then go work on the Google side of things alright guys so now that we have a fully set up project we can go to the left and then go to authentication for this video we are going to be using the Google provider so we can go to Providers here and then scroll down to Google Now we can see that we need a client ID and a client secret from Google so now let's get started setting up the Google side of things so you can get started by going to console.cloud.google.com and you should be brought to some type of initial dashboard page once you sign in the important part is we want to create a new project so if you're in a different type of interface just go through the new project route however you know the buttons say to get there but if you're here we can go to the top left go to new product in the top right here make a project name so you know calendar test whatever you guys want to call it and press create once that's created you might get a little notification or you can also just go over here and select the newly created project so calendar test so now we're working within our newly created project the first thing we want to do is we have to go into the search bar look up calendar API so you go down to Marketplace here Google Calendar API and then you want to make sure to press enable so once that's enabled you should be brought to this screen we are then going to go to oauth consent screen if this menu didn't show up on the left for you you can always just look up oauth consent screen in the search bar here so the consent screen is a little like you know do you want to verify Google to access your calendar that's where the consent screen is so we can get started by choosing the external user type here and pressing create so we can give our app a name by saying you know calendar app select a support email here for the authorized domain we can go over to superbase and take a look at the redirect URL given to us under Google we can copy this bring it back over here press add domain but we don't want the https or anything so we can just delete that initial part and make sure you don't delete any of the First characters delete the initial https and then once the top level domain so we can delete all this now Super Bass can talk to this app specifically which is great and then just add in an email as it will ask you here we can press save and continue all right guys Scopes are so important a scope pretty much just means what data are we allowed to access from the user when they log in with Google so we can add some Scopes here I'm going to get the email and the profile of the user Scopes and now we can go to the calendar Scopes so click forward here until you get to the Google Calendar API so this auth calendar scope right here we can press the check mark here and this is going to give us access to everything related to the Google Calendar so you guys will see literally everything see edit share and permanently delete all calendars you can access using Google Calendar if your application only requires specific parts of the Google Calendar API then pick these other Scopes that are more specific to your case but for this video I'm going to use that big overlying scope just so we can get access to everything and people don't run into weird issues and then we can press update the bottom to add these Scopes to our consent screen test users are massively important here you're only going to be able to access your application with test users so when you log in you need to be one of these emails you added here so I'm just going to add the email that I'm going to use to log in for this video make sure when you log in again it is this email so we can press add here all right we can press save and continue I know this is a lot guys so thanks so much for staying with me now we can go to credentials on the left here and this is the final piece of the puzzle is we need a client ID that superbase can talk to so now we can go to the top and say plus create credentials and we need to make a client ID it's going to ask for an application type this is a web application because we're react so choose that the name here doesn't matter it could be whatever so the JavaScript Origins important one here is we need to say HTTP slash localhost 3000 or wherever your browser requests are coming from so if you're hosting on a domain it should be that hosted domain here but we are just doing local testing with react and so it's going to be coming from this specific URI now the redirect URI superbase is going to handle the redirecting so we need to go back to authentication copy this redirect URL paste it in here and that means we are good to go with Super Bass talking to our client we can now press create and guys don't click away from this window if it popped up if you want to make sure to copy your client ID go to Super Bass paste it in go back here go to your client secret copy it and then paste your client secret here so the final thing we need to do is just press this Google enabled right here ding that's all you need to do and then we need to press save if you do not save it's not going to work even if you put them in text boxes so make sure to do that guys and you should see that Google is enabled so under your auth providers it should show Google and email okay now that authentication is good to go we can go and create our react application and initialize Super Bass over there alright guys I'm going to be in an empty folder over in Visual Studio code and I'm going to start by creating a react application by saying npx create Dash react Dash app and name the filter here client so we have our fully created react application now which is great we can then CD into that client folder and then we're going to npm install two very important libraries the first one is at Super Bass slash superbase Dash JS and then some authentication helpers from at Super Bass slash auth Dash helpers Dash react so your package.json should look something like this we can now go over to index.js Under The Source folder to create our Super Bass client so pretty much making a way for our react application to talk to Superbass we can do that by saying import create client from at Superbass superbass.js we can then create our Super Bass client by saying const superbase is equal to create client like this it's going to need two strings the first one is going to be our URL and the second one is going to be our public Anon key and if you're like what on Earth is a public add-on key we can go back over to Superbass we can go to our home of our Super Bass project scroll down from home and you're going to get the project URL so we can copy this here bring it over to our create client paste it in and then the public Anon key so our API key to talk to Super Bass we can copy it here and paste it in and so now we need our application right here to be able to talk to superbase and use this client we can use something called called a session context provider so we can import session context Provider from at superbase auth helpers so this is a provider that's going to allow our react application to talk to superbase at pretty much any component so we can take the context provider and wrap it around our application like a Christmas present Merry Christmas by the way it is that time of year even if you're watching this like six months later and we can set the Super Bass client that is getting provided to our application by going in here and setting the Super Bass client property of the context provider equal to the super based client that we created at line nine look at how seamless that is so now our application gets access to superbase let's go now we can go into our app.js and actually get started with creating our application I know guys a bunch of setup but it is what it is that's coding at the end of the day sometimes inside of our application we can get rid of the initial boilerplate I'm just going to get rid of the header and keep this div just to use for later I'm going to get some react hooks from the auth helpers here so I'm going to say import use session this is going to get the current session from the user and then also the use super bass client so we can access that cpabase client we initialized before from this react component which is just the app so to see those two in practice we can say that the const session is equal to the use session here you can imagine this like this is kind of like user but not really there's a bunch of things stored in here for example the current active tokens are stored inside of our session and that's where things are going to get super important so I'm just going to leave a comment here with tokens because that's the important part of a session for this video then to access Super Bass client we can say const superbase is equal to use super bass client like this this is just to talk to Super Bass I know I'm making some simple comments here but at the end of the day we can really simplify things to make it easier to understand so inside of a return statement I'm going to make a little div to hold all our information this is just to make it look like semi nice so it's not you know sprawling across the entire screen I'm gonna make this inner div have a width of 400 pixels and have a margin of 30 pixels and Center it to the middle which is going to be through Auto this isn't exactly a Style video so don't worry too much about this the important logic here though is if a session exists then we want to show a certain react component so we're going to be using a ternary statement so it's pretty interesting if the session exists then show this react component colon pretty much means else show a different react component and so another thing to put at this comment here is when session exists we have a user when we have a session that means we have a user and when we don't have a session we don't have a user from the Super Bass session we can get the user's email by saying H2 hey there and then to get the email say session.user.email and so this is the component that shows if we have a user when we don't have a user though I want to show a login button so just a very simple button on click it's going to be equal to a call that's going to call Google sign in which is a function we are going to make in a second and so I'm just going to say sign in with Google this is also nice because you can make this button styled however you want and so you can get a Google sign in to make a custom Google sign in Button as well which is kind of a nice part of Super Bass all right guys so let's define our sign-in function by going up here and saying async function Google sign in and we're making it asynchronous because we are going to be using await right here and we're going to say await Super Bass dot auth dot sign in with oauth this means we are using an oauth provider to sign in for example like Google so we're going to make an object here that's going to have all of our credentials and other information for example it wants to understand that the provider is Google and something very important for oauth which is kind of murky online which might be why some of you guys are watching this video is that it also needs an options and within this options you have to specifically ask for the oauth Scopes of whatever provider you're using and so what is an oauth scope like I I said before when we were doing the oauth consensory and you saw Scopes Scopes allow you to access specific parts of the provider for example specific parts of Google so we can see that these Scopes are equal to and then we can put a string here depending on the API you're using you're going to need access to different Scopes but the scope that we got access to earlier is this one the https googleapis.com auth calendar and so when you log in you have to specifically ask for these Scopes even though we already told our oath consensory to have those Scopes I knew that's kind of like weird backward logic but it's how it works for this video we are only using the calendar scope but if you wanted to use the calendar and maybe like Google Drive for example what you would do is you would have this scope right here and also another one for example the Google Drive scope and they'd be delimited by a space so as long as there's a space between all these different scope links that means you're good to go and we will discuss scope specifically when we actually call the Google Calendar API later if you're even confused as to like what is this link and what does it mean I got you guys don't worry one thing at a time so this sign-in statement is going to return us some data which we can get access to by saying const use some object destructuring here to get access to the error that this await statement is going to return and so if there's an error I'm going to alert error logging into Google provider with Super Bass and I'm also just going to console.log that error and I want to be nice to you guys so we're going to make a function that we're going to use in the future here called async function sign out and you might be like oh my goodness I'm gonna have to write so much code to sign out nope oh waitsuperbase.auth DOT sign out I made you guys work up here but signing out is way easier so that's all you need and we can even make a button down here just copy the button at line 35 and then bring a button up to this little part where the session is true and we can just make it say sign out and instead of calling Google sign in we can just say sign out I'm also just going to call console.log our session so we can see all the data related to our session once we sign in so we can go into our terminal here and say npm start alright so here we see our beautiful application we can press sign in we're then going to say choose an account which I'm going to choose the authorized account we used before remember that's important this should be your test user that you created before even if you're a test User it's going to say Google hasn't verified this we are the developer so press continue so you'll see here guys it's going to ask us specifically for all that information we discussed before this one on the bottom is a sensitive scope so it's looking at it specifically so now we can press continue alright so now we are fully logged in this means our session is legit so we can go to console we can see within our session we have a very important thing here we have our access token right here and we also have our user alright guys so one issue with the authentication we have right now is if we refresh our website's kind of flickering this is because initially we are have a null here which means you have no session when we have no session it's going to show us the no session code but then if we get a session and so it's going to show us these session codes so it's going to say hey there current person the session there is a way to get around this and prevent this kind of awkward flickering when our website starts we can go back to our react application scroll up and we can do this thing called use session context this means pretty much give us uh you know give us some information surrounding our session so we can say const is loading is a variable that we can get from our session context is a loading is going to be true while our application is loading big surprise and so if is loading so if it's true we're not going to show our application quite yet we're just going to return an empty application so if we refresh our application check this out there's no more flickering when you refresh the website now we're actually going to create the inputs to get us to to create calendar events to make things really easy I'm going to npm install a package called react Dash date Time Dash picker so this is a component we can use to do the date time selection so I'm going to say import date time picker from react daytime picker like this and guys this is going to be a little complicated but don't you worry I'm going to explain everything as we go firstly we need access to import the use state from react we're going to start by getting the start dates for example the starting time of our event we're going to make a U state so we're going to say start and then set start is equal to a use state which is a new date this is because these start dates and the end dates are going to be working directly with your daytime picker here which I will show in a second we're also going to make a use State for the end time so end and set end and daytime picker is built specifically to work with these use states that have a date value so we can go and copy daytime picker here scroll down I'm going to make a little paragraph saying start of your event and then we can say date time picker when it changes we want to send that change event over to the set start so setting our start date is going it's going to set it to whatever time the date time picker has and its value is going to be equal to start so whatever the current value of our state is it's going to be that value for the daytime picker and so we can copy this over and do the same logic for the ending of your event so end of your event then we can say set end and the value is going to be equal to end so I'm going to go in here in console.log start start and end pretty much have the same logic so I'm just going to log one of them but feel free to log both if you like I'm going to npm starter application so we can inspect element to go to the console you'll see it's showing the current time because that's what it's set to is the current time for me but now what we can do is let's say I wanted to go to you know eight o'clock check it out it's now showing 8 o'clock over here although it's in military time so this date picker is going to change and if I wanted to go to like the 14th of December you'll see over here the date it's connected to is going to change to the 4 14th we can pass these dates to Google Calendar when we work with it is why we're creating these and so now that we have this value always being updated we don't even got to worry about it once we get to the API call we're going to have a value to use so now let's work on those text inputs and to make sure this sign out button isn't to the right like it is right now so I'm going to scroll to the top and make some new States so we can just copy these so we can just copy one state to get started it's going to be event name and then set event name it's going to be an empty string so these are going to be the strings that we're going to use to hold the values of some text inputs so there's going to be an event name and also an event description then set event description all right so now that we have these states made let's go make the inputs to connect them up I'm going to make a little paragraph saying event name and then an input which is going to be a type of text so a text input whenever the text input changes we want to take the current event coming from that input and I know it's confusing because we're talking about calendar events but I'm talking about the event coming from the text input and we want to set the event name to e dot Target dot value so the current value of this text input so now we can take this copy it over and instead we're going to do the same thing for the event description and make sure you change this to instead set event name it's going to be set event description I know we're getting crazy with the console logs but let's just show you guys what's happening we can now console.log the event name value and also console.log the event description value so let's go over to our application so if I type in here yeah sorry it's so crazy because we're logging all these things but I'll say Cooper codes is our event name event description is going to be thanks for watching so now we have access to those values which are being stored in States so once these states are done I'm going to put something called an HR which is just like a line it's like an HTML thing you guys will see it just a line that goes through your div and I'm then going to make a very important button that's going to say create calendar event which is you know kind of the part of this tutorial so hopefully we get that one right and I'm just going to put an empty paragraph under this calendar event to put some spacing between the sign out and the calendar event button just so it looks better even though it's kind of lazy styling so now when we click on the create calendar event we want to say on click is equal to a callback here that's going to then call the create calendar event which is a function we have not worked with yet so we want to get this go to the top here and say async function create calendar event like this I'm just going to console.log creating calendar event and so we can go back to our application so we can go in here and when we press create calendar event it's going to say creating calendar event and you might be like oh it's just a console.log whatever that's actually very important because if there's console.log logic that means we can put any other JavaScript logic we want for example actually creating a calendar event okay guys don't get too excited but now we're actually going to go into the Google API stuff alright guys I know documentation can be daunting but I'm going to specifically show you the documentation for this so you can apply similar logic to whatever route you need to access for Google Calendar we are going to make an HTTP request that's going to post to this link and for this specific route the insert guess what we need access to this specific scope so I told you guys I was going to talk about scope again here is where specifically Google is checking does this person have this specific link or this specific Link in their Scopes and we do have this link right here in our Scopes so we're good to go in the request body of insert we are going to make a request body in just a second here it needs an end property and a start property in the object then there's also some other optional properties and here it's annoying that it's capitalized because it's not showing the most really important ones first but there are some like name properties as well that we're going to put on top of end and start so let's get into building this request body so this is just some kind of takes for furthering your learning is that when we make requests bodies in JavaScript we can set up the actual body object in its own JavaScript object like const event is equal to an object and then we can send this object over with our post request so one property here is going to be the summary which is pretty much the title of our event is going to be equal to whatever the event name value is in that event name State we created above same thing for the description it's being saved into that event description state that we have above now we need to say start so start isn't as simple start is going to be equal to an object of information specifically to define the start times we are then going to set the date time property equal to start.2 ISO string so Google uses these things called ISO strings to specifically set the date time start is a date object and so we're saying is date object dot to ISO string and it's going to give us some like weird formatted string that Google likes I wouldn't worry about like too much about actual ISO formatting I'm sure you can go down to Rabbit Hole forever there it's also going to ask a time zone for our current date here so this time zone is going to look something like this America lost underscore Angelus but I know everyone who watches my videos isn't from America so a cool way to get your current time zone from your computer is you're going to say into L like this which means like International I believe dot date time format dot resolved options dot time zone and this is going to give you that like America Los Angeles thing here but for whatever your time zone is and this is important because if Google doesn't know your time zone it could be like you know know you could try to set an event for right now and it could be like three hours in the future because it's like things are on the East Coast or things you're on a different time zone right this is kind of a weird little workaround but it gets you that string that Google's expecting to get your time zone so works well so we can copy this start over like this because we're going to make an End object that's going to look very similar to it so we can say end to the end of your event is going to instead be end.2 ISO string and then you know I'm taking it easy on you guys this time zone part is going to be the same so we don't have to change anything so now we're going to say await fetch so now we can make a call to a specific endpoint from Google I know you guys might not have this website open but I'm just showing you we are getting this HTTP request right here and we're going to copy it over and bring it to our react application and so this calendar ID here is actually a variable that we can put in that's why it's like in red over in the documentation right but let me show you guys there is a cool work around so we don't have to grab people's calendars IDs and do like calendar under list dot list we can instead just use the primary keyword to get whatever the primary calendar is of a logged in person so I'm going to go in here and instead of calendar ID I can just say primary we can then do a comma and then we are going to do all the initialization options for our request for example what method is our request going to be well this is going to be a post request and then headers we can add some headers here and the most important header of all here for this entire tutorial is the authorization header and I'm telling you now there's going to be someone that messes this up make sure you spell authorization correct if you're having issues with your headers like I'm saying like look up Google authorization like copy it paste it into your thing this is going to be a token in the bearer format and so Bearer is just a common way to put authorization headers there's probably some history behind it that I don't know but it's pretty much says Bearer and then you have to say your token after the bearer word for this is looking for a access token for Google when we use Superman base alongside Google authentication we can get access to the Super Bass session by saying session like this the dot access token is actually not the access token for Google this dot access token is the super base access token the provider token right here is showing us that if we want to make external API requests to the oauth provider we use this provider token within this token Google is able to see who the user is and what Scopes they have access to and then body alright guys this is going to be crazy the body of the request we already made the entire body right here and so all we have to do is say json.stringify this is able to kind of translate it into a string that the server is able to understand so it's stringify the entire event object that we created above so it's going to turn this into one big string pretty much that's obviously still a JavaScript object just in string format and so there's our fetch request all the way done so we can say dot then to kind of process us the data once it's finally done so this is going to give us data from the request like stuff like was there an error and then it's going to return the created event as well but first of all we have to make it go return data.json so it's going to take the data and put it into a Json format so it's going to make it a JavaScript object this next dot then is going to grab whatever has been returned here so for example we're going to grab the data again except it is now going to be a JavaScript object and so we can console.log the data object here and so I'm an optimist the data object could be an error but I'm just always going to alert event created check your Google calendar just for Simplicity for this request all right guys that was a bunch of work so you should really pat yourself in the back this is a pretty full tutorial showing a bunch of different parts of react Super Bass and Google authentication the same video craziness so now we can go back and make sure to npm start your application alright so I'm now going to try and make this calendar event so I'm going to make the start of the event right now and I'm going to make the end of the event 6 55 so one hour from now event name is thanks for watching the description is like and sub I know I'm Shameless now we can create the calendar event event created yo there we go it's fully created over here which is great stuff and I'm logged into Cooper cuts2 at gmail over here just so you guys know like why is it popping up and if you're trying to do exactly like how I'm doing it make sure sometimes just refresh your Google calendar and you know just for fun 755 to uh 955 I'm gonna go to Cooper codes party so you know there's a party at my place pretty legit festivities watch out watch out okay let's see if it created that oh shoot uh so if you're watching this video at 7 55 I can send you an invite I'm just kidding oh I'm just joking with you guys hopefully this video was informative when it comes to Super Bass authentication with using Google as a provider and also using that provider token to do stuff like create events in your Google calendar I get a bunch of tutorial content like this on my channel so feel free to subscribe and take a look around but thank you so much for watching this far and hope you have a good day

Channel: Cooper Codes

Views: 28,912

Keywords: google oauth, supabase providers, supabase, oauth, react oauth, react supabase google, google supabase react, supabase tutorial, google calendar api, react google calendar api, supabase google calendar api, google calendar api javascript, google calendar tutorial, google api for beginners, create google calendar events, google calendar insert, supabase oauth, supabase authentication, google authentication with supabase, supabase google login, create calendar event react, react

Id: tgcCl52EN84

Length: 29min 26sec (1766 seconds)

Published: Thu Dec 29 2022