3. Adding Google OAuth2 Login | Google OAuth2 Authentication with Passport.js | Node.JS Development

so hello everyone in this video we'll be integrating our passport Google oaus to package and the main process here so for that I have this passport uh Dot js.org and we are already like installed all these packages we don't need to do anything you just need to go to this passport Google passport you can search for that passport Google os2 I have already implemented or like I have already opened that page you can see that this will be the page you can go to that page with the help of let's say Google oh what's too so we have this Google oauth 2 page if you click on that so it will open this page uh and in that page you will find every information which you want also passport.js is very good for implementing other authentication features as well like for example passport Facebook to implement Facebook login process if you want that in your like application so will not be going in that way just we need to implement this Google or 2.0 Authentication so you can see that it is saying you can install this passport Google oauth 2 which we have already done and now it is saying you just need to do this kind of process so you can simply copy this code here or you can manually write if you want and you can just paste it at the top or you can create a separate file if you want it to be clear from the other code so I can create auth.js file and inside that I can paste it and we need to do some things here let me just paste it one one more time yeah now we need to do some of the things here because passport is not initialized so we can first of all import passport here so passport is nothing but the passport package or the library which we have installed you can just require it by saying require passport and now we can also make it constant variable because we'll not be using it twice and then Google strategy this variable will not be re-initializing it so we can make it constant and now you can see this is how it is creating this Google strategy and now we are using it in passport.use kind of middleware and in which we are just creating a new Google strategy in which we are passing our client ID which is Google client ID which will be getting from our Google developer account and we are also getting client Secret so basically we don't have these two variables also uh the Callback URL which we need to create and also after that there is a callback function which is here in which we'll be getting all the information such as uh the request we send access token refresh token and the profile and the done function basically we don't want all these things like in which is available here because it is actually creating uh the user and find finding and creating the user from the backend database and updating the refresh token or setting up the Google ID to its profile ID so basically we don't want that because we don't have any database here you can do this if you want but will not be doing that we are just returning the done function and the profile data so we can just return this kind of information only also for like implementing this Google client and Google client secret we just need to first of all create an environment variable because we cannot store like secret information or like API key information or client secret kind of information in a normal page because that can be like visible to other users if we upload this application into GitHub so if we deployed it in GitHub so that will be a problem if somebody sees this Google client ID and Google client secret so we always create that information or we separate that information from a normal JavaScript page or normal other pages so we always set up in environment variables for that so I'll be creating these two variables and for the data I'll be going into the developer account so first let's initialize it and after that we have Google client secret we can copy that right and to use environment variables we have already installed the package which is dot EnV so we can require that package here which is dot EnV and we can call the method which is config and now we can use process dot EnV here similar for this process dot EnV y uh process dot EnV now for the localhost or like for the Callback URL like it will be the URL after like which it will redirect to after getting the information from the Google which page or which route will be the main callback URL so it will send the information to this route or it will be calling this route after making the request on the Google sign like authorization or Authentication after making the authentication we can set up a local host three thousand not three thousand it is 5000. and we can set up this callback URL in our like index.js file first let's get this Google client ID and Google client Secret so first let me just go to the browser and you can get that very easily you just need to go to the Google console or Google developer console and create create a Google or auth ID so for that I'll be just searching for Google credential oauth credential or you can just search for OS credentials now the page will be let's write Google credentials here simply I can see it is telling me console.cloud.google.com this is our like main developer console in which if you have already logged in so it will show you the logged in screen and the credentials page where you can set up and create oauth API key uh sorry AO watch client ID and client Secret for a particular project you have so basically it will load Let me refresh it let me clear it you can see that we have this or 2.0 client ID and client Secret uh I can also create one more credential here so I have already created previous credentials for like demo purposes I can delete them like anyhow if I want but let's just create one more credential by using Create credential here and if I click on oh watch client ID it will jump to the next page where it will ask for some information that we can provide now in here we can tell him what is the type of application we are using we're creating it for the web application so you can name it anything you want let's Let It Be web client three and we can also set up a redirection URI which we have already set up here so I can copy paste the same thing so it will be the Callback URL so in which our callback will be presented after making the request from the Google so I can create it now so if I create this page or create this oauth client ID it will give me my client ID and client secret that I can store in my environment variables so basically it will be for that now you can see oh auth client created now I can copy both these information and store it in my environment variable so this is very important step you just have to remember it so don't worry about it I'm showing you in the video but I'll be deleting it after making this video so this is it we just needed that information from the Google now what we actually need is we we can press OK here and we can just save this file so now we can also serialize the user by using passport dot serialize user and it will be a function in which we'll be getting our user and also the method which is done and I can simply call the done method and initially the arrow will be null and the user will be the user so this we are doing for passport.js to like serialize the user and similarly we can use deserialize if it is needed similarly the same thing will go for them and I can call the done function again or done method again comma and this user so the auth page is completed now we need a callback function we need to create a callback API or endpoint which we have provided here you can see that watch Google callback Google call back also we can require this auth.js page here in this application I can call it require dot backslash or the page name auth.js so watch you can just simply write auth it will automatically add JS there and if you go to the passport Google Earth screen in the next step it is telling you that you just need to first set up this auth Google route which will be the route when we click on this link and after that this uh passport authenticate will be called and this will actually authenticate it from this uh like this page which we created just now and after that it will send the response to this callback URL which is this auth Google callback in which we can actually get the idea that whether we are authenticated successfully or not so if you are successfully uh like authenticated so we can redirect uh the user to a sum page and if you are not successfully redirected so we can simply send them to a failure page so we can copy this route here or this middleware or like Express routes here and I can paste them in here make sure the naming which you are having here auth slash Google matches with the index.js href route so make sure you're matching it and in that we are simply authenticating with Google this is necessary you just have to remember it and after that we are simply uh limiting the scope to email and profile so only these kind of information will be getting not every information from the Google account after the login you will be just getting the user's email and the profile and then after that we are just going into this Google callback endpoint in this endpoint we are just checking we are authenticated successfully or not if you are authenticated so we we are redirecting to this route which is Google success which we haven't created yet and we can also create a Google failure route so for both of these routes we can simply use app.get here uh this was the like route which you want the user to be shown let's say I have this protected out so that I have shown you I have this auth protected and after that I can simply get the request and response right and simply I can uh send some data let's say hello there right so this will be the like protected route which will be passed after the successful login so that we are creating here and simply if I save this complete information and also we just need to set up some session tokens as well now you can see it is saying me passport is not defined so we can set up that as well so I can set up passport again passport I can require passport here simply so this is it and also one more thing we one last thing we need to do is we just need to store all these information in a session token so for that I'll be using the express session package which is a session management tool by Express so we can simply use express session and create the tokens or create the cookies you can say simply so for that I'll be just creating it with the help of app dot use First you can use it app.use and inside that you will see that how you can implement it with with this Express session npm page you can see it is using by app.use and then after that it is setting everything here I can set up that here make sure you make it to false because if it is set to true then it means uh it will only create the session cookies whenever the like website is running on https not http so you can change that also this secret you can store it in an environment variable for now I'll be just using my secret or anything you want so you can use it similarly we can initialize passport initialize in one of the r dot use middleware and after that we can simply create one more middleware function that will also check whether the user is logged in or not so I can create as logged in function that will be a middleware basically and that will redirect us or send the response to 401 if we don't have request.user so if you don't have request.user then if we have this so we can make next API endpoint or next we can transfer the information to the next end point or to the next middleware otherwise we can send the information that you are not logged in or you are unauthorized so we can do that with the help of status 401 so 401 stands for unauthorization so we can call this is logged in here in this protected as a middleware similarly we can also create Google failure route as well so I can copy this page or this route and I can copy this thing here and I don't need this one here I can send something went wrong so I can send any kind of HTML Pages as well in these like routes I'm not sending any page here because I don't want to create separate pages for separate thing and also I cannot pass the data in these HTML files if you are using EGS so we can do that so feel free to use any UI library or any UI package you want so this is it and after that we can also get the data here uh session is not defined he can also set the session I haven't called that so some of the thing I need to use session equal require Express session you can call it now I should not give any Arrow okay uh one more thing yeah in here I was getting the name from the request dot user dot display name so this will be the data from the like uh callback from the Google so I can get the data and I can uh say let's say hello and I can present that in here if I save it if I save it that should make the things clear and I think our application is almost completed so now I can check that application if I refresh the page now if I go to the protected route so it should log something called unauthorized okay you can see that now if I log in with Google it should present me the login screen now you can see it is presenting the login screen if I click on that first Google account which I have then you can see it is redirecting me to watch protected okay so now it is still okay something I'm missing let me just check it one more time so basically uh there will be one more thing here so I have I'm not setting it into the session that's why the session is not set properly so I can use passport dot session to set the token or the information from the passport.js to our session cookie so this is these three steps are very necessary you have to remember this now if I save this file that should work now I can save it one more time I can go to the main page which is 5000 let's go to the 5000 page right let's log in one more time you can see that it is showing me this page let me just go with the first Gmail account I have let me just close the console now you can see that it is setting the data here and we are getting the cookies set in the storage as well so this is how you can set that and similarly I can create a log out route or I can simply delete it from my site as well so these three steps are very important you just have to remember it to set the cookies properly and now I can create a log out route as well by using app.use slash auth let's say log out to remove the token or session token I can use Rec res I can first of all like destroy the token request dot session dot destroy I can simply destroy it with the help of this destroy command and also uh I can send some response let's say see you again or I can redirect the user to the home page as well if you if I want so I can use res dot redirect to redirecting to some page so basically this was it and now if I refresh the page it is lost now if I log in again now we have this and if I press log out here so you can see it is saying CU again which means it has deleted my session token successfully now you can see we are seeing unauthorized yeah so similarly you can delete any session token with the help of this session dot destroy command so this was it and this was our complete application in which we implemented our oauth client with the help of passport.js if you have some issues or like some info like problem you can comment down and I will be definitely solving that and the code will be available in my GitHub repository you can check out that so thank you for watching let's meet in the next video

Channel: CodersArts

Views: 34,445

Keywords: Google OAuth2, PassportJS, NodeJS Development, Google OAuth2 login, Passport.js, Node.js, Authentication, Login, Google, OAuth2

Id: eDf91hihLpo

Length: 28min 6sec (1686 seconds)

Published: Fri Jan 27 2023