Implementing Google Authentication With Node JS

hi guys welcome back to the channel so today we're going to be looking at implementing uh google sign-in with our node.js applications um we're going to be basically using google to sign into an app and then we're going to receive a it's using oauth 2 uh authentication okay so we'll sign in with google google then provided with an id token we'll send that id token to our back end and verify it with the google library and then once that's been verified we'll then establish a session using cookies um to store our id tokens so the user can make subsequent requests um using that uh um session token okay so just to give an example at the moment i have this login route we also have a dashboard route which is protected okay so you can see when we try and visit that we get redirected straight back to login page i also have a protected right here as well and again that just redirects us straight back to login pages we're not signed in now if i sign into google you can see here we get redirected here continue to connor's all fap use my credentials here sign in you can see once we've been signed in we get redirected to the dashboard here and you can see it says my name and it also displays my kind of google avatar as well and now if we go to that protected rat you can see we can now access the protected route as we're authenticated and here is the um the session cookie okay so if we go to our application you can see we have our session tokens stored here with our json web token provided from google here okay and then if we sign out you'll see that this session token gets cleared that's no longer in the list and we've been signed out of our app okay so that's this is just a quick overview on how to implement google signing with a no js application any questions give me a shout in the comments or message me and yeah i hope you enjoy guys thanks for watching okay guys to get started and we're going to just um start a node application okay so in order to do that i've got vs code open here a new folder we'll start from scratch it's going to come out terminal and say npm init hyphen wire okay and that will create our package.json file i use the hyphen wire just to set the default values when we set up our app okay um and then next we want to do here is just to install our dependencies so i'm going to say npm and the first dependency is express and then we're also going to be using uh cookie hyphen parser like so and then we're also going to be using dot env for our environment variables and we're also going to be using um what else we're going to be using here ejs okay and that's going to be used for our template engine to serve our html files ejs files rather so install those and then we're also going to need to install one dev dependency as well so npm uh i hyphen d capital d for the developer and then we're going to say nodemon okay and what this does is just um this will watch our server or application for any changes we make in the code and it will automatically refresh the server okay so we don't have to go in and manually reset the server every time we make a change to the code so if go and tap package.json file here you can see we have our dependencies here and our dev dependency node mod next we have to do is just set the scripts so we'll say scripts dev and here we're just going to say nodemon server.js like so and then we also want a production script so we just say start and then here we'll just say node node server dot js like so okay so save that so um that's it for our package.json file next we want to do is just create this server.js file okay so we do have to say new file server.js and then in here we're going to bring in first we want to do is bring in express so we'll just say const express equals require express like so and then here we're going to say const app equals express and what this will do this is using the express package and it will just allow us to have access to all the methods such as you know listen uh post get that kind of thing okay and then next one underneath this we want to set our port so i'm going to say control equals process dot env dot port or we'll say 5000 here like so okay that's what this is doing when we're in a developer production sorry um it's going to look at our environment variables for this port variable otherwise in developer mode we're going to be using this 5000 port number okay so then come under here let's just create an initial route just to test our apps working we'll say app.get forget request and when we send a get request to the root path we're just going to say it takes in a request and a response and then we're just going to say here res.send and we're just going to send hello for now if i can spell it right like so and then finally we just want to do an app.listen and here we want to listen on that port number on that pool uh variable we set and then let's just do a callback which console.logs i'm just going to do backticks here we'll say server running on port and here we'll just say port like so okay so that's it for our basic um initial express app setup just zoomed in so you can see more clearly there i'm going to come down to the terminal i'm just going to say npm run dev okay what that will do that will set off this here we're setting using this dev script which triggers nodemon to serve up our server.js file okay so now you can see our server's running on port 5000 if we go to our browser localhost 5000 and you can see we get our hello rendered to the screen okay so the next thing i want to do here um is i'm just going to set up ejs now which is our template engine okay so let's do that let's go under our port section here i'm going to have a section for our middleware okay and here this is where i'm going space just set our view engine in this part so in order to set our view engine to ejs to so so our app can serve our pjs files i've just got our app dot set here we're setting the view engine as the first argument and then the second argument is the template engine we're going to be using so in this case we're using ejs okay and then if in order to serve our pjs files a node automatically looks in a folder called views okay so we're going to create that in our project directory create a new folder called views and then coming in here we're just going to create an initial index dot ejs file and then you can just uh write normal html and an ejs file i'll just create a h1 saying this is the index ejs page there you go like so and then if we go back into our server.js i'm now going to change this res.send and we're going to use the res.render which we now will be able to use as we're using a template engine and all we have to do in here is simply just type the name of the ejs file we want to render which in this case is index laksa okay and as we're using this template engine node will know or express will know to look in this views folder to serve up this index file okay so now if we go to our uh browser again refresh you'll see we're getting our ejs file rendered to the browser okay so now coming back in here i'm going to create a few more um ejs files in our views folder we'll say login dot ejs uh we'll say dashboard dot ejs and then i guess we'll also we'll have a protected route as well just to show that the google sign-in functionality more okay so i'll just say protected root dot ejs like so so basically the dashboard is going to be kind of like a when our user logs in they'll be directed to this dashboard page okay and the protective route both of these the dashboard and the potential will require um authentication to access okay the login page and the index page won't require the authentication just for just to demonstrate how the google auth works so what i'm going to do in here um i think next thing wanted to we're going to create um go into our login.ejs file and let's just get a boilerplate from running in there okay i'll just type login in the title and then we'll also set h1 in here login before we progress any further i think now is a good time to set up our google api okay to allow us to select to allow our app to use the google sign-in functionality so in order to do that let's go to our browser here and let's just go to the google if you try to go into your top of the browser type in google dev uh console google developer console okay then go in here obviously you'll need a google account to uh set this up and then in order to create actually let's just refer you to the guidance actually so this is how you this is basically the guidance team playing google signing and this is like the kind of first step we have to do here we have to create our authorization credentials okay um so any application it uses of tool text over olf 2 to access google and we must create some more friday all fridays and credentials so go to the credentials page first create our old client id select web application and then uh name our client our um 2.0 client so that's where we are here go to the get developer console click on here select credentials and then load and then here we're going to say create credentials at the top here we're going to use the oauth client id and then application type is a web application in this case i'm going to name this google off tutorial okay and then what we need to do then is add our javascript origins okay so this is where we're going to be accessing or where we're going to be contacting this api from so obviously if you're using a production environment you use your production production address here but in this case we're just using that development environment so i'll just say http colon forward slash forward slash say localhost and here obviously paul 5000 laksa okay that's added um let's do a crate now this will create our credential and you can see once you create a credential you're given a client id here as well as a client secret okay um and here's my applications here this is one we just created google tutorial so now that we have that we can now come back to our guide here and in our login.ejs file next we're going to do is have to load the google platform library okay so let's just um copy this script and go back to our ejs file i'm just going to paste the script in the header okay it has this defer tag so this will load once everything else is loaded on the page okay so there won't be any kind of hold up here um and then the next one we have to do is specify our apps client id so remember we when we just created our um uh credential here we go in here and you can see we get our client id here okay so um let's just go back to here and we're just going to have to copy this meta tag okay this is also going to go in the header of our ajs file and then we just simply have to replace our client id with uh our apps client id so come back here copy this id like so and then we'll just copy that up here or paste that up here okay so and then the next thing we need to do here is if we come back to the guidance come under here next we have to have to add a google sign-in button to our app okay and this is the easiest way to do it as we load the library and up here we get access to this sign-in button so now we can just say copy this come to our body underneath the login header paste that in there like so and then finally coming under here so that will give us this kind of google sign-in button you'll see in here and then initially we just we can just like get user once we've signed in we can just kind of render the user's profile google profile information to the console okay such as their um so you can see here when we click to sign in when we when we click this button it triggers um this sign in function which is here on sign in and that just basically gets the profile which is it part it takes the google user and it gets the basic profile information okay so we can get their kind of id their name their image their google kind of avatar which you can see up here for me and their email address so let's just take that and then i can come in down to the bottom we'll say script and then we'll just uh paste that in there like so tidy that up a bit and yeah i believe let's just uh bring that over okay so now when we sign in let me go back to uh i think actually we still need to make a wrap for our login right yeah we do okay so let's just do app dot get and then we'll say forward slash login and here again rec res for request and response and here we're just going to say res.render and we're going to render the login ejs file okay so now if we come back to our app go to forward slash login now you can see um yeah we have our login and our google button and you can see that's already signed in it's because um i'm already logged into google up here if we go to inspect and then we go to console you can see um my kind of google id name image and email address are rendered to the uh the screen okay so if we click on that you can see there's my google avatar okay so what else i just want to quickly add now while we can is just um if we go back to the google guidance here there's also a sign out so in order to sign out a user um let's just copy this section here and what this does this just um gets the kind of current uh logged in users instance and it just basically signs them out okay and it logs to the console that the user has been signed out so let's just uh add that to our ejs file i'll log in ejs sorry again i'm not too bothered about the kind of css for this project today guys it's just basically showing you how to implement google or with a node.js application so this is just the initial sign-in what we're going to have to do with these credentials is pass them back to our um our backend to kind of create an access token for the user session okay but for now you'll see if we go back to our ejs file refresh you can see now we have a sign up button if we sign out so the user's signed out and then this is changed to sign in if i just log out of my google account here for a second sign out like so and then if i sign in you can see now we get the pop-up and you can see it says continue to con is all fap and then we can just say select your account once you've signed in enter your password and you'll see my details and then console log to the screen okay so that's basically the first part of our google sign-in okay now we need to authenticate this with a back-end server in this case our node application okay so there's next step of guidance here so what we need to do here um is basically we need to receive a token from google okay once you've signed in and then we need to send this to our backend server on node.js okay so in order to do that let's just um we're going to need to just add a bit a few more pieces of middleware here if you come back to our server.js file under this middleware section i'm just going to say app.use and here we're going to use express dot json like so and this will allow us to send jason back to our back end from our front end okay yeah it'll enable our backhand to pass any kind of json data we're also going to be using cookie parser okay app.use and here we just say cookie parser so and then also let's just create a public folder actually at the moment we'll leave it at that for now and basically the cookie passer that's just going to enable us to set cookies in the browser front end which we're going to be using to store our kind of user access token for the session okay so and when the user navigates around our application uh it will use cookies to determine if the user's been authenticated and whether they can access certain routes in this case the protected rat or the dashboard route of our application okay so now if we come back to our login.ejs file um first we want to do here is let's just copy this section here okay so we're going to save our id token equals google user dot get off response dot id token okay so in our ejs route and basically just going to clear we don't need all this stuff in the sign anymore because now we're just going to be dealing with tokens okay so we get the um google user's id token so now for example if we console.log that id token come here now if i refresh you can see now we get this kind of json web token sent to us okay and this is we're going to be sending to our to our back end so once we have that um let's next go into let's open up the guidance again uh next we're going to do as i said we need to send it to our back end so i'm just going to use the example i've used here they're using this kind of old school way of xml http request that's how i do in this video as opposed to using the fetch api so once we're in here uh if we go to login on sign in so we have our id token next we're going to do is just say so we set a new uh xml http request object and then we're going to say post and then we're going to post this to a forward slash login route okay and we'll create this right on our server in a second and i'm just going to change this to json for now okay because we're going to send this in json format um and then what we want to do is when we unload function we'll need that for now and i just want to send and here we're going to say jason dot string of fire and we're going to say we're going to send a json or a javascript object back i'm going to say token and this is going to be the id token okay so we're doing here we're basically sending this id token which we receive from google we're sending it in this kind of uh json object you can see you have to string a file send it to a back-end server you can't uh you can't send kind of javascript objects over a server you have to stringify them and then we're sending this to our login route on our server okay so let's create this route on our server.js file um so if we come here i'm just going to say under our gets login route i'm going to say app.post here forward slash login request response and then i'm going to say in here let token equal request dot body dot token like so okay and then if we console.log the token we should now get this logged in our app uh terminal okay so if i refresh okay we get our token oh why is that not logged let's see hmm i think i need to save this login rounds well actually let's try again we should be getting that sent to our back end now you can see yet we get our no we get our tokens into our back end okay so the next thing we want to do with this token um so if we go back to our google guidance okay now we need to verify the integrity of this id token okay so you can see here basically you know this is anyone could just kind of get these token details and kind of you know the hack i could for example tamp with it on the front end to you know make it look like it's you just logging in but so in order to verify that google provides us with um a kind of library to do this but in order to verify the integrity so it says here we need to check that the ide token is properly signed by google so we have to use google's public keys uh to verify the token signature um and these keys are regularly rotated by google so for example this uh key you're seeing now will go out of date soon because the uh the keys will be rotated and it will no longer work okay um and we also need to check like the value um of the aud and the id token is equal to our apps client id i'll show you this in a second the value of iss and the id token is equal to the equal to this here google accounts.google.com and also the expiry after the id tokens are passed these tokens which google provide us with uh they all have an expiry time as well um okay so in order to do that we just need to install this uh library here you can see i've set it to node.js here so i'm just gonna install this google all flybury okay and this is the recommended way to do it with google we'll install that now npm install google all fibry double hyphen save so that's installed and then now we need to bring this into our app okay so i'm just going to say um yeah we'll just copy this so we'll say const authclick2 bring that in and then we'll just say bring that in as well let's type server.js come to the top i'll paste that there i'll just put google off here okay and then so that's basically now i just i want to add my client id as well on a variable so let's just do that now i'll just say um const client id and i'm just going to get my client id again and we'll paste that in here like so and i'm just saying const client equals new off to a client and i'm just passing in my client id in there like so okay so back to the google guidance and then what we need to do on our back end is we're going to use this asynchronous javascript function here to verify um our token our tokens uh proper you know it's not being tampered with we have this access with that google library we have access to this verify id token function okay so let's just take this now i'm just going to say um a concs ticket let's just copy all that all in actually go back to our login route yeah so here what we're doing i know something just copied sorry guys let's copy that top part okay so yeah we're doing this asynchronous function here and then within this function we're creating a ticket and we're basically it's basically asynchronous and we're using this client which we just created and this has a verifier id token method and here we're basically passing in our token which we sent from the front end here and then the audience um this is basically just to specify which app we're we're authenticating with okay so that's why we're passing the client id of the app we created on google just get rid of all those comments and then so what we can do here is we can we get the payload okay which shows all the kind of user details and if you was um we're not going to do it in this video but if you was kind of using this with a database in your application uh you would use this kind of uh sub key from the payload okay to to register your user within your own application but we're not as i said we're not going to be using that in this uh in this tutorial so if i just console.log the payload it gets returned from this function okay now if i just do uh npm run dev again if we go back to our app it's a login route refresh okay what's going wrong there console.log okay try that again okay now you can see what we're doing with our token we're using this verified token and that gives us this payload and here you can see we get the following fields in the payload okay as you can see my name there you have my picture my details uh the kind of this is when the uh token was uh when it started and this is the expiry time here and yeah so as referring back to this google um documentation again uh so it says here you also like to verify the token the aud must be equal to one of your app's client id so the aud key so if you search here aud you can see that is my client app um client id sorry uh check the value of iss is equal to accountsgoogle.com so that's what that basically this verified token token's doing so um where's iss accounts.google.com so that's what basically this token will be doing as well okay so and then it would be using the google public keys just to authenticate it so now once that's done the next thing i want to do here is uh we want to send this token back to our uh client okay in in a cookie just so uh we can basically establish the session okay for the user so they can then go and visit uh the kind of they can use the application as a logged in user so what i'm going to do here is i'm just going to come under this dot verify method i'm going to say then okay and then in here we'll do a kind of callback function for now and then i'm just going to say um res dot cookie and we're going to create a new cookie called session token okay and then we're just going to pass set that token which we passed back here this token once that's been verified by google we will then pass it back to the user to use in the uh in the browser okay we'll set the token yeah cookie in the browser with this token okay and then what we want to do as well after that is just say res dot send success and this will tell our app to re um to be redirected to the uh the profile dashboard route okay uh so that's basically it for our login route uh post route okay um under here i just want to just create a couple more routes for our dashboard and our protected route okay so let's just um do that now so come under here i've just done an app.get to our forward slash profile route um we're going to be creating this check authenticated piece of middleware in a second but we'll take that out for now um and here i'm just going to say let user equals actually let's just take that out for now sorry guys i'll leave it in i'll just um just come under and just do the rest of the rats okay so app.get forward slash protected wrap and then and yeah i'll say revise that send this route is protected okay actually now let's just um let's res dot render the uh protected ejs file okay so actually let me just show you what this has done okay so once we've um authenticated let me just uh sign out here okay and then i'll sign out my google account okay so i'm going to sign in again okay so now once we've um signed in you'll see now if we go to our application okay and then if we click on cookies you'll see in here we had this session token cookie okay so this is what we passed back you can see here we have our google token okay so that's what we've done there and now what we're going to be doing with every subsequent request we're going to be obviously accessing this cookie to ensure that the user is logged in to the google account okay so i also just want to create a logout right as well so if you come back to our server i'm going to just come under here and we're going to say app.get forward slash logout and what this logout does basically is it just clears that cookie okay so we remove that cookie from the session and then we just redirect back to the login route okay that's what's that's that's what that's doing um and then so what i want to do in here if you come back to our login.ejs um and within here basically i want to say once we've um sent our token back to the server um basically when we get the response back from the server with our token so that'll be this unload function here i'm just going to come in here and we're going to say just delete that which we can get in there for now and then i'm just going to say um if we're going to say xhr dot response text if that equals success okay then i'm going to say um well first i want to do is actually sign out okay because i don't want to remain signed in on the front end i just want to use our actual google token to do the authentication okay so we're just signing out the actual front-end client not our server and then we're going to say location dot assign and we then just want to redirect to our profile okay so what this is our response text is success because you'll see in our server once we've um kind of authenticated we're setting a session cookie and then we're sending this success in the response text okay in our res.send so now if we refresh here you'll see we get redirected to the profile route okay um so we need to just uh get this profile sorted out now so when we go to app.get forward slash profile um right let's create this piece of middleware okay because we want to be able to access who the actual user is so let me go back to our server.js and here we are going to i'm just going to copy this over just to save time okay i'm going to create just like an authenticated function check authenticate function so what this does this we've created a function here called check authenticated okay so this is a piece of middleware text and request response in next and what we're doing is we're going to as you know up here we stated that we're going to be using this cookie parser so what this cookie passer does is it allows us to uh look at the cookies that come with the request so in this case we'll be able to say let token equals request.cookies and we'll have access to that session token which we um which we created up here okay session token cookie so we'll be able to access that on every subsequent request once it's set in the browser okay and then underneath this i've just created a user object which is empty for now and then we're going to be using the same verify function each time okay so we're going to create this ticket using this verify function again we're passing this token which is then which we take from the cookie up here and then we just pass in our app's client id and then here what we can do now is from the payload we're just getting the um access to the user's name email and picture okay so payload.picture payload.email paradigm and we're storing that in our user object that's what we're doing here so user.name equals the payload.name that's how we're doing it so we're storing these three variables in our user object here and then we're verifying our token just to ensure you know this is um verified by google and the user is actually who they say they are and then once that's verified we're saying the request.user equals that user object okay otherwise and then once that's if it is we'll say next otherwise if there was an error in the authentication process we're just going to say res.redirect to the login right okay because obviously um the authentication wasn't didn't work the password could have been wrong or there was some sort of error with google it didn't lack the request okay so that's what we're doing there um so once that's done now we just need to add this kind of check authenticated middleware to our rats okay so i'm just going to come to our profile uh our profile route and we can just add that check authenticated function middleware before this callback here the request and response callback and that's what we're doing here okay so we've got let user equals the request.user and that's what this was here request.user okay so that's what we passed back with the middleware and then what we're doing is we're then rendering our profile ejs file and then we're passing back that user object to render the details okay so if you come to our profile now our profile.ejs so it shouldn't be profile it should be dashboard sorry guys let's make that dashboard as well just so it's not so confusing okay and then if we go back to our dashboard here let's get a template up and running and then in here we don't really want a lot of the information i just want to say for example um i've just got a sign out here uh sign out a tag which um it points to the logout route which remember we created here which will basically just clear the cookie and redirect to the login page and then also have a higher and we can access with ejs if we do this less than sign percentage and equals we can access the user.name okay in this and that that will render the user.name remember we're passing the user object um in our dashboard we're passing this user.object here so that we'll be able to access the user's dot name and then i'm also in our dashboard rendering an image with the user.picture okay so now if we log in let's just go back to our login route if you log in sign in oh i need to change my um sorry guys i just need to change the login route for ejs that should be dashboard as well here okay let's try again sign in and you can see now um we get my name rendered it takes that from google and we also get my google avatar rendered there as well and then if we log out sign out you can see we get redirected back to our um our login screen and then if i try to access that dashboard now you'll see um as we're not authenticated um what this piece of middleware does it just redirects us back to login okay so in this check authenticated method you can see this is what's happening here as obviously we couldn't um verify any kind of token we just get redirected back to the login screen i'll also just uh let's just create some just to show you this so we'll say protected route and then if i come back to our server.js and then i'll just um create a wrap let's put it oh we got that already if i just type in check authenticated in here as well save that and then if we go to our protected right here and you see as we're not logged in we get redirected to login if i sign in okay you can see we've doubled that to the dashboard and now i should be able to access that protected route and we can access the protected right now you'll see we have our session token in here if i go back and then if we click on sign out you'll see you'll see we no longer have the uh the session token as it was cleared okay guys so that was kind of basic that's how you kind of implement this google sign-in with a node.js server so just to recap when we uh log in through this login page uh google will send us the id token and then we'll basically send this token back to our back end okay so we're saying here we're sending that token to our back end to this login route here as a post request and then once we've logged in just sitting back to log in we're taking a token here with our request.body.token and then we're using this verify id token method which comes with this uh google or fibry and this takes the token and just verifies its integrity okay and then once it's verified integrity that you know it looks at the signature looks at the details it will create the payload with the user's details such as their name their email their picture and once that's been verified we can just send then set the user object and then then we what we do is once every once i've been verified what we do is then we establish the session token uh in a cookie so we say res.cookie session token that sets the session token uh cookie in our client and then we send a success which then redirects the client to the dashboard page okay so that's that's basically um yeah google wolf how you implement it in your nodejs application um it's quite it can be quite confusing this stuff so if i've not explained it properly just uh don't hesitate to you know ask me any questions you have in the comments or just send me a message and i'll try my best to answer but yeah i hope this uh helps you guys and uh um obviously in a real app you kind of want to get this communicating with a database and you know add your users that you know specific to your application needs but this is just how as i say to implement it uh as basically as possible in in an ojs application but yeah thanks for watching guys and i'll see you next video cheers

Channel: Conor Bailey

Views: 23,934

Rating: 4.9085712 out of 5

Keywords:

Id: Y2ec4KQ7mP8

Length: 41min 56sec (2516 seconds)

Published: Tue Nov 10 2020