Login and Signup form tutorial in Next.js | Nodes js, express and MongoDB | Next.js 13 tutorial 2023

so hey everyone welcome back to another video so in this video we will see how to you can make a login sign up form in next JS so if you don't know what nextges is it is a very popular framework of the ACT which itself of framework of JavaScript and a lot of people are using it so it is very popular right now and you should also use it because it just make react very easy and it has also some extra features uh more than react so let's see how you can make a login sign up form in next.js and you will see how easy it is so first of all you have to install nexgs just like react you have to write npx create but you have to write npx create next step and then add that latest and a DOT so that it installs in the same folder so let's wait till it installs and before that you can see it is asking some questions so here yes right Y and then it is asking if you want typescript so for now we will say no we want only JavaScript and eslint you can write yes Tailwind we will write no uh SRC directory we will write no app router yes and then import LS no so let's see all that so as you can see the installation is completed and let's take a look at packers.json so we have some files over here and the dependencies you can see there are three things but now we have to install some more so write npm I and then write mongodb which is the database then Mongoose which is used to connect to mongodb and node.js and then react icons which is you we will use for some logos or icons and lastly we will write next PATH and this is the most important one which is used to add Google login in your app so hit enter and it will install all four of these so let's wait so as you can see all the dependencies are now there and now let's take a look in our app folder inside which the main page.js so if you remember in react the main the main file is app.js but it but in next yes it is ph.js so to learn to start the server you have to write npm run Dev so let's hit enter all right so as you can see the app is ready and it is running on localhost 3000 so let's open a browser ROM and go to localhost 3000 let's see what is there yep as you can see there is our app and we have to first remove all of this okay but for now we will just let it there and we will make some backend code first and then we will come to this page.js so don't worry so for that uh for backend app we will make some new folders the first one is utils dot adjust utils and inside this I will make a file database dot JS all right and then one more folder I will make called models and then inside this folder here I will write user dot JS which is a model so let's write some code in our database.js so in this uh in this file we will write the code to connect the database to our app so first of all I will import the Mongoose okay which which I have installed right now so there you go I have imported the Mongoose and then I will make a variable called is connected and I will give it a by default value of false then I will export uh function which is called connect to DB okay this is a function here I will write an async because it is an async function and it is an error function so inside this function I will use some commands of mongoose so Mongoose dot set there they go inside this you have to write strict query just like that and then provide a value of true okay just like that and then after that you have to write an equal statement so if is connected that means if it is true we will just write uh console log is already connected we are doing this just because it will not run in a loop and not connect again and again so just to prevent this we are doing this if else statement otherwise if you do not do it it will just run automatically again and again and make your app slower so after your first statement I will write and try and catch block inside this I will write in await dot Mongoose dot connect so this is the command to connect to the URL I have buy uh for now I will leave it empty and here after that so if it is connected I will just make this variable true okay and then after that I will give it a message called connected foreign B that's it and I have to make the cache block also so just oops all right so our code for database.js is empty the only thing left is to enter this URL to give this URL so for that you have to install a app called mongodb Compass I have already installed it so make sure you have also installed it so as you can see here mongodb Compass open it and it will give you an URL so that you can connect it to it there uh to your app it is a local database so if you want to make a app and to host it you can use mongodu Atlas but for now we are using mongodb Compass so here as you can see whenever you will open this you can get a URL and copy this URL okay just copy this and close the mongodu compass and just paste it over here and after that uh make a slash and then after the slash whatever you will write that will be the name of your database for example I will write here next login to so this will be the name of our database all right so our code for database is done now let's write some code for user.js so this is a model in uh like what schema you want your data to be inserted in the database so I will import few things first one is schema then second one is model and then third one is Models All right so these three things you have to import then I will make up function called user schema it will be a new and then we will use the schema and inside this we will write the schema so the first one will be name so from the user to login we will get the name and an email so the name the type of name oops the type of name will be string and it will or the required will be true that means it cannot be empty all right and we will do the same thing for email so just select email here that's it and after that in the schema you have to export it so that you can use it so I will write export default models so you have to write models not model and then user schema uh just write just write user here and then model and inside this user comma user schema so this if you are wondering what is this user so this is the name of your collection okay so in the database this is the name of your database and in this this is the name of your collection so inside this user all your data will lie okay so after writing code for your user.js we will make some more folders so first of all the another folder so first of all we will make components so components and inside the components I will make auth provider dot Js so here you have to write some code so in this auth provider.js the first thing we will write is use client which allow us to use use State and some other features of react so after that we will write import and then what we will import session provider next auth slash react there you go so after that import I will make the function of I will make the function called auth provider and it will be in another function so and it will also have some arguments all right so it will return it will be the terms of HTML so there we go in the div and you have to write session provider just like that and that's it and inside session provided you will write children and you have to import these children from this argument over here and not only children you have to also get the session just like that and also and here you have to write session is equal to session that's it and all the code for auth provider is also complete so let's move on to make a new folder and which is API and it is inside this app okay so inside this app I will make another folder called API and inside this I will make another folder called auth and there we go auth and in auth I will make another folder now inside alt okay so inside auth I will make another folder called in Brackets dot dot dot next auth so make sure you give it next auth the spelling should be correct and you have to give the three dots as well and it should be in square brackets the square brackets means it is a dynamic root so hit enter and then inside next yes finally we will make a file called root.js so this is root.js will be the back end code in which we will handle the user data the backend user data so we will leave it empty for now we will come to it later for now we will customize the page.js so as you can see over here our website is looking like this so let's add a login form real quick so first of all I will just remove all of this so all of this just like that and then I will add a ghost tag all right and then first of all I will just make a very very simple login form so here login form and then an S2 tag called login with Google because in this video we are seeing how you can use Nexus and you can log in with the help of Google so it will be very easy so after that I will make a button and which says just log so let's see and there we go you can see something like this and the background is black because in you can see in globals.css so so this is the design if I just comment all the global.css you can see now it is normal all right let's take a look at our ph.js so here I will just go to a website called icons react icons and you can see it is a very cool website where you can find all the icons if you are working in react and next yes is the framework of react so you can use it in next.js also I will search here for Google and you can see we have many Google Icons and I will choose this one so you can see copied BS Google and now I'll just import it so what I will write import and then give that name hold on um react icons and then slash BS okay write BS because this this is BS and I will change this button and add the logo so that FC goal and I have also um changed the import and have added FC Google instead of BS so make sure you have also done that and here I will write this so now let's see and you can see there is our Google login button with the icon as well let me just zoom a little bit so you can see clearly all right so this is our very very simple Google login form and now it is time to add the actual login functionalities so how we can do that you have to import some things so first of all I will import so first of all I will import sign in from next auth react and then use session so these two things you have to import and also I have to import um use router from next slash router there you go and inside our home function what I will write here I will make some variables const data okay so const data will be equal to use session video and it will give the it will tell us if the like if the user is logged in or not so we will use it for that and after that I will write an if else statement called if session so if session then what will happen I'll write router all that and similarly uh similarly data and similarly you have to make a variable called router so there you go use router okay and now you can use this router so without a DOT um router Dot replace and it is just used to replace the URL okay so I will write here replace and then home page okay home page that's it now in this button over here I will rewrite some functions I will write on click so on click it will be an error function inside that so I will use this sign in function that's it and inside this I will give it the value of Google so let it know if it is Google or any other app you want to login with all right so I think that's all the code for the page.jx now the only thing left is to use this root.js and write some code over here so comment root.js and here also you have to import some things the first one is next auth from next auth next then you have to import Google provider from next Dot slash providers slash Google okay just like that so after that Google provided import you have to import user okay just like that if you remember this is our user and similarly after user you have to also import the database or not database you have to import connect 2 DB just like that and now we can write the rest of the code so first of all I will write here const and give it a function name called Handler and then I will write over here next auth and inside this it will take some arguments the first one it is it is an object so the first object is providers okay so provide us and it itself is an array so inside this array you can give multiple options but in this video we will only be using Google for that I will write Google provider as you can see it is giving me an suggestion also and it's and this Google provider itself will take two more arguments the first one is as you can see it is recommending me as well the first one is I client ID the second one is client Secret so gift client ID and leave it as it is all right and same thing for client secret okay we haven't written anything over here for that let me just make a new file not inside that um new file called dot EnV and if you don't know what dot Envy is it is to secure all your personal or protected data so here what I will write Google ID and this will be a string so we will get this thing don't worry and then Google um secret okay this will be also a string save it and how you can grab this Google add-in Google secret over here you will use process Dot EnV so process dot EnV Dot Google ID just like that and similarly I will do it over here all right and Secret okay so in this way you have got the Google ID and Google secret and after that this providers it will take one more argument or you can say one more object so that is callbacks okay so this one is an object all right this one contains an object the first thing you have to write over here is a sync session and inside this you have to write session function so it will return something so it will return just session okay just don't worry what is this after that after this session function the main thing comes which is the sign in function so I will write here uh a sync sign in okay so it will take some arguments the first argument is account the second argument is profile the third argument is user and the fourth argument is credentials but we will only use this user so after that is a function and inside this I will write some try and cash blocks so just like that inside this try block but I will write await connect to DB and there you go in this way our database should be connected then what I will do I will write check email it is a variable and it will check if the user is already in the database we will not insert that data again and again so that's exactly what I am doing here so it will find for that email so how we can do that we can write dot find and email will be equal to user dot email just like that and it is giving me could not find user do you mean user okay all right all right after that I will write if check dot email so if it is true if the user exists already exists then you know what uh length dot length because it will return an array so it is 0 that means there is no user move the user does not exist already in the database what I will write I will write user dot insert many and then here I will give it name will be equal to user dot name and then email will be equal to user Dot email just like that and in the other you can just console the error and that's it now I guess our login form is completed let us take a look and you can see we are if the user logged in we are directing them to home page so we have to make a home page also so in the app here I will write home page and then inside this I will make a page dot Js so here I will just write home page okay that's it so one more thing we have to do uh you can remember we have made this auth provider but we have not used it anywhere so we will use it in layout.js so you can imagine this layout.js as a like component which will apply to all the pages so here for example you can add the neighbor which will apply to all the pages so in this what I will write I will write import and then auth auth provider from address components slash auth provider that's it let me just take a look over here so okay all right and all that you have to also export this so export default and then auth provider okay now we can easily import or provided over here and what you have to write over here after this children you have towards the right session so for that you have to import this session also so here I will write import session and that's it then what we will do inside is HTML and inside this body tag let's just write over here I will write auth or auth provider just like that okay and I will give it an arguments called session will be equal to session and we are passing it through here there you go and I will write children inside this auth provider so that's all I guess and also I have made some changes in page.js in the app you can see however I written over here return dot null now also change this router to navigation and also added uses use client on the top so make sure you have done that and now let's take a look you can see there is our login page and let's just open DB Compass over here and let's connect and at the left hand side you can see all the database so let's search for our next login tube so you cannot see right now because we haven't add any data so let's just click on this login and let's see what will happen so okay so we have forgotten the main thing which is to write the Google ID and secret because before that we will add the Google audience secret but before that you have to also add some more things that thing is you have to write next auth slash URL and in this you can give http slash localhost three thousand okay you can give it port number and then similarly next Dot um URL internal okay just like that and also uh next dot Secret okay so in this secret you can write anything so any string you can write all right so now let's get this uh Google ID and Google secret so how you can do that search for Google Cloud console okay and click on the first link over here now go to this console so click on this console I'll just quickly switch to a new account because this account is full all right so after opening my second account you can see some interface like this now click on this project over here and click on new project so you can name it anything all right let's click on Create and you can see the project has been created so it is loading Let it wait so yep as you can see now it is done and open this menu over here and click on more products then API services and then click on this both consent screen so here you have to create some credentials to get the um not this oauth credentials uh click on this credentials over here so here you can see a button to create credentials click on it and click auth client ID all right so now in the application type click web application name let it be that in the URL you have to write localhost that okay but in this authorized redirect you have to write API slash API slash auth slash callback slash Google okay so make sure you have entered exactly that and after that just create just click on this create button and it will create that credential for you and you can see there is our client ID and client secret so click copy on client ID and paste it here and then similarly client C grade and paste it here that's it save the CNB file and now let's take a look at our website let's go to the login page so let's click on this login or that so I have made some changes so in the root JS I have added this line export and you can see Handler as get and Handler as post I forgot to add this line but make sure you have added that because it is very important so let's save our app and let's see if it works or not so I will just click on this login form and let's wait and as you can see and there are options to login with my Google account so let's choose an email ID so let's click on this techie web dev email and there you go you can see uh you will notice that it haven't redirected us to the home page that's because I have commented that line if you notice that I have commented that line to the directors to the home page but we will just uncomment that but before let's check if the data is there in our database so yep as you can see if I reload that you can see there is one data uh name is this and the email is this so now let's check one more time so I will just log in one more time and I will add another email ID so in this case I will add this email ID and uh all right so let's take a look at our database I will just refresh it and yep as you can see there is our data so it is working great and for the redirection I will just uncomment that and you will notice one very uh good thing about it you can see it it will directly take us to the home page and if I just in the new page I will just write localhost 3000 it will not take me to the login page it will directly take me to the home page so I will hit enter and it will load and as you can see it will take me to the home page so that's how you can make a very simple login form in next.js so I hope you enjoyed this video and learn something new and you can also you know also get the name and email ID of the user in this home page and uh not in this this is the login page so yeah this is so you can get the name and email of the user in this home page and display that here okay so this will be also very easy you can just use this session and do that so that's all in this video guys I hope you learn how to make a login sign up form in next.js and uh that's it for this video guys I will see in the next one [Music]

Channel: Techy Web Dev

Views: 6,555

Keywords: next js, next, javascript, react, login, signup, backend, mongo db, google login, 2023

Id: IjIL9-tBOIA

Length: 35min 2sec (2102 seconds)

Published: Thu Sep 28 2023