How to Create a Login with Google feature using Passport.JS

all right uh so what we're going to do today is introduce at the most basic level that I can get it um this dependency built on top of node called passport um and so just kind of introducing this dependency and and a few others um that that kind of go along with it and so we have now in in our class um built our own AU ication system uh very custom right but but if there are uh other packages out there that are common use um I would think that we would learn to use popular packages for authentication and not necessarily just have a homegrown solution and so the most popular package that exists to my understanding is this uh package called passport and uh just as a fair warning there is a fair amount of like new code here uh to this class that we haven't exactly seen before but I think I can bring it down basic enough that we can get the gist of it okay so so we might not understand every line but I'll do my best to to make it uh understandable to the best of my understanding again I'm relative new but I do have a solution here um relatively new to this uh to this package but I do have a solution that brings it down pretty basic and so um pretty cool so you can kind of see here passport simple unobtrusive authentication for node okay it is middleware for node uh flexible in modular passport can be dropped into any Express web app a comprehensive set of strategies which is is a kind of a a term here that they have they have all these different strategies to support authentication using username and password Facebook Twitter and more and so you kind of just on their homepage 500 strategies and you can kind of see here um Google o off and so you can kind of click on here [Music] and this is what we will uh this is what we will be using now um my kind of History throughout this is I started with the docs and they have tutorials and one of them is signing in with Google um but going through this tutorial you can kind of see the technology stack here um I believe this was not using like in this class we're using and this was using oh here it is you will use SQL light right so I didn't exactly love this tutorial because we're doing the M Stack and it was not using the the database that we used right so I was like well I didn't love this tutorial for that reason it was still a decent tutorial to start but it wasn't uh I didn't love it so um that's why I kind of just went outside of their documentation and started just trying to figure this out so let's let's go ahead and create if you're following along let's just create an empty folder and we'll just call this um passport Google uh o off whatever you call it not super important and let's go ahead and open this with Visual Studio code empty folder and open up our terminal of course you need node installed so that you can run npm um and let's install some of our basic packages that we're used to uh I'm going to install Express and this class we've also used debug and the EnV and mongod DB driver and so let's just start with those basic packages of course I skipped a step I need to do npm uh and nit slashy okay so now we have a package of Json and now we can run our install command uh and I need to not have a typo in Express ex P re s okay so that's going to kind of build in our package Json to see we've got debug. EnV Express and mongodb um a couple new ones a couple new dependencies that we have have not seen in this class so let's just go to mpm JS uh of course we're going to bring in passport um so we were looking at the docs P passport js. org you could see about 2 million weekly downloads so let's go ahead and install passport close package Json it's npmi passport there's also passport hyphen Google oo and this is the specific strategy within passport to authenticate with Google using ooth 2.0 API um just to kind of Google search oo 2.0 ooth 2.0 is an industry standard protocol for authorization oh 2.0 focuses on client developer Simplicity while providing specific authorization flows applications desktop mobile apps okay so o off is a standard protocol for login systems so we're going to bring in ooth 20 uh so we're going to use passport and we're going to use passport with Google so that's those two packages and then last but not least we're going to bring in what's called Express session um we we talked about sessions this last week when we talked about authentication and basically a session is so that client server can remember themselves you can have sessions saved on a server and you can have sessions saved on a client so um this is serers side session management right so using Express session will essentially be creating cookies um and so this will be server side session storage right so that basically client and server can remember each other again lots of weekly downloads um so let's bring in Express hyphen session okay we've got debug we've got EnV we've got Express we got Express session mongodb we got passport and passport Google o off let's go ahead and go into back in here and let's create a script for uh start hyphen Dev and just as we have in the past we're going to make this nodon with a switch to read our config file M config and our our launching point of our app is going to be well we call it index.js or server.js whatever whatever our our starting configuration file will be or where all of our starting code will will land we just call it index.js so let's go ahead and create that index.js and let's make our basic Express server that we have now made a couple times so in order to do that we need to import Express from Express let's go and make our app and let's make a home route and as we do just kind of say hello world and then let's listen on Port whatever 3000 and just maybe do a listening on Port 3000 close that parentheses okay so since we have node Monon and installed as a global dependency we should be able to run our script npm Run start Dev and okay it doesn't like our Imports because we have to tell package Json to use the new the newer import syntax which is type of module so go ahead and add that type of module this will allow us to use uh es6 modules or esm modules uh which allow us to use this newer syntax of importing and now you can see we get listening on Port 3000 that's cool except for also I like to create myv file and I like to use the debug package so I'm going to add a debug bug equals app colon star um bless you and then let's go ahead and bring in debug import debug from debug and then let's make a debugging Channel um const and I'll call this debug server or debug server uh equals app col server so now we can replace these Council Logs with debug server and save that and now we get a color app colon server I guess you want to make it a little okay so now our console logs are a little bit more colorcoded using this debug package um but that's just Express that has nothing to do with anything new we've done that now a couple of times um I also like to make this a clickable link so instead of just saying listening on Port 3000 I'll just do a little uh we'll just say server started on and just Local Host 3000 now since I have a URL I can control click that and that should open up with a Hello World and we're off I'll go ahead and pause let you guys catch up okay now the new stuff let's start bringing in passport import passport and passport uh we're going to bring in session from Express session so these are new Imports and finally we're going to import strategy and this is a uh uh destructured so it's going in Curly's import strategy as and we're just able to name it Google strategy from passport Google oo okay so these are three new things we haven't seen in this class before and passport is a middleware and we know that we can attach middleware using app.use so we are now going to configure passport we're going to do that by taking this variable that we created passport. use okay a new Google strategy again that's the the variable that we created right here a new Google strategy and cures now inside of here this is an object it has three properties we have a client ID and I'll I'll fill this out here in a minute a client secret and a call back URL and I'm going to put this HTP colon Local Host we're on Port 3000 slash off Google callback okay now um we have to finish this off and that's why it's crashing it says OA strategy requires a verify call back um so there's more to this here because this is our first argument second argument here is an async access token refresh token profile and a method called done and again I'll be explaining this as we start using this okay now I should be able to save it it's got that second argument now it's now it's not crashing okay um so when we're going to sync up with Google um we need to create as you often do when you when you're using another API you have to create some sort of key right you have to go on a website you have to go on this website you need to create some sort of key uh that you can give your software and say hey this is uh you know this is the account that is associated with with my developer um like who I am my developer account with Google or my developer account with weather.com or my developer account with Twitter like you'll create an account as a developer to use their API so you have a developer account so you need a client ID it's essentially your developer ID with with Google okay so so what you'll do now in this point is you're going to uh I'm sure there's different URLs to go to but the one that we've been using all semester is cloud.google.com okay and this is where where you can create this developer client ID and then you should be logged in here as I am you're going to click on counil okay and you know you may have something in here you may not okay but this apis and services and credentials this is where we're going um to create this ooth client ID right can you guys all see this I'm going to I'm going to delete this um because I'm assuming you guys do not have it says no ooth clients to display I'm assuming that's what yours looks like yeah I got a couple people shaking their head yes so I'm going to go ahead and create credentials and by the way this is Project agnostic it doesn't care what project you're in this is just your Google you know credentials so I'm going to go ahead and create credentials here and an ooth client ID and this is a web application and I'm just going to call this passport ooth yep whenever I gu send screen client ID is used to configure for more information okay go ahead and click on that and then um so you're at your ooth consent screen choose how you want to configure and register your app including Target users you can only saate with one project internal available to users within you do not need to submit your app external available to any user to test with a Google account your app will start in testing mode um I don't I didn't go through that the other day so uh internal only available to users within your organization you will not need to submit your app for verification or external available to any user with a Google account well I mean uh available to any test user with a Google account I would assume you know in the real world I ultimately we wanted it to be external so let's click on external this always it's a radio button we could change it later if we need to just got to find it okay so then it says ooth consent screen okay app name let's just fill out what we have to fill out so app name just call it uh Google passport so app name Google passport so let's see can you can you just get by with those two pieces of information save and continue okay you need your email address must have already done that I don't know is um here under authorized redirect Uris I had to add my call back URL so here add URL Local Host off Google call back add that and then I click create this is where I get my client ID secret and creation date now couple students following along um had some additional questions to fill out as if uh maybe I already did this once but you're going to have to fill out whatever the questions may be um you know it's like some generic app information um let me pause and see if I can help you fill those out okay um so if anyone is doing this today or later here's couple students what they did they just filled out minimum information I think example.com was a domain we're just this is just a test right so uh you fill out your email address your developer email address uh what else did we fill out like a name we made up a name passport demo um and that got us that got us to where you could fill this out right all Orin so at that point the what's the question now now we we now we're clicking in ooth client ID web application and then I add an authorized redirect Ur eyes um let me go back and show you I did Local Host 3000 off Google call back that's that's basically after a successful authentication with Google like where are they being sent on your web server after that right so in other words you're giving Google control to authenticate the user they're going to send you back to what URL and and this is the URL that we've specified okay and that is because of this right here and then you click on save all right so now that we've got some client IDs and things of that nature and a secret uh we need to save this to ourv and so let's go back to our EnV I'm going to copy my client ID into oops EnV and I'm going to make a variable called Google uncore client ID equals paste it in and then I want to say Google client secret equals I'll go back to my client secret right here copy that paste that in so save my client ID in my secret to myv file then I can refactor my index JS to point at them so this is done by saying process. env. gooogle client ID comma and this is process env. Google client Secret okay um so we're going to take uh that's configuring this strategy the next thing once we have a user we're going to save that user infro into a server side cookie and this is going to be done with this uh it's called a serialized user passport serialized user actually this is this is correct so I'll show you how once a user is logged in ultimately that information will be saved into uh a cookie uh so this done method is called passing a user and there's also another method to What's called deserialize the user so this is kind of like writing the user into the cookie this is reading the user out of the cookie okay so we have these two methods that deal with like saving the user into the cookie and reading the user out of the cookie um that are used by passport and uh next we need to set up the session middleware and this is with app.use and we call session which is our variable on line three app.use session it's a method that takes an object and our sessions also have a secret uh and so we need to go ahead and maybe Define that secret back in ourv so let's create another variable called session secret lots of Secrets and I'll put it in a string I'll just call this super session secret so we have this session Secret online 4 which will then allow us to use that value in process. EnV session secret believe is what we just called that session uncore secret okay resave true save uninitialized to true and here's when we can set kind of like the uh cookie talk about the max age of a cookie and if we say one hour right it's the same math that we did before th * 60 * 60 it's kind of the idea of 1 hour is the life of our cookie then we're going to uh set up passport so we kind of configured passport now we need to tell it to app.use app.use passport initialize and app. use passport session again trying to keep this Bare Bones but there's quite a bit required to get this up and running you got to bring in passport you have to Define what's called this strategy which is a Google strategy obviously you can use passport to connect in all sorts of different uh uh websites whatever Facebook LinkedIn Etc so we're saying hey we're using Google here's our Google information we'll do some some moreu here in a little bit uh when we have a user we need to save them into a cookie we need to configure that in uh cookie here and install that middleware uh be it passport initialize and passport session okay back to our home route you know we can do like a little hello uh a little H1 here with some instructions maybe um please please navigate to SLO SLG Google to login and so we need to make that route app.get SLG gooogle and so at that route we run a function called passport. authenticate authenticate to Google uh scope of profile not exactly sure what the scope of profile setting does here but safe to say we go to this URL it kind of kicks off the process like it's going to give it to Google to authenticate our user um and then we need to Define what happens after uh in other words where do they go um so when Google gives us back yeah success or not success um where do we go next and we said we're going to go to off Google callback so let's set up that route off Google callback app.get off Google call back comma passport. authenticate Google and on failure it's going to redirect to the homepage on failure redirect home curly parentheses and then on success comma I got an extra on success Rec res going have to fix my arrow on my curries here on success res redirect profile so we'll go to this profile path and let me clean up my curly parentheses semicolon I might have an extra somewhere let me make sure I've got this right so I there was a line 58 there was a parentheses I deleted so uh let's just start from app.get string comma passport authenticate oh Google there's no parentheses right here there's no parentheses after [Music] Google and then that means that there is a parentheses on line 58 okay so if it works if it works we need to create the SL profile so we're going to display the user profile if It ultimately Works app.get SL profile recr curlies if wreck is authenticated so now there's this new method attached to our request if the request is authenticated we're going to do a res. send you are logged in and in a about a span [Music] tag let's do uh back ticks here we're just going to put a Json stringify rec. [Music] user and uh null two that's a little formatting for stringify close the span so if if we successfully do this put the uh users information in a span and send that back home uh else if the user is not authenticated res redirect home and let's also make a log out the user app.get so log out path so we're going to call a wreck. log out and and redirect I'm not sure I'm not I haven't tested that although that that looks pretty simple we'll see if that log out works if not I've got some other code that might work it's a little bit more complex all right let's see what breaks so we are at the point this is the Bare Bones code that we can write that I could write to get this working um so let's go to Local Host okay please navigate to slash off slash Google to log in well that's a good sign it took us to a standard accounts.google.com so let me just stand in sign in with my normal Gmail okay different error cannot get off Google call back so that that to me um makes me want to check my route off Google call back cannot get off Google call back okay let's troubleshoot this so I do see one thing that I left off I'm not uh this probably is something um because I was going to wait to write this later but let's back up here uh because okay um this is in my Google strategy so scroll up to Google strategy and this async function uh let's return done null profile that return statement probably I was going to wait to write that later but I think that's going to be needed so let me mpm run start Dev 3000 we're cooking off Google aha we are logged in with a bunch of information including my Google account name um you really don't get a lot of information out of this you get someone's name and you get their maybe their picture right if I kind of look at that URL of that picture uh kind of curious if I copy and paste that hey there's me Circa 2006 uh but this is cool sorry for that missing that line of code um let's look at Local Host let's go to and now if I just go to SL profile right you are logged in um notice if I click on this uh extension called edit this cookie uh you could see that there is a cookie that expires in like an hour right this cookie was created on 9918 and expires 1018 uh and if I were to delete this cookie now this site no longer has a cookie and I'm not logged in right so um let's reauthenticate with Google let's log in users logged in cookie created cookie sent to the client so client can see the cookie um bless you bless you and that's cool now what can we do from here well you probably want to save this user information to your database right um to know who's logged into your system also there's no like address information right so you might depending on what you want to do with your user do I even get an email address um right so you might want to collect additional information for use in your system and user statistics and emailing your users and all this kind of stuff um it is pretty basic and so you know this is a starting point for getting a user authenticated with another system but there's probably more that you want to do you know and and so I'll finish this out and then and then I'll be done you guys can get working on some Labs um what you could do here now that we've logged in with passport um you know this function right here is where we could take this profile and save it to our database so as we've done another uh we might create a database module and bring in client bring in debug make our database variable bring in object ID to create new object IDs make our little new ID function make a connect function asynchronous okay uh so we need to make a database URL inside of ourv so over here DB URL equals uh in which case I will go to mongod DB and I will just make a database for this so if I go to my cluster I'll create a database named um well maybe I you know well I'm not going to bring this into Retro Amazon yet so I'll just call this passport users or just call it passport passport collection name user so the database is named passport the collection and is named user and if I go to connect using mongodb driver here is my connection string with my password so I will save that in my DB URL with my password and I'm put that in quotes and my DB name we call it capital passport I think okay passport so we have our connection string and we have our DB name two variables in do and V okay okay DB name client await client. Connect using connection string undor DB client DB DB name and then return DB uh apparently enough developers are hip to the ping pong ha joke all right so now we can call this ping function and all we have to do is export ping export ping [Music] and when we import ping over here that should get us pinging import ping from database and now now we're pinging so back in our database let's make a function to create a user async function create user we're going to send in a user really it's the user profile connect to our database now of course our collection is capital u as such so connect to our database insert one user store the result in a variable return the result [Music] and Export those okay so once we have this function to create user um let's write another function to get a user by ID async function get user by ID we pass in an ID con DB connect await the find one now there's a ID which is an object ID but I'll also point out uh if I go back to Local Host 3000 Au Google or just profile I'm not logged in so slash off SL gooogle I sign in there's also an ID that's just a string right so this is not an object ID right so I'm just doing a lookup that is a string that is a Google unique identifier this is not a an object ID unique identifier so this is to look up by a string ID so I don't need to convert it to an object ID and return user export that function so that that's all that we're going to do with our database for now of course you know how to expand on that um but just to show you that we can take the user that we get from Google and save it into our database and then obviously we're not going to save them every time but we're only going to save them if they don't exist so back in index.js we can kind of come up here we'll bring in ping but we'll also bring in get user by ID and we'll bring in uh what do we call it save user we called it create user um and now we just have a simple if else here if await get user by ID profile.id so if the user already exists we'll say user already exists in database else create user sending in the user profile so now whenever we log in kind of automatically we'll save the profile information to our database so we can start to take control of that of that data again advantages here letting Google handle credentials is like now you don't run the risk of your website getting quote unquote hacked all your credentials leaking and then you know you getting sued for not securing your data okay so there is a significant upside of letting someone else handle your authentication um the downside as you can kind of see you're just kind of restricted to well we just got a you know we got a username and we could say well they did authenticate with Google but we don't have any any other information so you don't control the data so so this allowed you to start taking control of some of the data start saving some information to your database so that you can so that you can use it however you need to all right so if we kind of go back here I never tested my log out let's log out uh okay log out was not well written so let's flush out log out because I didn't think so let's go back to log out it says it requires a callback function so inside of log out in the error case if there's an error we'll just send it to the next middleware return next okay so log out required a callback function so we put a little call back function inside of log out so now if I hit that again okay now it does log us out so slash off/ gooogle click on that okay I broke it let's see what broke user is not defined return user this is on database right here line 36 return result okay there we go that makes sense let's try again local hosts SLG gooogle bada bing bada boom okay now okay and if I go back to my database and I look at passport I look at passport and I look at user there I have saved the Google user into my database and if I were to log out and authenticate again you know we we set it up as such that we [Music] should um not write that save that data twice not sure something might have might have gone too fast it did save the data twice so something's not working so our get user by ID we do a find one return result let's do a debug database result isue what's the issue good eyore ID not ID oh Bingo string ID firstus isore ID that's it um save refresh all right I'll delete this second instance because that was a mistake if I slash log out yay SL off SLG gooogle ping it we're in now Ed already exist in database that's what I would expect and and we don't have them saved twice if I go here go back to here h w w w thirdd times a charm so let's go back um almost there this is finding our user return result so I might have to switch the logic it needs to be if the user's not found or something like that let's go up here um I might have this backward if a weight get user by ID is truthy I might have run that function a couple times let me try it one more time it might be working I just I might have uh Slash log out okay okay we're not logged out if I refresh my collection we've got one user SL off Google log in I get the user already exists in DB so that if should be true so it should not create my user if else refresh one of one okay we're working um okay um you can kind of see couple bumps in the road but ultimately it's working and we are now authenticating with Google using passport so uh cool stuff hope you guys you know like the end product even though we hit a couple bumps um I'm glad we got here

Channel: Evan Gudmestad

Views: 822

Keywords:

Id: YRfAUTQvIZ4

Length: 61min 48sec (3708 seconds)

Published: Thu Oct 26 2023