Full Stack Authentication (MERN) Login Registration (Backend) API & Model

foreign [Music] hello so today welcome back about authentication tutorial uh not tutorial location project so today we will build our back-end system at this login page is to certain background page so uh I don't want to talk about because we already designed this phone on a front end if not complete my phone in design uh you can check my playlist or video and then please go to the video and at first see the font in design then come to the back foreign video okay so I initialized my AP project okay our client side was complete and I just um and install some uh um and instead some dependencies okay yeah so in this project we will use express Mongoose and normal uh initially we need only these three okay and I just um make this in index.js file okay you can also make it uh yes so I just make it indef.js and I change this script to start by using notebook okay so when we'll uh click on I'm going to press on Ctrl S I will save uh there was our server or backend server will be automatically registered by using one okay so um I think our initial talk is finished so at first I import our Express okay so const um experience Express is equal to where it is required our Express ex queries okay Express and we will make our app by using X Plus function so Express so our Express function is in our app so at first we will start our server so Str distract is here over here okay for this we will uh use our app Dot listen function okay so here is um to uh here is uh I need at first port number and then a call by function okay so we use for our backend server um 5000 portal I mean I want to run this back in server in 5000 port and I almost want to print this message if the port is running perfectly okay so CLG im2 5000. okay so if it's work perfectly uh it will print this text in our console okay so our server is if somebody is properly running okay so let's see uh my backend server is already running um [Music] control C okay so we just go to our APA folder and then we will type npm start okay because in our package.json we use start script okay and now in next structures so server is running uh 5000 Okay so um so it's uh now is perfect and I also um I also create our database in mongodb and I will use I will connect now this database my database name is r01 Nissan key connect DB DB name is YouTube okay so I want to use this database okay in our in my mongodbus so I'm not using a mongodb atlas iOS I'm going to be Compass so um if you don't know how you can uh create a database you just search on YouTube and you can see this how you can create a database in Mongolian okay it's very simple that's why I do not want to show this and I don't want to okay so I just escaped this it's very simple just go to YouTube and search how to connect our database I mean how to make a database in Mongolia Compass okay it's very simple so for connect database I have to import our mongodb so const Min so I will use for connects database with mongodb Mongoose okay see foreign perfectly so we will Connect using mongers so amongos dot comment um connect okay so in here I have to write um our mongodb so let me open our mongodbers yeah this one this URL I need and connect then you can see here is our YouTube uh YouTube database okay so I'm going to my I'm going to make the code editor uh then I type this one and y o m t u v and just slash and then YouTube okay dot and then if it if it connects perfectly it will show this message uh DB w means connected yes okay it will print this message in our console if not we will handle this error message okay and we will sorry we will just print our gear okay so let's see what's happened in our console if this all is perfect it will print a message in our uh in our console okay so I think database can accessible you can see this and we need to through the quad string okay okay quite a strict mode we have to true okay so if you just copy this and paste it here okay and just save then you can see we will uh the team of this yeah this is remove this message so perfectly our database connection also connect okay so now we will make a folder for our routes I mean all routes on login business so r o u d s routes okay and we will make a new file for our aut dot Js okay and for save our information in our database we need to create a model okay so we have to make a new folder m o d e l s models and we will make a new file name user.js so perfect okay so in what model for registration for so we will make a route for our registration okay so at first we have to import your NSD Constitution is equal to req require EX press dot router we have to we have to add this okay router function so uh router is uh successfully and in this variable okay so for registered we will use post method because user post their information in our that resistible and uh and our endpoint will be r e g i s t e r okay registered now it's a callback this call where it takes here request or EQ and response okay and it will obviously it's a icing function so CLG we just want to print our register uh printing console or instead of working or not RDG is TTR register route is so for this we have to export our route so module.exports is equal to rou okay so route so uh in all throughout I think okay now we have to access this all throughout in here so uh Audi ta route so we will use app.use and then our URL and then auth or okay and then a u t h r o u t what's up perfect so we have to import our throughout const const Au watch route is equal to radical where you required dot slash oh sorry at all slash routes less auth so I think our also out will be working perfectly let's see what's the problem um module and uh m.use auth or.js the unexpected token that's the problem how it is working uh what's the problem so the local route is oh oh sorry sorry sorry why it's thought bracket details I press save but it's not again so yeah it's perfect maybe connection successfully server running okay and now you will try our route to work or not by using Postman Okay so this is already started out okay uh five thousand also registered okay and click on this oh sorry where I don't need our response I think you can see registered out is working so we have to end this sorry response dot in function and then it will otherwise it will hang okay now if we uh check yeah our uh um Postman is in and Status 200 I mean it's work perfectly and then you can see register what is working so our register what gives what is working now now we will use our condition and function Center here okay for registered uh data to your database okay so before this we have to make our models so for this we will create our model user model okay so we need mongoose Bongos is equal to require require moves okay so const user is c h e m a user schema is equal to new Mongoose dot schema okay and if we need our for registration we need our schema is uh username let's see username phone number I mean email it's not username it's email so we will change the label name later so email phone number and password okay so at first we need email uh okay type will be up yes string s p r i n g string and I already required true and it's um I you need to because our emails need to show me and must be uh you have to fill up this field I mean user must have to fill up this field okay and the similar goes for phone number and password okay password so uh we can phone number need an email and password both are required okay those all are required so I think our schemas already so we have to export this schema so a module module dot ex export ha sorry is equal to ah M O M Mongoose Dot a model okay and our model name is user uh our schema is user schema so you just schema perfect okay perfect so now we have to import our user schema so I name it user or if you require model slash field perfect now we will check at first uh at first we use try catch block okay and now we will check already this user is registered in our system you know system this user already registered or not so we will find out this by using user email address okay so I can name it const easy user is equal to user Dot find one okay we will find by email so email request dot or D dot e m a i l perfect okay so if this email already registered or if user email orderly registered it's find out this from our database is automatically required by using this code okay and if it gets any email address of via from our client email it will search from our client email to our database all email address okay so if it's matched to my requested email with our database and email it's save this user in this constant okay I mean in this value so we can use this condition if not user we will add this user but if already user we will send response dot status so 409 because it's mean it's user already exist so Json we will send a message use the reality is already registered d r e d t e user already registered what if no user will add this user on our database okay so for this we will use save user just add a variable in our users so Neo user and it will save email to request dot body Dot e-mail and RPA into a new phone request dot P or divide body Dot com and then p a double s password dot PA password okay so okay and now we will save this user so it will await have it save user Dot SLV save function okay now our user is same in our database so we will send the response so response Dot status 200 sorry 2000 200 Json so we'll send it Json message uh user idgisk yes okay so user is just successful if server side and erode we will just send it the hero response Dot status 5000. and just we will send this zero perfect so in this uh authentication you don't use Json web token or Big Clip or any other extra library for more secure because it's a primary project and it's a very beginner friendly project so I do not want to use more complexly um complexity um framework more complexity library or any other things okay we will use this all of this in next our budgets so let's check our our registration path working or not so here is our email phone number and Gmail so three three okay so your phone number and suggestion because it's not what because our Json need to enable so app dot use exp Express dot Json now it's important because otherwise it's not sent Jason message sorry so exposed and routed path is perfect or our data is perfect okay okay let's check I send it yeah now you can see user is studied successfully so let's check our database in YouTube and users and you can see our three yeah these three these three this let's drop this okay okay so now our database is blank so let's send it again usually instead successfully okay let's find you can see now this email phone number and password and this email phone number and password is same so our data is perfectly same on our database okay and again if I try to save this data again you can see user already registered because this email password and everything uh so let's just try this email is similar before one but our phone number and password is new okay so let's check yeah user already registered so our email failed is perfectly working okay and if server side I need Europe it's also a message so here is conflict for doing so our registration route is perfectly working now we will move to our login part okay so um code editor Earth and then and then I will make another route for my login so it's a very simple so I just copy first ah because it is similar I just change the import log IM login so login if there is uh user so it's uh find a user okay in the email if it's get the email it will check again okay because uh because our email is okay in here so if there is user we will again check again if uh user Dot password is equal to is equal to sorry is equal to is equal to Rico is dot body dot p a double s password then we'll send user to information that every authentication login email and password is correct okay so response dot status we just make it very simple 2000 and GSM hello okay login successfully but if not elsin if not we can send this status wrong password or wrong credentials okay wrong p a w o r d but I recommend it in this section you don't use any password or email what is incorrect okay just authentication you will send it Authentication number testing purpose I use the password is wrong okay and if not give me email we will send it send a message to user uh user is user user not registered okay not registered using not registered okay so I think I understand everything is perfect uh we will again search our user by using user email okay and let's search if the email is matched from our database any email it will install this user to this variable I mean constant and then if it's correct I mean if any user then it will go to the next condition if user password and request that quality that password both are same then it will send message login successful otherwise wrong sales for you okay 404 and user not registered for td4 so I think it's our login part is ready and this is also post method okay so let's check uh this username this email and uh password lists we will try so uh I think we can remove this one are required okay because just we we used in this section in this authentication email and password okay so this to all need to record okay so now check let's add uh at the rate gmal gmail.com okay so Bangladesh and Bangladesh one two three okay Bangladeshi phone number Bangladeshi and Bangladesh so let's register let's at first we registered this in email and password then we will try to login okay so user registered successfully let's check yeah this data disabled database now we will change our route to login okay and we not need to phone number for log in our system so our email and password is same this ID so let's check login successful okay so perfectly we login if I change anything like this one uh if uh because Bangladeshi has no uh email address in here so if I exchange it these are not registered and our email is perfect but our password is in guided so what's the wrong password okay so our routes in each perfectly working uh now we will connect to our backend okay now we will connect this to our backend so let's go to the backend I think I have another tutorial for our so Source pages okay so we have this three level so these three inputs so we will use default State management system and react user State and in our next any other project we will use our redacts for this many many for many other state okay for email you will use const uh and and set email okay by default its value equals this date debt by default blank change it we enjoy any form set phone password okay perfect now for username okay email so in set email we will store our data so we can use this function one change Okay so you saved email dot here really and same thing for form and password so it will set password is perfect now we will check everything is working or not okay so see energy console.log let's see let's check our console because see our email field is perfectly working if I type anything form it's also working and if I type password is working so perfect okay our button need to stop me okay so this is the form so we will use on submit okay handle a h handle submit in this function we will manage this song we will make Arrow function and we will receive a event and we will later live individual dfl ultimate okay so [Music] previously const ant try and get to use CLG we don't know what okay you know we use dry cat because in here we uh request or Network some let's check our easiest install or not so let's install adus so nvmi axios I mostly use exists for calling uh it's a perfect it's just yeah so this is it's a icing function so a-s-y async Okay so const response is equal to x 0 x i a w a i k l it is used Dot so let's import first a x i o s I guess important so X use Dot post method okay okay so post HTTP if it's not working then we will use course in our backend okay so HTTP colon dowels host our mode is 5000 then uh auth route then r e g i s t okay let's check the URL is perfect or not is to debut localhost 5000 watt login and another interesting perfect in here we pass our all data so it will email to email email uh phone will create your form and Pa table is password will be Pa double s now CLG console.log response to data so we will request our Network in this URL then we will send the data on this URL and then we will print our response in our console so let's check so here's email demo email password one two three and sorry phone number on two three four five six seven eight okay and one two three four okay so I click on register don't have so let's check our console what's there oh course zero okay okay so so you have to fix this error by using course Library I think I I already tell about this so c u r s course okay end game of course you just search and there's a course this is the library itself so very much profiler Library you can see then what it's very popular Okay so um for fixing this is we need to go our backend so index.us and I have to uninstall this Library so so sorry sorry CD you need to write CD API and ps12 CRS course okay perfect so const CRS course r e UI required curs codes okay and now CRS first so app Dot use CRS CR this course just copy this perfect and I was found in the URL is a HTTP colon doubles less you know CL hust three thousand is a three thousand and it's this one okay this one perfect course and I also up to it on the proxy URL okay so let's check our registration is work or not I think it will work perfectly because everything is okay so we need blah blah blah and this one okay I'm going to click on register you can see the message I mean the Json response okay that's perfectly registered engine is just successfully and let's open our mongodb because we have to confirm our our registered data it's saved or not in our database okay let's see comment and YouTube index file so you can see gmail.com so perfectly working our registered out so yeah you can see this message we can handle this message or we can so this message using our default state and also we can use any Library like reactors54 for send this notification for handle this notification and click on register if the registered perfectly it will show the success and if not successfully registered it also an error message okay and again we will try if the same email is to register what's the see the message let's check just click on it you can see request fail status 4049 is this keyword and we can see the message by response yeah you can see the data responses updated is equal to user already registered so this also perfectly working so registered it's fine so we can use a reactor C5 for handle this notification for a handle the suggestions we can use a okay so this project we do not we are close to five we will just use the same state for handle this ESO so let's go to the registered here is success okay why do we use it by any four updates if a ALS false okay and console.com so we have to update this console to success message and if error we will make another state called error okay set us okay and we will update this set window s in Black Okay so we will show a message in here okay okay below register this one and uh subscribe see you later you don't need to rest sorry response and here Dot dot responsibility now here and here so uh audh all that gmail.com so I click on register yeah it's perfect what user registered successful I think you can see this message if I again registered it will see user already registered okay so perfectly it's handled so let's go to the login page this is the login page let's walk on login page so login only we need email and password okay so in login page and place that way I just copy everything from register to login so you can and for password this one login page password perfect and I also copied all of this perfect and copy this state these two here perfect so you Stitch we have to state submits form we have to do one submit submit and then submit perfect and we have to import eggs use it's perfect so maybe everything is okay not my phone number because it's a register so responses access and invert will be here perfect so let's check login text has been drawn password user not registered okay so let's check in login page login so this is your email password please download it logging successful because our email username and password is correct that's right it's this message okay and if I use anything like this it's not our user so user not registered okay because this user is not registered to our database perfectly it's also worked so after login we want to redirect our user login to my account page so for this we can do this like after one second and after it's only success so we can redirect our user another feature I mean my account page so for this we have to use uh his Navigator okay so now we your name navigate okay use net okay and in here if you get dirt I want to redirect user after one second so I'll use set timeout saved timer function okay because I want to redirect user after two seconds so 200 navigate dot apply three plus all right use Navigator glass it's less Okay so into dot location password no I think it's not working less perfect so I think it will work because we use or yeah we use pure JavaScript for redirect at work then we will try again and use Navigator yeah this work this is working perfectly okay uh it's not uh showing my account page because um in app.jsx user is false so now here you if I make it true you can see my other page so login registration part is okay okay and next tutorial uh like our update profile okay thank you now bye

Channel: Learn With Salem

Views: 2,659

Keywords: full stack project, mern stack project, react profile page, react auth, mern stack authentication, react functional state, react js project, react js auth project, mern stack, complete mern stack application, login system with mern, login application with mern stack, mern application, mern stack app, mern tutorial, complete react application, react application with mern stack, mern, express auth, mongo db, mongoose model, mogoose db, express route, node js auth, node js

Id: ZYGodWMfbeU

Length: 62min 54sec (3774 seconds)

Published: Wed Mar 01 2023