Express (NodeJS) - Google oAuth 2.0 (passportJS)

hello everyone welcome to I'll show you how to implement Google OAuth 2.0 authentication using passport j/s in your Express application I'll also show you how to create middleware to check if the user accessing your else has been authenticated and I'll be using sessions to do all of this together first of all let's go to the passport in j/s official website open the strategies and open the passport Google off to all strategy as well as open just the documentation page because I would like to copy some code from there let's first of all install passport GA yes the code I already have here is some very basic setup for like a hello world Express application only has body posture and course installed so since we have passport j/s installed now what we want to do is also install the pass for Google off 2.0 and start the configuration process first of all I will create a separate file for the passport jas configuration just as separated from the rest of the application so passport setup dot and GA s we will copy this code right here and add one more import at the very top pass 4 equals 3 why your passport okay let me explain this bit of the code right here so first of all obviously we import passport je s and then we import the passport Google OAuth 2.0 and then we just take the strategy from the import and put it in a Google strategy Const variable then we O's the passport mmm use function so the passport JSU's function we use it to define a new strategy in this case a Google strategy to it we pass the client ID our Google client ID which we will get in a few seconds the client secret also for Google and the callback URL the callback URL is something we will define in a little bit it's a URL that the the the user gets redirected to after they login into Google and then we have this callback function down here which also takes a callback which I will rename to done because it just makes more sense to do that which will be triggered afterwards so I'll I'll take it one step at a time and then first of all we'll need to get the Google client ID and the client secret to get those you can just Google Google credentials and then this link should pop up it might ask you to create a project once you already have it it's called - so for like tutorial and then you can go in here and select api's and services grant roles you should open this page then you can click here and then create a Olaf client ID I have already done this and it's right here you should select like for web app blah blah blah you want to add the callback and the Google the the callback URL down here to the URIs and what you want to do is copy the client ID from here I will obviously remove all this before the video comes out so you cannot use mine but you can you know you know what to get them it's not that difficult so we have the client secret and the clydie now let's define the callback URL so let's go back to the docks and copy this bit of the code right here I'll put it under the hello world route I'll remove the auth part since you know I already added those two URLs and they didn't have all that one of them so I'm not gonna do okay here we'll get the profile and the email you can you can look more into the Scopes from their actual dogs but this profile email there's open ID and stuff like that I'll just use the profile and the email this is the callback URL so this is the callback URL actually I have it up here so what I'll do is just copy this and then this is the URL we want to pass right here so okay so after the authentication if it goes well we want to redirect juice if it fails we want to go to redirect to slash failed I will create a new route slash failed often in this one and it will say you failed to login and then all the fun another one will be named good and then it will say welcome mister and then I'll put the request user email and then I'll change this and I'll explain this request user email in a little bit but we'll just get rid right - slash good afterwards another thing we are missing is down here in the configuration bit what we want to do is copy these two middleware functions put them right below the body parser and also import passport into our main index J yes so what this does is initializes passport j s and the authentication process what this one does is it tells it to use sessions to authenticate now since we are using sessions we will need to use another session managing package it's called cookie parser I will quickly get that for you cookie a cookie session I'm sorry it's not called it's called cookie session so it's this one you install it real quick define it up here and then make it a Const and then what we want to do is I'll just copy this bit obviously there's a lot more things you can a lot more figuration you should do to it in your actual application but I'll just define the session name as - toe session like that and these are the keys Oh that's done or what we need to do also is import this file into our application we can just do that as require and then dot slash passport setup the reason we are not putting it in a variable is because we're not gonna actually use that we just want to import this entire thing here so that we can use it so passport can use it really we don't really need to use anything here ourselves and the last thing we need to do or I need to do is define these two functions in our passport setup and explain them and then explain the entire workflow so this is how in the entire passport j/s Google OAuth workflow will function you send your users to slash Google let's put this in the same line and this as well so your users go to your API URL slash Google this opens a Google page this Google page will use the client ID the client secret and the callback URL in the back but it will then open a Google page which will prompt the user to login once they login this function will be triggered for the purposes of this tutorial we will ignore these two but you can use them if you want to authenticate the user for other Google products here you will have the profile and the callback names done what you want to do here is use the profile info mainly profile ID to check if the user is registered in your DB so the profile object will contain the ID of the Google ID of the user it will contain their name if they have like a given name last name thing as well it will contain their email their user profile and stuff like that you can use that put that in your database if the user is not registered so if the user does not exist you put that in the DP if he does exist you select the user and you pass this user the selected user or this created user to the done function so we will pass null and then the user because we are not going to do any of this because I don't want to make a DB and make this at all really long I'll just pass the entire profile once that is done this serialize user function will be called this function will then take what you passed in and just take the ID from it the reason it just takes the ID is to make the cookies smaller so each time a user sends a request to a route that is authenticated or any row L it will passport session will take the cookie it will call this function it will take the ID from this cookie it will find the user in the DB and then select the entire user objects you have the entire user object and request that user now since we don't have a deal like I don't have a DB setup and I don't really want to do any of that I will just remove all this but just remember that's what you're supposed to I'll probably put comments in here explaining that you're not you're supposed to do that what I'll just do here is just user user user user so every we're just going to be the same Google profile path being passed around so once this is done and the user is put into the cookie in our case but in there in a real application will be just the ID this callback URL gets hit if the authentication went success or failed it will redirect to slash failed if it went successfully it will trigger this row and it will redirect you to slash good when that happens in your browser you can go in and check if you actually have the cookie in there which you should containing obviously the login information in our case the entire profile in a real application just the ID but you obviously won't be able to see that because it will be encrypted so each time so what we want to do now is actually create a middleware that would check if the user is logged in when they try to access about I'm sorry if I'm kind of scatterbrained we're explaining this but yeah so I'll define it in here you should obviously maybe define it in a separate file just to clean the code up a little bit so is logged in will be a function that will have a request response and the next and then in here we'll check if request that user exists we will call next if it does not exist we wanna call response send status status 401 which means and authorized obviously you can call something else here if you prefer so we can put this middleware it for our good route and only people that are logged in will be able to go to slash good what else we need here like the last thing we need is the logout route I will create it down here so apt-get slash logout it will have a depressed response in order to flog a user out from all this what you need to do is just destroy the session so request an session equals no this will destroy the session itself in order to log them out from passport you need to do a request log out and then response will just redirect them to slash I don't know what will - just slash which would be like the hello world I guess so let's make a new route here okay and that's really it so let's start our application and go through it so first of all you're not logged in so if we go to slash Google click enter area is not defined that's my bad this is supposed to say no let's restart the application real quick and go again everyone just this is a quick cut I sort of thought I had an issue the issue is that this is it's called display name it's called it's not called name you can console log the entire request user here if you want to check what it contains so yeah so now if we go to localhost 3000 slash Google it will take us to a Google sign-in page where we select one of the accounts I'll probably blur them but you can see there's multiple accounts to select we select the account it will then log in and then sell hello mister volca in this case if I then try to go to slash log out you will see you're now logged out so if we try to access last good without being logged in it will say unauthorized and that's really it so we have a protected that's not accessible if you are not locked in if we login it displays our name or like my name in this case sorry that's the yes Google it opens this again and then you can select the account login etc etc so we can log in slash register for the application we can protect routes and we can log out that's the entire sort of workflow of the application so it goes to slash Google this function this function call back whenever the users comes back it triggers this that's that's the whole workflow I hope you learned how to you know use Google off and I'll probably clean this code up a little bit and put it in description below thank you for watching good bye

Channel: Vuka

Views: 57,072

Keywords: express, js, javascript, nodejs, bcrypt, npm, auth, register, login, routes, example, tutorial, hashing, hash, vuka, oauth, oAuth, 20, oauth20, 2.0, google, authentication, passport, passportJS, cookie, node

Id: o9e3ex-axzA

Length: 14min 53sec (893 seconds)

Published: Sat Apr 04 2020