Next JS Authentication - Sign In With Google (NextAuth.js)

hey what's up guys clint here and in this video i'm going to show you how you can incorporate google authentication inside of your next js application and this is made possible by a really cool tool called next auth and this is provided for us by our friends over at vercell so what that next auth is is just serverless authentication means we don't have to use a database or any back-end of any kind next auth takes care of all of that so if you're interested in incorporating a google authentication inside of your nexjs application then follow along i think you're going to like this video so first thing i want you to do is go over to next auth.js.org and what i have here on the left is just a blank next.js application that i went ahead and created and i've already started my development server so if you just create a next app next dash app this is what you should see as well so the first step what we need to do is actually install the next auth package here so i'm going to go ahead and stop my server here okay so once you stop your server what we're going to do is install the package and that's going to be yarn i'm using yarn if you're using npm that's fine too i'm going to say yarn add next oh yarn add next dash auth just like that if you're using npm it's just going to be npm install next dash auth so once that is installed our first step is to actually create the the route inside of our pages directory so go ahead and open up your pages folder on the left and then we're going to go inside of our api folder as well and uh don't worry about the hello or js or anything like that i'm not deleting any of the starting files i'm just going to we're just going to roll with it okay so inside of this api folder um i want you to sorry inside of the api folder what we need to do is create another folder called auth just like that okay now inside this auth folder we're going to create a file and it's going to be called we're going to use the brackets here js and inside of the brackets we're going to use a spread operator so three dots and we're going to say next auth okay just like that very important they copy that down identically so everything is working works properly so inside our next auth what we're going to say here is i'm going to say export default next auth just like that and inside here what we're going to have is a providers this is a provider's array and then we're going to have a google provider just like this here and inside here we're going to have two things we're going to have a client id and a client secret so what we can say is client id just like that and this is going to be process dot env env that will say google underscore client underscore id and then under that we're going to have a client secret and that's going to be process env google underscore client underscore secret okay just like that and at the top here what we want to do is import and from here we're importing um we're going to be importing next auth just like that from next auth and then we import our google provider we go ahead uh sometimes you can auto import that's cool so we need to import the google provider just like that it's going to be from next dash auth fighters slash google go all right that's all we need to do for now now the next step is to actually add in our our secret ids and also some some web tokens here so what i want you to do excuse me is go over to since we're already here at this next auth go ahead and click get started here and if we i'm going to open this up just a bit and uh yes zoom in for you guys now next auth offers so many uh so many providers these are all the providers here that you can seamlessly integrate so as you can see there's quite a few here uh and this one we're gonna be using google so i just want you to click on that google there and inside here i'm going to click on where we're here so this uh console developers we're going to grab our credentials from google so go ahead and open that up i'm just going to bring this down a little bit so inside here um what we're looking at is oauth client ids don't worry about that one in there so it's something i have in there so you will need a google uh account for this it is 100 free though so once you're at this um this url right here you can click on create credentials just like that and then you're going to look for the oauth client id so inside here you're going to select the web applications what we're doing here and what i'm going to say here is i will say google off youtube just like that now for our uri here what we're going to say is http slash local host 3000 now if you push this to production and actually put it out on the web you're going to need to change that local host your your production url and you can just go in and change these at any time really not a big deal but right now since we're in a development environment we're going to say localhost 3000 because that's what our project is running on now for the authorized redirect uri what i want to do is paste that in there at the local host 3000 then we're going to add slash api slash auth slash callback google so go ahead and copy that in there local host 3000 slash api slash auth slash callback google and then we can go ahead and create so make sure it's not https or anything like that has to be http logos 3000 uh while we're in our development environment so now it has just given us our client id and client secret so why don't you do just copy over that client secret now inside of our code here inside our code editor we don't want to put this just inside of our next auth file that would be very bad to have our id and secret we want to keep these hidden from everybody in fact don't try and use mine on the screen after i finish this application i'm going to go ahead and cancel this little this app here so make sure you get your own it's very important and we're going to store these in what's called a dot env file so create a new file here and make sure you got your base so it's click down here we want to put this at the root level we're going to say dot e and v just like that now in here we have uh what's the google google underscore client underscore id just like that then we're also going to have the google underscore client secret just like that okay now we just copied this client id and we're going to paste it in there next we're going to copy the secret here and we're going to paste that in there as well so two more things we want to actually add to our emv file and that's the next auth underscore url and for this we're going to have our just our local host so http colon slash localhost 3000 again this is something that you need to change if you actually push this to production and then we're also going to have what's called a json web token i'm just going to call that jwt underscore secret there now there's a couple different ways we can obtain a string here it needs to be a 32 character string so what we can say in your just in your terminal down here at the bottom what you can say is a open ssl rand dash base 64 and as you can see it generated us this string right here and what you can do is just copy that and put it in there now if that's not working for you sometimes that base64 open ssl command will not work and if that's the case i'm going to put a link to uh this page right here in the description below and what it is is generate secret dot uh versel dot app slash 32 and what it's going to do is just generate a a token for you so either one will work just fine i'll go ahead and paste that in there so we can use that one either one's going to be just fine now um now that we have that we can go ahead and click ok here and we're we're done for now and if when you do push this to production you would just come back here and click on the the application that we created and inside here you can just edit your uris there and you're going to want to edit the home right there as well as the uh the callback and you're just going to change the the localhost 3000. you leave the api off slash callback you leave all that so just change the local host and again just to recap you're going to want to change this inside your nv file as well when you push it to production so uh but that's all we need to do for now so what i want you to do is come back here to dot and v file we're actually done with that so we can close it um and what we need to do is uh my server is not running if your server was running you would need to restart your server otherwise you're going to get an error whenever you're messing with a emv file you have to restart your server so let's just go here localhost 3000 nothing has changed yet but what we need to do the next step is actually use a we're going to add in the um session provider and we don't have to create a context or anything like that next offers all of that underneath the hood which is really really awesome so what we want to do here is i'm going to open up our side menu and i'm going to go ahead and come back over to our next auth here and what we can do is um here i'm gonna pull up something here all we need to do is go into our app.js right there okay and what we need to do in this return here we're going to need to put some quotes around or some parentheses here i'm just going to go ahead and cut that so whenever you're using whenever you're returning just a single component you don't need to surround it in parentheses but since we're going to return multiple components we need to use the use the parentheses there and what we want to say is session provider just like that and we'll paste that inside now we do need to pass something in and that's just going to be a session just like that we're going to pass that in here as well just like that now we need to import the session provider as well so we're just import just like that session provider and that's going to be from the next next auth slash react so now we have everything configured it says we have here no secret so we need to go ahead and add in our secret you guys so let's go over to our next auth file there and then just right underneath this array and by the way you guys this notice this is an array and if you want to add other providers like by the way i have a link up in the corner here if you want to see how you can do github authentication you can actually combine all of these into this file you would just add it right here you'd say you know github or facebook or whatever other provider you're using just add it all in that file but for the sake of this video we're just doing google so right under here what we're going to say i'm going to say secret and then process emv dot jwt underscore secret and where we're getting that you guys is just that is this jwt secret right there so let's go ahead and close that and now we have it in there now i'm just going to restart my server just to be safe here make sure there's no errors everything is looking good so our next step is to actually create a login page so let's go ahead and i'm going to open up my side menu here and inside i'm going to go and close that api folder inside of the pages uh folder here i'm going to create another file i'm just going to call it login.jsx okay so rafc is going to generate our functional component here and um what we can do here uh i'd like to copy something over make it quicker here but what we can do here let's go ahead and import we're going to import the uh use session just like that and we're also going to grab the sign in and also sign out just like that and this is going to be from sorry no equals there from next dash auth slash react okay now on inside of our login component just here at the top we're going to say const and we'll say data session just like that equally there are you session there we go so go ahead and save and let's cruise on over to our login page here and uh there shouldn't be anything there except for the login because we don't have any information in there but um let's go ahead and give ourselves a way to sign in okay so what we want to say here and we're also going to use like probably an if else statement um that way we can check to see if a user signed in or not and we're going to use a client-side rendering and also a server-side rendering to check to see if a user is authenticated or not so really really cool two options that we can use in next ges so one of the major benefits excuse me so what i want to check here is um i'm gonna copy that down i always say if session right if no if session there if that's true then we want to return this else and return that down here so if the session if true is true if we are logged in what we're going to say is welcome and here i'm gonna say session dot user dot email and i'm gonna show you where i get this from you guys so don't worry if that's a little bit confusing to you um you are not else you're gonna say you're not signed in you know what let's just go ahead and wrap this in a uh put that in a p tag so it looks a little bit nicer then we can also have a button in here you're not signed in sign in here and this is how we add a sign in function in next auth authentication so reason to have an on click just right here and all you have to do is just i'm going to pass in an arrow function and we're going to say sign in okay and we imported this at the top if it's not imported it's not going to be working properly so and we're going to surround this with a p tag as well so go ahead and just cut that and i'm going to paste it in there i'm going to say welcome it should pull over our username and then we're also going to have a sign out button as well here and the same goes this we're going to do this the same way an on click event for our button and we're just going to pass in an arrow function that says sign out we're pulling all of this from our next off package that we installed okay so let's go ahead and see what's working here and you know we haven't signed in or anything so it looks like this is working properly so far it says you are not signed in please sign in there and i'm going to go and open our terminal here or sorry our console so i can show you something where i got our user session.email okay so um what we want to say here is let's go ahead and click sign in here okay and you can notice it's actually using our sign in function and directs us to our callback url and what we're going to do is sign in with google so go ahead and click ok hey there it is there it is you guys let's go ahead and click this is what i want to sign in as hey there you go all right so it says welcome plant at coding ecommerce.com and that is my gmail profile now um i'm going to go ahead and console log this console.log our session and inside here you can actually see um where i got our user email and i'm just going to close this down just a bit there now ends here you can see our user this is our session dot user dot email you can also grab dot name or dot image if i change this to name as you see go and zoom in a bit you can see and we now see our name over there instead of the email and also we can pulls in our um our image as well uh let's go ahead and i'll go ahead and pull that in as well so i'm going to use the image component here now i'm not going to use the next next.js image component otherwise we'd have to configure an external route if you are interested in that by the way i have a video i'll put a link to the corner that explains using images the image component in next next.js so what we want to say here is session.user.image and what that's going to do is going to pull in our image over here so there you go i don't have an image on my google account so it just displays the c there you know and if you want we can go and style this and just kind of say border radius say 50 pixels just some inline style here it gives it a nice little circle around so that's looking awesome you guys now let's go ahead and sign out now what if we need to do an um a protected route or restricted route which basically means a user has to be authenticated in order to see that a route because that's the whole reason we use uh authentication right so let's go ahead and create another file and close that down inside of our pages i'm going to create another file and i'm going to call it account doesn't really matter whatever page you want to be protected you can add this in any page and we can do this on the client side or the server side i'm going to show you both both ways here so i'm just going to generate our functional component here and i'm just going to go over to our account page that we have and it should just say account just like that now um what we want to do is actually import our use session here so we're going to import and use session and also let's go let's use import the sign out so we can add that here too and that's going to be from next auth slash react okay and what we can say here again we'll kind of do like the same with our login page here see what we can say here is we'll give a p tag and we'll say you we'll see i'm not going to use that session you are not in just like that okay and i'm going to refresh what we can do here let's go ahead and const data okay i'm equal to you session just like that and what we can say here i'm gonna go ahead and cut that okay and we can actually use a status right well let's try this first we'll say if uh if session to turn and this did we'll say session dot user dot name else you're not signed yet so let's go ahead and uh save that ooh if session two guys are probably roasting me in the comments right now your syntax is wrong all right so as you can see we're at our account uh sign in page and this is just client side rendering here um now if you go to your account page it doesn't really make sense to display a message that says hey you're not signed in uh you shouldn't really be able to see the account page at all so another kind of cool feature we can use we just pass in here in our youth session okay we'll pass in uh required we'll say true okay and what we can say and here if you hover over this our you need to pass in status here if you hover over this you see status offers authenticated uh loading or even not authenticated so what we can do here is we'll say if uh if status this is just another way to do things you guys equal to authenticated okay if status equal to authenticated then we're going to display this else we're going to display that so let's go over to our our account page here account and there if we use the status authenticated true we're going to go ahead and redirect us to a to the sign in page automatically without without um showing that we're not signed in so really really cool way to do things there with the required true now say we want to do some um server-side um get the server-side props and we'll do the server-side rendering so this is an option what we can do as well and i'm just going to go ahead and get rid of that um we're going to go ahead and get rid of that right there and this is just like i said another way to do things here so let's go to our account page now this should not redirect us whenever we use the the required true it's going to redirect us but um since we're not using that okay what i want to do here is go down to the uh to the bottom here and what we can say don't matter here what we can say here is when i say export const i'm going to say get server side props just like that okay now in here what we're going to say and this is actually going to be an asynchronous asynchronous function here so we're going to say async here and we need to pass in uh context here okay so pass in that context now in here what we want to say is a const session okay and that's going to be equal to a weight and we're going to use the get session so it's giving me an option to go ahead and auto import it so if you don't auto import it make sure you import it at the top then in here is we're going to take in the context okay and that's all we need to do there we now we just need to return our server side props so what we can say here is just return and then we'll save props um and that's just going to be the session so what we can do here is um what we can do there is go ahead and uh go ahead and save that and that should be all we need to be all we need to do there so um everything's looking good contact there we go so um what's going on here async text oops i left out you guys roasting me again on my syntax so um excuse me so now you can see um we're gonna be grabbing on the server side and this is another way to um to check to see if a user is signed in or not so we're not signed in let's go ahead and refresh and we're going to go ahead and go to our login page and we can sign in sign with google yes cool now let's go check our account page now we're using server side rendering now another way we can actually reroute the user with uh server side props what we can check to see in here what we can do is say if we're saying if there's no session what we can say is a return and in here we can return a re-direct just like that and be looking for the destination and here we can just add in the uh the the url path of our choosing so in this case i'm going to use the uh slash login okay so uh we're already authenticated right now but let's go ahead and go back to our um running on your account page let's add a little um button here to sign out right now and we'll say unclick one click there oh and we'll just run the site out so go ahead and save that so let's go ahead and sign out and what we want to do here should leave destination let's see there you go freaking syntax here again best destination okay so there we go okay so let's go ahead and refresh and let's check out this account page it should redirect us to our sign in page there you have it you guys let's go ahead and i want to go ahead and go to our local host because it flashed very quickly so make sure you catch that so as we go to account page once i hit enter it's just going to redirect us to the sign in page let's go ahead and enter boom there you go that my friends is how you can incorporate google authentication inside of your next js application i hope you like the videos you guys make sure you like the video and subscribe to the channel if you feel like you got some value out of this thanks for watching i'll see you on the next one

Channel: Code Commerce

Views: 57,086

Keywords: react js, next js, tailwind, javascript, user authentication, next authentication, sign in with google, google authentication, next auth, web development, coding, software developer, learn next js, nextjs tutorial

Id: A5ZN--P9vXM

Length: 24min 51sec (1491 seconds)

Published: Fri Jun 24 2022