Build a Fullstack Login & Register Page with MERN (react.js, mongo, express, bcrypt, jwt & more)

hey what's up YouTube my name is Brett Westwood and today we are going to create a fully functional login and register page using the myrn stack so that means we're going to use mongodb for the database we're going to use express react and node.js we are also going to use B so we could hash passwords inside of the database and we're going to use Json web token so we could track the user throughout the website with the cookie we're going to do this using Create context but from react and we're also going to use the package react hot toast which gives us professional looking notifications when there's an error on either the server side or client side so before we get started if you can hit that like button and also subscribe to this channel for more content similar to this and let's get started so right on the screen I do we are going to use the V app so vjs.dev but before we do that we are going to go on my desktop and we're going to create a brand new folder and we are going to call this mirn auth we're just going to press enter we're going to open up our text editor which is vs code and I'm going to drag and drop the folder we just created I'm going to make it full screen so you can see and we have empty folder and we're going to create two main folders inside of this folder first one we are going to have client which is going to be our front end second we are going to have server which is going to be our backend so we're going to go inside of the client side folder first so we're going to open up this terminal by pressing Ctrl back tick we're going to CD into the client go back to beats documentation click get started and we're going to use the node package manager since I'm using npm copy that we're going to paste the command there and we're going to inside the same directory with just a period we're going to answer the questions about the framework we're using react we're using JavaScript and now it's telling us that we have to run npm install then npm run Dev to run the development server so npm install to install all the dependencies that we need for the specific application and then after this we are just going to do npm run Dev this is going to open up on localhost 5173 you can press control and click we could open this up I'm going to zoom back out to 175 percent and as you can see everything looks to be working next thing I'm going to do is I'm going to go inside of the client folder and we are going to organize these folders and make sure everything looks nice and ready to go so when you do have a v app this is the what it's going to look like you're going to have a package Json a config file you're going to have a source file and this is where all your code is going to usually be in so we have a main file which we can keep as is in the app.jsx is the code that creates the UI for this so we're just going to remove all the code and leave the fragment and we can just do an H1 saying hello we could remove the count State and then we can move the logo and use State and we'll keep the app CSS so as you can see it says hello what the index CSS that's already applied to an app CSS okay next thing I want to do is I'm going to create a few folders I'm going to create folders inside the source I'm going to create a components folder and inside the components folder we're going to have a nav bar and I'm going to use the es7 Snippets and I'm just going to press RFC you could get the Snippets in the extensions by pressing es7 I'll expand this out a little bit and it's going to be this one right here so you can download that and you'll be able to easily type in functions whenever you need so we have a functional component right here for navbar and then the next thing we're going to do is we're going to create another directory inside source and we're going to call this Pages we're going to have three pages we're going to have a home Dot jsx RFC a register Dot jsx non-new folder new file and a login.jsx and this will be RFC and then the register RFC okay so the next thing I do want to do is I'm going to install two node package managers so like packages that we need on the front end client so I'm going to open up another terminal here CD into the client and those two packages I want is going to be react router Dom so npm install react router Dom and this just allows us to route to different pages making our application multi-page and we're going to do axios which is a package that allows us to connect the front end to the backend API endpoints so we're just going to press enter make sure you're in the client we could just confirm by going to the package Json we have both dependencies there let me close up a few files here and we are going to go firstly inside the main folder so we need to wrap our whole application with the browser router in this browser router we're going to name it as router I think I spelled it wrong yeah so browser router as router from react router Dom and I spelled from wrong okay so we're gonna wrap the whole app with the router so let's move this here so this allows us now to use routes and Route inside of our application so now we're going to go to the app jsx remove this H1 that we had and we are going to import a few things here so we're going to import routes and route from react router Dom okay so we are going to have all the routes routes inside of the routes and if we want something to be static on a page on like the top of every page like a nav bar we are not going to put the nav bar inside of routes same thing with like a footer you're not going to put the footer inside of routes it's not a route but we do need a parent element so we're going to keep this fragment here and we're going to have a nav bar and inside the snap bar we have to import it so let me make sure it's working so it's not working as import so that's fine sometimes it does that but inside the routes that's where we're going to have each route and it's going to take on two properties a path which the first path we're going to do is just a forward slash which means that it's going to be the home page and then we need an element which is going to be the pages so this page is the home page and it's not Auto importing so I'm actually going to close this up and then reopen it so just give me one sec because it should be Auto importing as I go so I'm just going to close this and I'm going to open them back up and we're going to try it again and it looks like it's not let me just make sure I exported it then it is exported and now we're in the app so if we just got to import these now manually which is fine it's just more work so we got an import nav bar from dot dot slash Source dot slash oh slash components slash navbar okay and now we gotta import home import home from slash slash Pages slash home and then now we're going to copy and paste the route down twice the route down twice and we're going to have a register route and then we're gonna have a login route and then the elements are going to be corresponding with those routes okay so there's the Auto Import I don't know why it just started working but there's the register Auto Imports it and log in Auto Imports so it makes it a lot quicker and easier as you can see but if you can't you're just going to do manually so we're going to make sure everything looks good right now let's just inspect is our development work oh it's not running because I restarted the server so we're going to see dean of the client and then we're going to run npm run dead no okay let me just pull this over here zoom in at 200 if we do go to slash login it should just say login and then the nav bar is static on every page perfect all right now we want to start working with the nav bar and you can remove the react from react we don't need that so for the navbar we're just going to import the link from react router Dom let's remove everything inside the return use HTML syntax of nav and then inside of that we are going to have three links we're going to have two property and this two property is going to be the endpoint that we're going to in the front end so it's going to be home and then we'll copy it down three times we're gonna have register and then log in and then just name these whatever the endpoints are or routes however you want to call it and then as you can see now we could go to each page by using a navigation bar cool next thing I want to do is I want to create the register and login page so register we could start with first we use the div as the parent element we'll have a form inside the form we're going to have three inputs for the register we're going to need their name we want their email we want their password so we're going to have a label this will be name we're going to have an input and it's going to be a self-closing tag the input is going to take two properties for now we're gonna have the type which is text for this one and we're going to have a placeholder which is going to just say enter name dot dot now I'm just going to copy and paste the label and input down twice and then change what I need so this is going to be email this will be password this type is going to be email and this type will be password and then change the placeholders as well don't forget that and then after the last input we're going to create a button and this button is going to say submit and then we're just going to add the type as text but I think by default the button inside of a form or not text ver it's going to be submit and the button by default should be submit but just in case it's not we're just going to add that it's not going to hurt and now the on submit at the top we need to create a function that's going to handle this submission so we are going to call this register user and then we need to create this function above the return so we're just going to create an arrow function and this Arrow function is going to take in an event property which I already know it's going to do and then when we do type in this and when we do submit this button we don't want the page to automatically reload so we're going to have this event.preventiful I think everything looks good there's our form right there looking good now we're just going to copy and paste the email and password because that's all we need for the login so we're going to now go to the login have the div is the parent element create a form copy and paste what I just um email and password and then we're going to have a button as well which is just going to say login we'll give it a type of submit when I type up type is going to be submit and the form is going to have it on submit and this function we're going to say is login user and we are going to create this function so cons log in user it's an arrow function e dot prevent default and then we're going to pass in the event okay next thing I want to do is I do want to create state now for the register and login so I'm going to go back to the register we are going to import you state that's going to be the first thing from react and I like putting the state right below the function where we're going to have the state and this state we're going to create an object called Data and set data and it's going to equal an initial value of an object with three parameters these three parameters are going to be the inputs so we're going to have a name which is going to be empty string email which is an empty string and password which is an empty string you could do it separately if you want but this is just how we are going to do it so now that we have the state at the top here we need a implement it inside of these inputs so these inputs are going to have a value and they're also going to have an on change so the value is going to equal data Dot and a name so the object and then whatever the property is so data.name and the on change is going to be um an arrow function Anonymous function and for that Anonymous function it is going to look a little different than you're used to especially if you're just doing like name and set name or email and set email we are going to pass in the EVAP and this is going to equal an arrow function of set data which allows us to change the data value of whatever the property is and then this is going to be an object remember we're changing the value of an object which is data so it has to look like this so we need the object and then the syntax we're going to have is we're going to have the spread operator so we're going to have all the data comma and then we're just changing the name to e dot Target dot value so that's how it's going to look here and I can just copy and paste this down two more times and then change what I need so this is going to be data.email this will be data.password said data is fine we're just going to change this right here this will be email and then this will be password and we're also going to test out to make sure we are receiving the state by using reactive tools so we have that for now we're going to go in the login import use state from react cons data set data equals use state initial value is going to be email empty string and then password empty string and these are empty strings because the initial value when you go on this form there's not going to be anything on it so that's why it's empty string and not the previous um information that the user typed in okay so now we just need to add the value on and on chain on each input so this is going to be email and then add it to this input as well password and then password and everything looks good so let's just test out the states real quick on the front end Let me refresh see if we have any errors in the console we do not so we look pretty good next thing I'm going to do is I'm going to stay in the console I'm going to go to a tab called components from react Ed tools I am on the register page I'm going to click register right here and you can see right here that we have three different states name email password and as I type they should change so I'm going to type my name Brett and it says Brett let me do email Brett gmail.com and then password one two three four five so it looks like the state is working let's just check in the login page real quick gmail.com and then one two three four five and there's the state for the login so it looks like everything is working correctly so we are good with this front end for now I will style it off screen because I don't care about talking about the CSS on screen just about the functionality of using burn for this application so let's just X Out of all these Pages for now and we are going to close the client and we are going to open a new terminal we are going to CD into the server and we're just going to say npm init this is going to initialize like a node package model like a package Json file so the package name is going to be server versions one description and as you can see it says entry point is index.js so that's going to be the file that's going to be our main entry point for the back end and you just press enter for the rest of these and as you see in the server we have a package Json perfect next thing we might as well just do real quick is create a new file called index.js as the entry point and then there's a few packages I do want to install before we get started and it's going to be the main packages we need for the back end so we're going to install Express which is the framework we're going to install node mod we're just going to pretty much update the server to make sure we have no errors and it'll tell us right away if we do we are going to have dot EnV which allows us to use environment variables inside of our backend application and hide whatever secret keys or strings that we want hidden from the public and we're also going to have cores because we need to connect our localhost 5173 which is our front end and our back end we're going to have as localhost 8000. if we don't do chorus it's going to give you a course error which means you can't connect the two different hoses because it's like a security issue um we are just going to press enter for that make sure you're in the server awesome now the next thing we are going to do is we're going to set up some of the index.js file so to do that we got to import Express from Express and it is in this syntax I think this is like es6 or something this is older School syntax you can't change it but you just got to do a few more steps inside of your um application but you might as well do this this isn't too hard so I'll just recommend sticking to this we could do the dot EnV and then require dot EnV and then we also have to have a DOT config and then we also have course which we might use course in a different file but we could just keep it here for now require course and then we just have to initialize Express so cons app equals Express that's what most people do especially on your entry level point and the other thing I want to do is I want to go inside the package Json and create another script file so I'm going to have a comma underneath Scripts and we're going to have it called start and then it's just going to be nodemon index.js that means it's just going to watch the index.js file and all we have to do is type in npm start if you don't do this you just gotta type in nodemont index.js but this just makes it simpler so npm start and as you can see is watching the node index.js file so we can close the package Json follow up and the next thing is I'm going to set up a port so we can listen on and this is just usually at the bottom of the entry level file so we're going to have a con support and like I said 8 000. and then we have a function that's associated with Express called listen and that means we're going to listen to the port with an anonymous function that calls a console log and we're going to have back ticks and we're going to say server is running on Port and then we'll do the syntax and the port is going to be whatever the port is so 8 000. so this console log in an Express server should not show up on the front and it's just going to show up in your terminal log and as you can see here it says server is running on Port 8000 and everything looks good okay so the next thing I want to do is I want to get more organized with these folders because we're gonna have to have a lot more code in this backend so what we're going to do is we're going to create two folder structures right now um directories inside of the server first one we need is we need routes because we are creating API endpoints we need routes so we're going to create a routes folder and inside of that routes folder we just need one file called auth routes.js you can name this whatever you want but I'm just going to name that for now and then we're gonna have another folder called controllers and what controllers are are pretty much the functions that are associated with each endpoint so that's where most of the code is going to be that is actually going to do a lot of the logic so all the controllers or controller.js so now we have our backend setup more and the very next thing I want to do is I just want to test a git request endpoint with the API and axios to make sure everything is working correctly okay so to create a git request endpoint we are going to start inside of routes so in the routes we have a file called all throughout.js and we need to import Express and then after we import Express we are not going to initialize it with app we actually are initialize it with router so router equals and then it's going to be Express dot router and as you can see it autocompletes for you and this is just a function that we're allowed to use with the Express framework so this allows us to use this router inside of our browse folder another thing we need is we need course so we definitely need it in this file because we do want to make sure we could connect a different host even if it's different API endpoints with different hosts and for that we just might as well create some middleware real quick with that course so it's going to be router.use so that means the router is going to use course and course is going to have an object with two parameters and we're going to have credentials that's true and then we need to define the origin which is going to be your front end which is HTTP dot slash localhost and it was 5173 if you're using the V app there is some front ends our localhost 3000 you just got to play around with it depending on what you used so there is our middleware for our router and the Syntax for a router down here is we're going to use router Dot and then you can see all the properties and stuff it gives you right here but we're calling a get request so we're going to say get and then we need the end point as the first parameter which we could just do slash because this is just a test and then after you could either create the um request response and then you could write whatever you want here but if you want to make it the code more clean and organized we actually are just going to call this function's name which we are going to make it as test so we don't have test actually defined yet but we will inside of the controllers and then all we have to do is we have to export it so make sure you always export and we this is how you export files inside of um an Express framework so it's module.exports and then we're exporting the router okay so we're exporting the router and we had to go to the entry point which is the index.js so for this we did initialize it with app so we need to use app.use and this is just going to be a forward slash so we want all the routes to go to a forward slash and then inside the auth routes this is actually going to define the actual route that we want so this slash is perfect and this slash could be used for all of the routes and then we had to import that export from the auth routes so all we have to do is press require and then we have to go inside of routes slash auth routes so now our routes are connected and we are getting an error and as you can see it says test is not defined and it's talking about this so now let's define test inside of the auth controller so I'm just going to go down three lines for now I'm just going to say const test equals request response and it's going to be an arrow function that has those two parameters and all we have to do for this is we just have to return some Json so we're going to have a rest uh Json and we can put test is working and the main reason we are testing to make sure endpoints are working is because we don't want to be working on endpoints and code in the back end and then trying to figure out where the problem is it's just better to test stuff beforehand and then start working your way up from there it does take a little more time but it's a better way to do it so we have that for there and all we need to do now is we have to export it from this file exports equals and we're going to be exporting a few things from this file so that's why I have an object right there and we're gonna have test and still says test is not defined is because now we have to import it on the top so cons and then test with the curly braces because we're going to be defining multiple functions there and this is going to be from controllers slash alt controller and if we scroll down everything looks like it's running good now we just have to work on our front end code so they both could connect and we could actually test that get request endpoint so let me just do a quick review of what we just did so we run them all the controller we created a function called test with the request and response and we are sending back a response Json the test is working and then we exported it we imported it into the router and then we used it down here as a function inside of router.get to this endpoint and then we exported again router to our entry level file and then we just use the here app.use so the only thing we have to do now is I'm going to close these up real quick we could um collapse the server folder we're going to open the client and we could do this all inside of our login page so if we go to our login page we are now going to be working inside the login user function so that means if we click this button the login user function is going to fire off some code so for this all we have to do is make sure we import axios so we're going to do that first you can do a fetch request but we're going to use axios for this specific project axials is very easy to use and all you're going to do here is called axios.get and then this is where you can make your life a lot simpler so instead of typing out localhost blah blah blah blah blah like your base URL we are going to use axials properties and make sure we use that in our app.jsx so when I start typing it you're going to understand it a lot better so I'm going to import axials from axials inside of our app.jsx file and then right above the function app we are going to have axials.defaults dot base URL and this base URL is going to be our backend URL which is going to be HTTP dot slash localhost 8000. so that means we want to keep typing it in on every endpoint we do we just got to type in the endpoint the very end so slash register slash login or just like a slash if it's the home and then we're going to also do one more thing axios defaults dot with credentials and we're going to have that set to true so we're going to make sure we could actually connect to this localhost 8000 and we're giving us pretty much the credentials to actually work with it so axios.get and we're going to have a slash so it looks like everything should be working now we're actually going to test it and I'm going to show you a different way you could also test as well without doing course so I'm going to go on my page or application and we're going to be on the login page we're going to open up our Dev tools and we're going to open up a network tab and we're going to see what it does so all you gotta do is just click login and we get a 200 status which isn't actually an okay status the request method is get and the request URL we're requesting from is the locals 8000 with a slash and that is our backend and if you look at the response it is test is working so it looks like everything is working perfectly another thing you could do to test is you could use Postman and you could test your endpoints there you just make sure you go into a workspace I can open up a new tab make sure your backend is running before you even do this and then you're gonna have localhost 8000 slash a get request and then we're just going to send the data and it says test is working so that's another way to test your endpoint to make sure everything is good but like I said you're not using course and course is essential if you're actually creating a real application and now we're going to close everything up and we are going to go back inside of our code and the next thing we're actually going to be doing is we could actually set up mongodb before we even do anything else so we can have the database set up and ready to go so all you have to do is I'm going to open up a Google Chrome new tab and you can go on google.com and you can just type in mongodb so mongodb is part of the merge stack and it is a database that we are going to use to store all of our users information it's very simple to use and this should not even take you more than five minutes to set up so all you gotta do is log into your account you could either use Google GitHub or with the email address and password I am just going to use Google I am going to log in and if you're signing up for a new account with the email and password you might have to answer a few questions but if you're not you should land on a page that looks very similar to this right here at the top left we are going to click um this myrn yt1 that's what says for me but I might say new project for you if you don't have any projects for me I get a down arrow and I get a bunch of projects I've created in the past and then I get this new project I click that and now we're going to name our project so we can name this mirn auth next page it's going to say add members and set permissions you could just click create project and now it's just going to take a few seconds for it to load up now we're going to create a database within this project called mern auth we are going to use the free version which is for learning exploring mongodb in a cloud environment you only get 512 megabytes of storage we're going to use the AWS provider and you should use your recommended region which whenever one has the star and mine is the North Virginia since I'm on the East Coast and you should change your cluster name to whatever you want but this isn't actually public to the client I'm just going to leave it as is and click create okay so pretty much the most important part of creating mongodb is creating this username and password so I'm going to have B Westwood 11 and this password you can make it whatever you want but I am just going to use what they already gave me I'm going to open up a notepad on my computer and I'm going to paste it there you do not want to forget this password because if you do you won't be able to finish actually connecting mongodb to your application so all we're going to do is Click create user we're going to use our local environment and if you obviously want a more advanced weight you could use a cloud environment if it's a bigger project but this should do and then add entries to your IP address make sure you just enter your IP address and then other than that you can finish and close and go to your database this is going to take a little bit of time to load so we are going to just minimize this page here we are going to close everything in this front end real quick and we are going to go inside of our index.js and start connecting Mongoose first thing mongodb there's a precursor right there so we are going to use mongoose package to connect mongodb so we can open up a new terminal CD into the server and we're going to install mongoose into our server so now this is package is installed into our server now we need to import at the top of our index.js file so we're going to import mongoose and then we're going to require mongoose shh okay so Mongoose gives us a few on properties that we can use as functions and one of them is going to be connect and I'm just going to put a comma here and I'm just going to put database connection so we're connecting our database to our application and then here is the parameter where we're going to have a string so I'll show you exactly what we need now for mongodb so mine is still loading which is totally fine next thing we could do is we could create an EV file EnV file inside of the server so all you gotta do is just go on the root um layer of your server file and press dot EnV and there's your EnV file and the EnV file we're going to have is called Mongol underscore URL and we are going to get this string which needs to be hidden from mongolo DB database you do not want to share the string with anybody sometimes it takes a long time to load the cluster sometimes it doesn't so mine still says loading but it looks like we could connect our application so you just press connect here and then it's going to pop up this make sure you have this version or later you do not have to do the second part because we're doing mongoose and we're just going to copy this string here and paste it into the EnV file so we back out we paste the string and if you see inside the string it says password inside of these like two greater than the less than signs we need it you use that password that I saved earlier and just paste it in here because if you don't do this you're not going to be able to connect successfully to your mongodb database so now we have this string we go back to our index.js file and access that we're gonna do process.env.mongle underscore URL and then we're gonna do some console logs to see if we're actually connected so we can do it then and catch so for the then we are going to console.log so if it's true where you're in a console log database connected and then we're going to do a catch console.log data database not connected and then we also want to give the error which we have to pass in as a parameter as well and then another thing you want to do before um testing your connection out is since we did make changes to an EMV file you should reset the server so we're just going to reset the server real quick and all you gotta do is press Ctrl C and then press npm start and as you can see Server is running on Port 8000 so we're running and it says the database is connected so that means we have successfully connected mongodb to our application next thing I want to do real quick to get out of the way is we want to create a user schema so that means we want to Define the types that our user implements inside of the register form so let me just check real quick to see if our cluster is done and it is done so there we go perfect so our cluster is done I'm just going to tally back to our application our front end and now we're going to create another folder inside server and we're going to call this models and then we are going to create a file inside of models called user .js and this like I said we're going to find types of what they enter so mongoose we're just importing Mongoose at the top and then we are going to use a property that Mongoose gives us called schema and that is going to equal mongoose and they do have documentation for all of this on their website so if you do want to learn more about it I recommend going there or you could ask chat CPT and it'll probably tell you as well um but we are going to create a new schema and it's going to have an object and this object is going to have those three values that we are looking for when somebody registers this is the stuff we're going to store inside of the database so we have a name which is going to be a string we're going to have an email which is also going to be a string and the string has to be capital s and then we also want the email to be unique which is set to true and then the password we can make it a string so now we just have to Define where we want this user model in our database so mongoose dot model we want it inside of a user collection and what we want to put inside of this user collection is the user schema which is right here that takes all these into account and then we just have to export it module.exports because we're gonna have to use this later inside of our controllers there we go so we just successfully connected our database and we created some user schemas as well so we already have that out of the way we could close the EnV file the models close all these up we already test our get endpoint to make sure everything is working and now the next step I want to do is I want to start creating or post request which is going to we're going to have two we're gonna have a login and a registered post request and then we'll go from there okay so to get started on our post request we I like to start in the routes so we need a new route for this and this is a post so it's going to be routed.post and we want to define the endpoint so the end point we want to do first is register we want to work in order that somebody's actually gonna come through our website so somebody registers before they log in so I like to start on the register first and then here like I said we are going to call our function which should be relatable which is register user it crashed because register user is not defined and we are going to find a register user inside of our controllers so we might as well just do that now so we can leave the test as is and then we're going to have a cons register user and it is going to take in a request response and we could just leave that for now and then we are going to export register user go back in the routes and make sure it's imported as well so register user so we don't get any errors so let me just make sure we have no errors yeah it looks like yeah we have nowhere so database is connected server is running awesome and you can just do this it should do it there we go so database is connected and everything is running properly so now we are going to work inside of our controller so this is where all the magic happens for the API endpoints in the back end so what we are going to do here is we have to think about what we're getting and what we want to check and all the good stuff so for this I am going to create a try catch block and let me just create that real quick so we have a try catch and the very first thing is we want to take in the request body but we also need to add a middleware if we ever taken request body because we needed to parse the data so we could actually accept that requested information so let me just um Define the requested body of what we're going to be taking in which is name email and password and that is going to equal the request stop body and like I said we need a middleware or this information is going to give us an error so we wanted the middleware inside of our index.js which is the entry level um application for our backend so let's just do a comic same middleware it'll be app.use Express dot Json which parses the data and cannot access app and it says cannot access app before initialization reason why is because I initialized it below it should be initialized at the top and we get that error taken care of um that should be the only middleware we need for now if not we'll come back to it and fix it when needed but we are going to go inside of our alt controller again and we have the requested body so we have this information that comes in to the requested body and what I want to do after this is I want to do a few checks so this is where our front end and back end is really going to play an important role um we're going to do checks to make sure everything is working correctly so check if name was entered so that's what the first thing you want to do so I want to make sure they actually typed in their name because if they didn't we should have thrown Air at them so to do that we're just going to say if there is no name we are going to return a response.json of error and then name is required reason why I'm writing it like this is because we're going to access this error later on inside of our client folder here I'm going to minimize the client as well so everything looks cleaner so we have that set up everything's good now I want to do another check I want to check if password is good and we are going to do two checks here so if we're going to say if there's no password so if they didn't type in password or the password dot length is less than six then we need to throw out them an error because we want them to give us a strong password for our application so we're going to return response.json it's going to be an object with an error and then we're going to say for this error password is required and should be at least six characters long so that should be it for the password check now the reason why we did the mongodb database and make sure everything was working correctly is because now we want to check the email and make sure nobody else has used that email to sign up for our application so we're just going to say check email and for this we're going to say if it exists well we're not going to say if it exists let me rephrase that so we're going to have a variable or a function that equals exist and we're going to need to use async and a weight for this reason why is because it is an asynchronous function to request data from a database is not instantaneous and it's not in our code so we need to async await it and then also I didn't import that user like the user schema so it's not import so what I need to do here is I need a cons now I'm going to call it with a capital u user equals require and then we're just going to that um models the schema that we created and we're going to take out the user and for this we are going to be able to use a property called user.fine one this means it is going to try to find one of whatever parameter we put in which is going to be email so we are going to find if this email is in our database so that's what it means so if this exists is true that means there is an email that was found in our schema which is our database so if that is the case if if this is true which that's what it means we are going to return a response dot Json object saying error email is taken alrighty so they should get that message if they type an email that's already been typed in and the other thing we have to do is we are going to create the user in the database now so to do that mongodb gives us a property called create where we could just tag it on to user and then create this we just want name email and password and just a heads up we are sending a password that isn't hashed yet but we will do it later on so we're going to send a password that actually attached so it looks like we've done all the checks and we created the user in the database and we are just going to return a response dot Json user we're just going to return that user okay so that and then also let's do a console.log in the catch um we could just do error so there's our try catch and our register user endpoint looks pretty good for now like I said we just need to Hash the password later we will get to that there's our route using that endpoint and that function just making sure everything looks good and then we use it here okay so we could just go into our client side now go into the register page and on the register page now we need to connect to that endpoint in our backend so to do that we going we're going to need to destructure the data first so let's destructure by saying cons name email and password equals data and then after this we want a try catch block as well just to make sure we catch any errors if we do any errors so we're going to have a cons data so this data that's destructured is going to equal a weight so if we use the weight here we must use the sink up here we use a weight axios and we don't have axials imported so let me import that axios and then it's a post request so dot post and the end point is register and then the next parameter is after this we have to send a payload which is going to be the information so the name email and password so this is the information again sent to the back end and now those errors that we checked in the back end so if there's like no name um if the email is taken we want to showcase that on the front end and the way we do that is we have to install a package so let me just go to Google real quick and this package is called react toast and it's react hot toast I'll go to the documentation and I'm going to tell you how to implement this into your app so we're using the node package manager so we're going to copy this we are going to CD into the client install this package and then we're also going to have to now go inside of our main folder which our main floor that we're going to consider for this is going to be the app.jsx and we're going to import toaster from react hot toast this is pretty much us us importing browser router as a router for the reactor outer Dom but for react hot toast so I am going to implement toaster right below the nav bar and this is going to be a self-closing tap and it's going to have a few properties so the first property we want to Define is position excuse me all right so position means where do we want our notifications on the user side to appear so we could do this bottom right and then we are going to have toast options in these toast options this is where we're going to have another object and we're just going to define the duration in this duration we're going to have S2000 which means two seconds it's going to last for two seconds the notification you can go through their documentation as you can see here it's pretty simple to follow and you could just if you want to learn more you can do that but this is pretty much the basis of how you set it up now we are going to go inside the register right and then we're going to import toast I think it actually is brackets it does import toast from react hot toast okay so now after we send the payload that is now where we're going to do the checks and that's how we're gonna access it so we named every checked error inside of an object so we're going to say if there is a data.air so if there's an error with the data that we defined in the back end we are going to do a toe stop error and then we're going to pass in that data.error message in that data dot error message just to get a refresher real quick is right here so if this data which is email is an error we're going to get an error which email is taken already so we have that if and then we could do an else statement so else if everything looks right we want to set the data on the user side to an empty object so we're going to reset the input fields we also want to send a success message to let them know hey you were successful so we could say login successful welcome and then we also want to navigate them to a different page and we could use the use navigate from react router Dom and then all we have to do is initialize that so I'm going to initialize it with navigate as the variable and then use navigate and invoke that function so there we go so navigate use navigate and then after we send that message we want to navigate and we could just say to the login page for example reason why is because after they register we want them to log in or you can send them to the homepage it doesn't matter to me and then other than that we just want to put something in the catch just to see so console.log and then we'll count console log the error so everything looks pretty good for the register API endpoint that we made so we are going to test it out now and if there's any errors we'll be we will debug them so let me open up our front and application go to register let's just make sure we have no errors so console we have no errors we could go to the network tab and let me just make sure we have no errors in our server and we have none there too okay and if we want to see our user in our database all you gotta do is Click browse collections after we submit our information so we'll see if that actually works as well too so we're going to have the name Brett email will be Brett gmail.com and the password is one two three four five six and we'll do six so this should work and then we'll also try different ones with like passwords less than six characters no name same email would make sure all those error messages work so we'll click submit we get a 200 error and you saw right down below it says login successful welcome and if we look at the network tab here's the payload all information Brad Gmail Brett and then password one two three four five six the response that we sent back which was the user is all of this and we also get a underscore ID which does mean that we successfully sent this information to the database because that is the ID that we use inside of mongodb 200 okay post and then the request URL is from the localhost 8000 slash register and just to check we'll browse The Collection there should be a user's and then here is our information so that is a lot of information and intake um if you're missing out or you're just confused about anything re-watch the video or you could also comment in the comments section and ask me a question and I will try to get back with you within 24 hours if not you could also follow my social medias on my account and also subscribe to me because then you could always follow me but we are going to keep going here and we have done a lot of progress so far and we are just going to make sure before we even keep continuing that all these errors work so I'm not going to enter a name I'm going to enter Bret one at gmail.com and I'm just going to enter some random password so this should pop up let me take this out this should pop up right here to the right and it should say um no name name is required or something like that name is required as you see right there so now let me enter a name let's use the same email to make sure that's working and then we could use a different password that's fine email is already taken so that means that our backend API checked our database to see if this email is in there and if it is it send us that message and then let's just do a password like once three four five let's do email that we haven't used and it should say something about the password password is required should be at least six characters long so it looks like everything is working perfectly as it should um so the next step we are going to do is we should be creating let me make sure everything's good we should be creating the login um endpoint so if they want to log in or we could actually hash the password which I think we should hash the password first with bcrypt before we even do the login endpoint so let's do that to start next okay so let's install bcrypt onto our application in the backend server you're just going to type npm I bcrypt you can check the package Json the dependency bcrypt version 5.1 is there so the main reason we want bcrypt is to Hash our user's password this is because even though we are sending information to a secure database it does add a layer of protection to the user and their account so this hashes the passwords that only the user knows and not even the database knows another way we are going to use bcrypt is we are going to have to compare the passwords when somebody logs in to make sure they're logging in with the correct password so we're going to compare the password that was typed to the encrypted hashed password and we're going to do that as well using bcrypt so inside of the server we're going to create a new folder or directory and this is going to be helpers and this helpers we're going to create a new file called auth.js and inside this file we must import bcrypt at the top and at the top we are going to create a function called hash password this is going to take a parameter of password and it's going to be an arrow function and all we are going to do is return a new promise and this new promise is going to have a resolve and reject and b-crypt does come with properties that allow us to use its functionality so the first one is bcrypt.gen salt so this is just going to increase the security of your actual password um the default value is 10 but we are going to put 12 the higher the value the more secure it is but the longer it also takes to process is what I am familiar with and then we're going to pass into properties in there and then we are just going to have an if statement so if there is an error we're just going to reject it so we could reject it right away so reject and then reject the error and then right under that we are going to have decrypt as well again and this time we could check all the suggested stuff it gives us so we're going to actually hash this time so we're going to Hash the password we're going to use salt which is a parameter that they use and then we are going to pass in error and hash this gives you an arrow function and right off the bat we want to throw any new errors and reject them and then if we don't have any we are just going to resolve the hash and that's going to run this function right here be Krypto hash other than that everything else looks pretty good and I'm just going to create one more function since I am here which we will call compare passwords and this is going to be used for the login API so we're gonna have password and then hashed passed in has parameters and then all we're going to do is return decrypt dot compare which is a function they give us and we're going to pass in the password in the hashed and then now we need to export these two functions from this file so we can use them inside of our controller so we're gonna do module.exports equals hash password and compare password now we're going to have to import these as well now we're going to import these two functions hash password compare password inside of our controller so let's just go to the top and we're going to do cons curly braces hash password and compare password and this is just going to come from that file so dot dot slash helpers slash auth okay so now we are going to use the hash password when we actually create the user and send it to the database which is right here create user and database so instead of just sending the password we are going to send the password that is going to be hashed so Above This let's create a function called hash password and this will equal a weight hash password that we imported so we have hashed and then hash and then the parameter we're going to Hash the password of the actual password if that makes sense that's what that function is doing and then we just got to pass the hash password Here okay so it looks like everything is good so let's test this out and make sure in the database it is hashed so we're going to go to register we'll do Brett brett5 gmail.com and then one two three four five six submit login successful welcome we are going to refresh our database and our password should be hashed and there it is so as you can see you can see these passwords here but then this password from the five at gmail is actually hashed so the bcrypt is pretty easy to implement it's only a few lines of code if you really want a better understanding of it you could definitely read some articles and look at the documentation from their website but that's just the pretty much the basics of how you can use it really quick so the next thing I do want to do is since we have that and we have the compare password function already created we are going to create the login endpoint so what I want to do first is I do want to go to routes because I always like starting in the routes so we are going to go to routes and then we are going to create another post request so router it up post this endpoint is going to be slash login and then we are going to pass the function login user which we have not created we are always going to create this in the controllers so we are going to go to the controller and let me just do comments here real quick so I'm just going to register endpoint and then right above here we could do login endpoint and then we're going to create the functions so cons and what did I call it I called it login user so login user equals a request and response into an arrow function and let's export it and then let's also import it so we have no errors because we have errors right now login user is not defined so we're going to go to the route and then just add a comma here and login user since it is from the same page and it looks like everything is working correctly so let's actually start creating the login API endpoint so the first thing I am going to do is I'm going to create a try catch block oh I spelled it wrong try catch and inside this try the first thing we need is we need the requested body so we are going to say cons and then it's going to be destructured with the email and password equals the requested body so we are taking the email password that they log in with and then we just need to run a few checks as well just almost like the register page so we are going to um check if user exists so that's the first thing we need to do and the way you check the user exists is we're going to make sure we find that email and if it's good then we're good to go so we are just going to say cons user equals a weight so if we do away here always make sure you have a sync up top or you're going to get errors user Dot find one and it's going to find what an email so if there is no user so if that means if there's no user nobody's registered underneath that email then we got to say we did not find that email that means you're logging in with an invalid email so what we could say is error no user found so that's going to check if the user exists next thing we need to do is obviously we check the email now this is where we're going to check the password and we need to check if passwords match so that's what we need to check for the login API point so we just need to create a variable or a function called match we're going to do a weight compare password which we imported from up here from the helpers folder and then we need to pass in parameters the first one is going to be the password as you can see as you type it shows you it's the password and then the second one is going to be the hashed password and that is going to be the user let me show you how it is is user Dot and then it'll be password that's where reading that from so it's whatever this password is from the requested body and then it's going to compare to the user dot password when we created it in the register endpoint and that's going to be in the database so let's just do quick if match so that means if compare passwords is true we need to do something and what we're going to do is we're going to assign this a Json web token so if the matches are true and the email exists that means we need to sign a web token which is a cookie essentially to this user so we could track them throughout the whole application um other than that we are going to let's add a console log inside of the catch just with an error and let's just return a res dot Json um passwords match so let's just make sure all of this works so let's test the login endpoint in the front which is right here so let's go to login I used brett5 gmail.com and actually before I do this we never even set up the login front and endpoint to actually connect it so we have to do that real quick so let's make sure we do that before we even test it because it's not going to work so we're going to go to client Source Pages log in and as you can see we just have axios.getrequest here we actually need to do the put the post request not put post so first we are going to do structure the data with email and password and this is just going to equal data okay then we're going to have a trike hatch block below this so inside of the try we're going to take that destructured data right and we're going to wait async we're gonna wait axios dot post and the endpoint that we created is slash login and we created that here inside of our routes on the server side so that is the end point and then we also need to pass in the payload which is the information so email and then password so that's how you take care of that and now we're going to do some data checks with toast so we need to import host from react hot toast and now we are going to be able to display those errors on the UI side so for that we're going to say if data dot error then we want to do a toast dot error of that data dot error which is what we typed in before the errors in the back end else we are going to set the data to an empty string so reset the form I mean not empty string empty object will we will reset the form to its default value and we are going to need to import use navigate from react router Dom and then we're going to initialize it and then we just want to navigate to the home page let's say that okay so everything should be working that we need to work let's just refresh console no errors we are going to go the network tab login so we're going to use brett5 gmail.com I think the password I type was one two three four five six we will log in it takes us actually to the home page and we get 200 requests saying passwords match so everything looks like it's working and instead of obviously doing the passwords match we are gonna um set up a cookie with the specific user so we could actually track them and we are going to use like I said the Json web token and as you can see the request URL endpoint is localhost 8000 login it's a post request a 200 status okay and now let me try an error so we're gonna do Brett five at gmail.com I am going to start typing in some random stuff here in the login and we are not getting an error but we're also not getting a passwords don't match we should be getting an error that's a passwords do not match so let's check that out real quick so if we go back into our controllers if match oh we actually never set one up so we're going to say if no match if they don't match then we need to do a response dot Json with an error and this error is going to say passwords do not match all right so let's try that now so we try to log in passwords do not match as you can see right here and then if we type in say Brett 15 it's going to check that first and it's going to say no user found so it goes based on how you typed your code but that's going to be the basis of the login endpoint and register user endpoint next thing we are going to do is we're going to create this Json web token import it install it and set it up correctly so we can start tracking our users and kind of create a mini dashboard for them okay so when we do this Json web token we need to install two packages on our server so the first package I am going to install is Json web token like I said this allows us to um Implement cookies to specific users and track them throughout the site and we just use that for useful tasks and better UI and another thing we want is we want a cookie parser because we are not going to be able to actually use their information if we don't have this cookie parser so we're just going to put npm install Json web token and cookie parser and make sure you're installing it on the server and now we could get ready to start it so we are going to set up some middleware inside of our index.js and we're just gonna do app.use but before we do that let me import what I need at the top which is going to be the cookie parser so we can name this cookie parser equals require and then cookie parser so we're going to use this cookie parser so we named it cookie parser initialize it that's going to allow the cookies to be going back from one host to another and let's just do one more um middleware and this is going to be Express dot URL encoded and then we're going to do extended false so these are the two metal wires that we're going to need to use for these Json web tokens so now for the Json web tokens we are going to do this all inside of our auth controller so at the top we have to import it so we're going to do cons and we're going to call this JWT equals require Json web token so that means we imported it at the top and now we are going to just give a Json web token inside of the login only in the login API endpoint not the register so after they register we do want them to re-log back in I feel like that's how most applications work and if you don't then usually send them an email trying to confirm their email address but for this project we're just going to create the JWT inside of the login endpoint and we're going to do it right here if the passwords match so what we can do is we can just do JWT that's where we assigned it and we could do a parameter or like a function called sign this is going to assign the token and we could sign it so we're the only ones who actually knows what's going on and we're going to actually create a secret for this sign so what we can do now is we can do the email which will be user.email we could have the ID which will be user Dot underscore ID because that's how it is in mongodb underscore ID and then we could also have user.name this is the information that we are going to send throughout the cookie and then we're going to have another parameter and this parameter right next to us this is going to be the secret the pretty much the Json web token secret and this needs to be created in the EnV file so when we go to the NV file we could create whatever string secret we want as long as nobody else knows what it is so I'm just going to do JWT underscore Secret equals and then start typing random stuff like it really doesn't matter what it is so that is going to be the second parameter path so we're going to do process.env.jwt underscore Secret and since we did do a change inside of an EnV file let's just restart the uh server then we can start it back up we are getting an error um we could work on fixing that later but we'll see what happens as we keep coding so after we get that JWT Secret we need a third parameter which is going to be an empty object and then the fourth is going to be anonymous function that's going to take an error and a token and this Aaron token is going to be a callback function that's going to have if error we're just going to throw it off the back so if there's any errors we're just going to throw those errors and then what we are going to do here is we're going to send a cookie so res dot cookie and this will be a token that's we're going to call it as the first parameter and it's actually going to be the token and this could be dot Json user so what we are doing here is we are setting everything up the house should be let's see what error we are getting so the error we are getting is JWT we're going to use your dot name error the reason why is because we didn't Define name before it so now we should be good so everything looks good um next we are going to test out the JWT token to make sure everything is right here so right now everything looks pretty good let me just minimize this terminal a little bit and let's actually log in and test to see if we are sending this cookie so let me open back up to vs code go back to our front end Let me refresh make sure we're in log in and we're going to log on that brad5 gmail.com and we're going to enter a password at one two three four five six this means passwords match and it should run that JWT sign so as you can see we get the 200 it looks like we're passing the ID the password that's hashed all that if we look inside the headers we do get a set cookie and we are setting it to a token so we are getting a response of a cookie we just don't have it in the request so we definitely need to work on that and we can look through the code to see what is going on about that okay so I just refreshed the page and I wanted to test out to see if we got the cookie again and it actually works this time I just want to show you guys it does so I'm just going to refresh this we're going to log in we're going to get brat five gmail.com one two three four five six login we get a 200 request and then if you could look in the response we get a set cookie and then the request we actually get a token that equals that long uh string so we are sending the cookie correctly into our user so next thing we want to do is we want to actually be able to access this cookie and token throughout the whole application so to do that we are going to create some contacts and this context is going to be created in the front end so let me minimize this minimize the server we could exit out of a bunch of pages create a new folder inside of a client called context and then we are going to call this user context .jsx so for this user contact jsx we will import axios from axios and then we're going to import create contacts from react so first thing we're going to do is we're going to export const we're going to call this user contacts and this is going to equal the create contacts and it'll be an empty object so after we do that we are going to export function user context provider so we're going to wrap the whole application with the provider so the provider takes in all the children as a parameter and then inside of this is where we could run all of our code if we need to that we want applied to the whole application so for now we could just do return and what we're going to return is user context dot provider and like I said the provider it's going to apply to all the children and the children we are going to send values to all these children so we could use them so it's you're pretty much going to send like state down throughout the whole application so you don't stay back up the application because that's harder to send application and state down so this allows you to access State anywhere within your application and you'll see how that works so what we want to do is we want a user and we want a set user so we are going to need some new state and then we also want use effect so you'll see how we use these two hooks from react right here so right above the return we are going to have a user and a set user and this is going to equal you state and the initial value is just going to be null there's going to be no user because we're going to assume nobody's logged in then we are going to have a use effect and this will fire off every time a page renders pretty much essentially so every time you go on a different page we're going to be able to tell if there is a user or if there's not so if there is no user not one user if there's no user then we are going to do axials Dot and then we need a get endpoint because we want to actually be able to get the user so we could just create this real quick for this we're going to say slash profile as the endpoint um for this API and then we could just do a DOT then and the reason why I'm doing it then instead of anything else is because you don't want to use a sync and a weight inside of a use effect so we're going to do data and the data is going to be wrapped in an object and this data is going to be set to an arrow function and we're going to set the user to data so as you can see everything here looks pretty good and then we just gotta add at the end of the use effect we have to add an empty array dependency and then for the values we want to pass the user and set user all right so we have this context set up that now we could use throughout the whole application the way you could do that is we have to wrap everything in a user context provider so we could go inside of the app.jsx and we can import user contacts provider from that file and what we're going to do here is we are just instead of these backticks we could just do not backticks fragments we could do user context provider wrapped and then this will just be at the very bottom and then we can just get rid of this so our whole application now is wrapped with this context provider allowing us to use the state that we defined inside of the contacts and this state is always going to apply and use effect always starts when a new page renders so that's how we're going to do this but we don't have this endpoint created yet so let's go ahead and create that endpoint in the back end so first thing is first let's close the client open the server we will go to routes all throughout and we're going to create a get request now so we're gonna do router.get and we are going to have that endpoint that we created which will be profile which technically we're creating right now in that profile we need to create a function for and we're going to call this get profile and we're going to create the function on the auth controller we could do this at the bottom so we're going to do con skip profile equals request response into an arrow function and then let's export it so we stop getting this error get profile and then let's import it inside of the routes come on get profile we should get no no errors now so we have no errors so now let's actually go back into all the controller and create this endpoint so we're gonna have Kant token and this token is going to be the required Dot cookies so this token is going to be whatever the requested doc cookies are going to be and that is going to be right here this cookie right here this token it's in the request headers you can see that inside of your network tab so inside of your network tab you're going to have that and then we're going to do if statements to see if certain things right so if there is a token that's what's saying if we have a token we could do a JWT and we could verify the Json web token to make sure it's legit and it's the right one so we're going to pass the first parameter as the token it tells you right here this is for the verify um function that Json web token provides so the token is a string which we passed in right here then we have the secret or public key which the JWT Secret so it's going to be JWT underscore Secret and then it's actually gonna be processed dot env.jwtc group because that's coming from the environment variable the next one is we are going to do an empty we're gonna have options which is going to be technically an empty object because we're not going to pass any through and then we are going to have an anonymous function that passes an error and a user so we are going to say right off the bat if there's an error we are going to throw air other than that we're going to respond with Json of user so that's going to give us back the user every time this function runs which will be every time a page loads since we're using the use effect in the front end other than that we're going to have an else statement we're just going to respond with the Json of null so everything looks good in this API endpoint of git profile let me just open up our front end real quick and I'm just going to reload the page and you're going to see profile right here it says profile of 200 it's a get request of ok200 it gives us the email IAT which is like the issued at time and that's like coded in a certain way to be specific time it gives us the name and the ID and as you can see in the response there's our response which is the user which is email ID name and issue.time you go to cookies it shows you the cookie value headers it shows us this and if I refresh the page it still should be there so we're getting a profile it still shows brett5 gmail.com even though it doesn't display on the UI side so let me just review that really quickly just so you guys get a very good understanding of what's going on so first thing is first you can create an endpoint called git profile with the get request the route is a router.get using an endpoint profile and using the function get profile right here we are taking the token from the requested cookies and we get the token because we're using a Json web token right here where we're assigning it with the email ID and name we are passing all the right parameters we need for this JWT sign and then this profile endpoint is verifying that Json web token now if you go over to the front end we are using context from react so the whole application can receive this state and we are going to set the user and set user so we could always have a user on any page we go to if they are logged in if they're not logged in you're going to get no user so we're using the use effect and if there is no user found we are going to use axios dot get step endpoint and then if that's true then we're going to send that data to set user which is going to be data which the new user will be everything the data is which is the name email and issue that time and whatever use pass through the provider covers everything within the children and the value is going to be the user and set user and we wrap the whole application right here in the app.jsx with the user context provider so now the next step is if you want to access right like the username this is how we will do it so I'm going to create a new page I'm going to create this page yeah I'm going to create this page and this page name will be dashboard Dot jsx we will do RFC and for this dashboard we are gonna have to import a few things real quick so import use contacts from react and then we also exported user context from the specific file so now this dashboard is going to act like a dashboard if somebody's actually logged in so if they're not logged in they're not going to really be able to see their name on the dashboard so to access the user value we just call the user and curly braces and we use context from the user context and that's how you're going to write it so if you ever want to access the user in any page you have to call this right at the top above the return so inside of the return we could have um a div and then inside that div we could have H1 saying dashboard right and then right below that H1 we could have jsx syntax with the curly brace and this is going to say if there is a user wait to see if there's a user and if that's true we will have let's say an H2 right that's going to say hi user and then we want to access the name dot name and then we'll do an exclamation mark and the reason why I'm saying user.name is because the user is what we set that to be and then you can see all the properties here so it'll be like user.email user.d user.name and you could add a lot more stuff depending on what you want them to submit in the form so that should work so let's test this out we're going to log in with Brett actually before we do that we gotta send after the login we're going to navigate to slash dashboard and then we actually have to create this dashboard right inside of the app.jsx because we don't have a route to it so let's just copy this down it'll be dashboard and the element is going to go to is dashboard and it Imports automatically up top now everything should work so let's try this out so brett5 gmail.com password will be one two three four five six login dashboard and we are not getting the name so let's make sure we have everything that we need so the profile git request is getting us a 200 the name all that stuff looks good it does say dashboard this last dashboard but it's not giving us the name so let's make sure all this is right so we have an H2 we have a used context in the user context everything looks pretty good let me wrap it maybe in um fragments to see if that makes a difference let's try it again so if we refresh let's try logging again brett5 gmail.com one two three four five six we log in it just says dashboard hmm maybe there is no H2 let's try it as a H1 because I left the global CSS on and index CSS on so maybe that could be what's messing around with it so if we refresh it still looks like nothing okay let me review the code real quick and I will record this right back okay so usually when you're coding you understand that if you miss a single letter or curly brace that it definitely affects your code and that's what happened here so what happened here was that in the use context I just retraced my steps back obviously I've the problem is it wasn't popping up the user so it had to be something in the user context or the dashboard the back end was working I was getting 200s it'll show me all the data so I wasn't passing the values properly to the user context.provider I only had one curly brace you need two because it's technically an object so I only had one here but you need to make sure two are here or you're not going to be able to see the user in your code and if you guys want to see the dashboard code again here it is right there and we are going to try this out again and then says dashboard hybrid so that is the whole application let me just Ctrl C real quick yes and then we are going to stop the development server real quick so I'm gonna do npm run Dev we're going to open up a new localhost 5173 okay and we are going to start the server on the back end so npm start so our front and end back end is now running and I just want to take you through the front and back of how somebody will actually be using this on your application so you can style this how you want but here's the nav bar we are going to register and on the register I'm going to put Brett that's my name brett6 at gmail .com as my email and the password I'm gonna do is one two three four five six so if we click submit we got a law against successful welcome so for now we are redirected automatically to the login page we are going to check our database our database does show bretts6 gmail.com with the hashed password hashing it out so it's protected even more we are going to go back to the front end and now we are going to log in with brett6 gmail.com password one two three four five six we are going to log in and we are taken directly to the dashboard and if we refresh the page it says hybrid so other than that that is how you can create and very effective mirn stack with the register and login function that uses Json web token uses bcrypt uses react hot toast uses use context state effect use effect a bunch of hooks this was a really really long tutorial but I hope you stuck through it there's a lot of valuable things in there and if you do have any trouble with any of these Concepts you can go back to this video there is timestamps below if you're even having more trouble there's plenty of documentations you could leave a comment for me I'll try to get back within 24 hours um but other than that thank you for staying for the whole video thank you for listening to me it'll be it'll be meaning the world to me if you guys could subscribe and also hit that like button so it can motivate me to make even more videos but other than that good luck with everything and happy coding

Channel: Brett Westwood - Software Engineer

Views: 38,985

Keywords: MERN Stack, Full Stack web development, ReactJS, MongoDB, Express, Bcrypt, JWT, JSONWebtoken, node.js, javascript, full stack tutorial, front-end development, back-end development, web development tutorial, user authentication, user authorization, reactjs tutorial, javascript tutorial, MERN Stack tutorial, Full Stack Web Development Step by Step

Id: XPC81RWOItI

Length: 110min 3sec (6603 seconds)

Published: Sat Apr 22 2023