Building an authentication app with Nextjs 13 (App Router)

we will be navigating into the app directory now inside of this app directory we need to make a folder called API not aoi API then we want to create another folder called off now make sure that this folder structure is exactly this way if not you will get an error now we need to create another folder and we want to name the folder next Earth do but not just next o doj now it starts with a square bracket and three dots and then we say next off close with angular bracket and hit enter to create that file now inside of this we want to create a file called route do JS it enter and that creates it for us now this file of folder structure is very very important if you miss this structure you get an error and it wouldn't run as planned now um if you have gone through the next 13 documentation uh where we have the app router you notice that um we now have specific way of naming files that are um going to um expose endpoint and files that are going to expose um pages so for any file that expose Pages it has to be page.js and for any file that will expose endpoints it has to be route. here so please check out the documentation for um rout handlers so that you see the directive over there now we want to import a few things for um us to use here everything we are going to be doing here is basically what we've done here but you should notice the difference the difference now is the file structure or the fold up structure yeah we we have um the app directory housing the API the Earth but notice that we do not have a next.js file here we instead we have a next o um folder which has this the route. JS file however when we come to the page router we have the Earth directory housing the next JS file all right now what what we are going to be doing in this app um router is going to be much the same um with what we've done here so let's open this by the side and um we'll just show you everything side by side you notice the difference as we build um as we continue building um let me get rid of this okay so like I told you everything is almost the same um just copy from here down here this is completely the same so you paste it in here scroll up a bit so scroll up now copy all of this paste it in here then I'll show you the difference so when you paste it now we are not exporting the next o here so so we'll convert this into a regular function so con Handler equal to this so everything Still Remains the Same however down here we export the Handler but you will notice that we are not exporting just the Handler we export this Handler as one get and we export the Handler as post these are the basic differences the thing is in next 13 we no longer um we no longer uh call regular functions in the routes we either call them get post or whatever the verb is supposed to be so a few things have changed so what's going on here is we are exporting these configurations and we are giving nextjs access to all the configurations we have here and telling next next Earth to use those configurations and create authentication for us and that is it that is all you need to do to set up your configurations and set up [Music] authentication okay let's test out um what we've done um we'll Begin by running the local server we're supposed to run that npm run Dev so we put this in the time sorry in a browser all right so Local Host 3,000 now that's working so we we also need to um make sure we have access to uh what's the name we want to make sure we have access to the database so npx Prisma studio so hit enter yeah so I guess we shouldn't have anything inside here okay let's miss that all right now let's go back and try to access the signin page then uh sorry I need to be connected to my WiFi so let's give me a moment that should be coming up in a bit so that's cool so we restart this good so everything is showing up now the first thing we want to do is to try um this one so um this is the email one hit send and let's let's get the email open so Gmail and let's see the that work so let's let's resend seems I'm having po reception here okay send grid okay awesome it's been sent so that's why we're checking out the email is opening up gradually all right once um we complete this login we should um we should have a user here so it's loading up all right so there's a new message that just came in um so we hit it and hit on the sign in so we can close off this one it's now rerouting us back to the homepage so which means it's successful um if we refresh here we should have one user so let's wait a bit um beautiful so we have one user to send grid and it has one session beautiful all right okay so let's sign him out or whoever that is my test bot sign that out and we not test for Google and for um GitHub so let's move to navigate to API or signing and want to test out this that is for Google we can use um yes can use this and once it routes us back to that um homepage that means it's successful but we got to confirm that by refreshing our database here to see um how many users we have and if they have a session so you notice that we now have two users and this second one we just logged in has a session which this other person doesn't have now we want to test GitHub for the last test um so we sign out first so that we are sure that this one is out of the way and then try to sign in again and sign in this time around and once a person is logged in already is going to probably automatically log the person in or if it's the first time it could ask for authorization so like this person has been logged before and so there's no point it just lcks the person in but to confirm we can refresh this and we should have three so beautiful have three and we have just one session the other one's 0 session which shows that everything worked well and that is beautiful

Channel: Njoku Samson Ebere

Views: 53

Keywords: next, nextauth, auth, authentication, email, demo, tutorial, tutorials, javascript, nextjs

Id: Sn5HOHn4Aa4

Length: 8min 52sec (532 seconds)

Published: Fri Dec 29 2023