Syncing projects with Google Drive - Part 19 (oAuth web server)

Okay boys, welcome back to the DriveSyncer project. In the previous couple of videos, we finished the new gitignore parser that we were going to write. So a custom parser for the gitignore file that could understand all sorts of complex patterns. We built that and integrated that with our sync algorithm. And with that, our project is mostly complete. Like you could just take this and put it into production and use it as a real project and it would work fantastic, right but there's a couple of quality of life features that i want to add right now and one of them let me just show you i'm just going to delete this token file over here that i have right so i have to re-authenticate my account again right and then let's run the the the entire application over here and you'll notice i have to obviously re-authenticate my account but let me just do this and show you and i guess before we actually do that i should stop redirecting the logs to the to the other file because then i won't be able to see right let's run this again so as you can see it gives me a url to go to to authorize my account right let's do that and i just finished authorizing my account and you can see it redirected me to localhost like it was supposed to and here's the code right in the query parameters over here now i'm supposed to copy this entire code and paste it into the terminal myself right and that's a bit you know cumbersome to do every now and then right Every time I need to re-authenticate my account, I have to go and copy paste this code from this broken page over here. And it just doesn't look good, right? So this is a quick little flow chart that I just drew to explain my thought process. But basically what we're going to build is a very small, very minimal, temporary kind of a web server that just runs at the start of our program. It runs on localhost port 8998 and it will automatically fetch the code from the URL, right? and once we and once we've reauthenticated our account this web server will just shut down right because there's no need to keep it running after that right and if the token hasn't expired then there's just no need to you know do anything right we can just run the cli as normal right so that's what we're going to build in this video let's get started okay to get started first of all go over to the client.json file where you have the um oauth client details right i'm going to make sure to blur out all of these client secrets and all the sensitive data so you guys can't hack me but uh down here in that redirect uri's key over here we want to add the url localhost 8998 slash google oauth redirect and of course you guys can use whatever url you want this is just what i'm using over here save that and let's try running the entire program again and this time if i run this you can see this time it redirected me to my OAuth redirect URL over here right on port and 8998 we still have the state we still have the code we still have all of those other things but we also got to be able to redirect ourselves to this URL over here which we can use to run our web server and fetch the code, right? So I'm going to close this down now because it's working. And now I'm going to create a new package over here in my project, call it web. and inside i'm going to create the file web server.go now let's create a couple of functions over here i'm going to create the function start http to start our web server it'll take a port that'll be an integer it'll take a context which will just be context.context just so we're able to shut down this web server once we've actually got the token right because we don't want to keep it running after that and down here i'm also going to create a redirect handler i'll call this oauth redirect handler i guess it'll take a response writer i guess and then a pointer to an http request as well to get the code we can just use r.url.query.getcode there we go and then i'm just going to say fmt.f print f pass in the response writer and then say something like your auth code is and then print the auth code over here and then i'll add a new line and i'll say please paste this into your terminal and that's it and then i can just pass in the code over here and make sure to add a colon over here so you actually create the variable. I forgot to do that as always. Now back in the start HTTP function very first thing I'm going to do is I'm going to create a new mux by using saying new serve mux add a handler over here not handle handle funk there we go the pattern will be google oauth redirect or whatever you set as the redirect url in your client.json file right and then the handler will just be this function we just wrote over here then let's create a server variable this will be http.server the address will be fnc.sprintf pass in localhost and then the port number that we get in the argument over here and the handler for this will be what the was that handler will be the new mux that we create over here and this should be a pointer to http server not the actual object now you might think why am i not using http.listen and serve or something as like a minimal way to run this web server it's because listen and serve is not going to allow us to be able to shut down the server programmatically right when we're done with it you'll see what i mean once we actually write the full code so just follow along i going to create a new go routine over here this is just going to listen for this context object to just be complete right so imagine this is a cancelable context right once the caller has canceled this context that's when this line will finish executing and will shut down the server over here and let's also add a log for that let's say web server shutting down create a shutdown context over here and a cancel attribute as well let's say context dot with timeout because we want to have some sort of a timeout over here that's just good practice right pass in context dot background as the parent and a one second timeout as the timeout and then let's run defer cancel over here so that if we exceed the timeout then we just force fully shut down the web server right and then let's say if error equals server dot shut down pass in the shutdown context as well and let's say error does not equal to nil then we'll say log dot print f error shutting down web server print the error over here with a new line pass in the error there we go and then just run this go routine at the bottom over here and again i forgot to add a colon over here my bad so let me explain what's going on over here once the parent has canceled this this web server right this done function will finish executing and we will shut down the web server we add a one second timeout over here so that if there's any request coming in then it has some level of some amount of time to finish executing and then we can shut down the web server but if we do exceed that one second timeout then we'll just forcefully shut down the web server, right? We don't need this because this is a local web server and its only purpose is to fetch the authorization code, right? So we don't need this at all, but it's a good practice to have all the same. Now let's actually run our web server and I'll say web server listening on port and then pass in the port number over here with a new line as well. And then we'll say if error equals server.listen and serve error does not equal to nil and error does not equal http dot error server closed right we want to make sure we're not handling that server closed error because we literally do shut down the server over here manually that's not that's not something that is undesired in our program right so we don't need to handle that error and if there is an error over then we'll just say error starting web server, percentage V to print the error and a new line at the end. And that's all we need to do to build this web server. Like I said in the beginning, this is super minimal. Finally, we just go over to main.go to actually connect this web server and run it, right? Up top over here I going to say web context and web cancel is equal to context dot with cancel context dot background Then I run a go routine over here and this will run the web server Import the web package that we just built over here and run the start HTTP function. Pass in the port. I guess it's 8998 for our purposes and pass in the web context over here and run the go routine. That's all we to do so this is going to run the web server and then in the actual main thread over here we're going to run the connect to drive function this will give us the authorization url we'll go over there we'll authorize our account and get the code which will redirect us to this web server we'll paste in the code and once we're done with that that's when we'll run the web cancel function to shut down the web server because at that point we have connected to the drive and we're done right as soon as as soon as this as soon as this art dot connect to drive function is finished executing we know we've connected to the drive and we can safely shut down the web server so that's literally all we needed to do let's run this just to make sure that i didn't make any mistakes and there we go you can see it says web server listing on port 8998 so let's go and authorize my account and i should probably zoom in over here but you guys can see we got redirected to our web server it's running and we can just grab this code over here and paste it into the terminal now you might think how is this any different from what we had before we still had to copy the url copy the code from over here in the url right now we just need to copy it from our page over here right well the difference is that you can actually and let me just paste this over here and you can see it it got the token and now it's going to start the sync process but we don't care about that the real beauty of this approach is that you can have anything over here in the redirect handler over here right you can build a fancy page over here with a copy button and everything and you can make it a lot easier for your users to get the odd token for my purposes i'm just using a very basic implementation over here literally just plain text over here right just to show you that this is possible you guys can create a html template that looks really fancy with all of the you know special effects and css and everything and this can look really nice anyway that's all for this video like comment subscribe share and whatever else other youtubers ask you to do and real quick before you before you click off this is my personal website and this is where i have all of my work and portfolio and everything i work as a freelance developer building websites and web apps and mobile apps for people and i'm always looking for work so if you're interested in hiring me or if you know someone who's interested in building some sort of a some sort of a web app or mobile app or something click the top link in the description and book a call with me and we'll discuss your project and we'll get to work that being said guys once again thank you for watching the video and i'm going to see you in the next video which is going to be about i have no idea what