Learn MERN by Building a Subscription App - Part 1

hello everybody and welcome back to the channel in this video i thought of doing something a little bit different typically on my channel i have videos about specific technology stacks and we go ahead and try to learn these technology stacks however in this video what i thought of doing is building a full stack application so we can combine our knowledge into a real production-ready application and this is more like the real world and so that is exactly what we're going to be doing with this app over here so this app is a fully pledged subscription application so what you do here is you subscribe on a monthly basis so you pay us money on a monthly basis to get specific articles and these articles are meant to feed your mind so so you know they're kind of like success articles and they help you grow as a person so that's exactly what we are going to be building so let's actually go through kind of a tour of what we're going to be building the application on the surface might be really simple but it's actually relatively complex and you're going to learn a lot as you go through this video so let's go ahead and let's do that so right now this is the landing page and this is exactly what we see so we see a login or a sign up page all right awesome so of course we're going to build this landing page now what we want to do is we want to sign up because we don't have an account yet so let's go ahead and click sign up we get this modal let me just zoom in on the modal here just in case you guys don't see it well so over here you have this modal and if you try to sign up with you know invalid credentials we have this error handling system so you can see here that you know if we have an invalid email if i were to put you know some invalid email as well as a password we get that error now if i were to let's just change this to a meaningful email like hardblath hotmail.com and then if i were to go ahead and change this maybe to a password that is very short if i were to try to sign up we get another error and this error is actually handled inside of our back end and it's relayed to us inside of our front end so let's actually go ahead and let's put a meaningful password that is you know greater than five characters long and now once we sign up and let me just zoom out of here a bit so once we sign up we get redirected to this page right over here so this shows us all of our articles now right now as soon as you sign up you don't have any plans so you got redirected to this page so you don't have any plans and then well it redirects us to buy a plan so we're going to go ahead and now you can see the different uh different you know types of plans that we can get we can get a premium plan we can get a standard plan we can do a basic plan again let me zoom in here for you guys a bit this kind of looks kind of stale but i i don't really want to focus on the css you guys get the point you guys can make this a lot prettier and actually include the the stuff that you would get at basic premiere in standard so basically the premise of this is you buy a plan and then you get access to articles so there are premium articles there's also standard articles and then there's basic articles if you order the premium package you get every single article whether it's standard or basic if you get the standard package you get all the standard articles and the basic articles but not the premium and i'm assuming you guys know what you'll get with the basics just the basic articles so let's say i'm gonna go ahead i'm gonna buy the standard plan this is gonna be ten dollars a month so i'm gonna go ahead and press buy now and then what this does is it actually redirects us to a real life and this is absolutely true uh um uh payout so this is this is ours our payout session and we can go ahead and enter our credentials so over here this is eight this is in test mode so we can just add some test some test credit card so four two four two four two is a default uh credit card for stripe is and that's the thing that we're using and let's just do two two two two two then over here we can do lathe harb let's add a postal code of this i think that will work and then now what we can do is we can subscribe to this plan so once we subscribe to this plan everything is all fine now we get to see our articles how amazing is that so now you can see here you know should you buy a house in greece i don't know if this is greece or not but i'm assuming it's grease based on previous pictures that i've seen and over here we have another article about you know how to afford an expensive super dream car you know amazing articles that you would definitely want to pay 10 a month for that's that's the premise of what i'm getting at here but that's terrific so this is exactly what we're going to be building so we're going to be building an authentication system we're also going to be building you know how we can handle payments subscription payments how we can show different people different things depending on their payment so this is going to be a full stack application and we'll talk about the stack exactly in the next section but for now i just wanted to give you a quick little tour now one other thing is that of course you can log out let me just zoom in here you can see here that we have this log out option in our nav now i'm going to zoom right out so if you do log out notice that once i log out that portion of the nav is completely gone and if i try to go back to the articles page and this is this is the page where we have our articles and we click on articles you can see here it doesn't allow us because we're not logged in we need to be logged in to do that so again we can either sign up or log in let's go back over here i'm already forgetting the email that i used i think it was this hotmail.com and of course we can go ahead here and log right back in because we should see our articles then remember this is our plan if however i were to log out and sign up for another one um let's just say lathe or you know what let's just say somebody a lot cooler than lathe lebron james at hotmail.com and let's just give this a password of password so lebron just signed up now you can see that he doesn't have a plan so even though he's authenticated and uh the other person had a plan we know that this person doesn't have a plan so he can go ahead and buy a plan and he can let's say by the premium plan because he's lebron james you can afford it and then let's go here let's enter some test data let's go here i'm pretty sure that won't work let's do four two four two four two two two two two two two two two you can say lebron and this is in test mode so none of this information is is real um let's just do this let's go ahead and subscribe here and once lebron subscribes you can see now he gets an extra article so happiness is an illusion so don't pursue it i don't know that's just some deep you know deep article that deep title of an article that i thought of i don't know if it's true or not you know so don't take my word for it but the premise is you get articles the more the more you pay you get more articles i'm not saying the articles are good they're actually pretty terrible probably okay so this is what we are going to be building and let's just talk about exactly how we're going to be building this and let's do that in the next section in the last section we looked at exactly what we're going to be building in this section we're going to look at the tools that we're going to utilize to build this app now this is going to be a full stack application and i do expect you to know the basics of how to build full stack application so i do expect you to know what a front end is what the purpose of a back end is as well as a little bit about databases you don't have to be experts but i do expect you to know this now what we're going to be doing is we're going to be building a mirn application so mirn essentially is an abbreviation for a bunch of different tools that we can utilize to build full stack applications so for the front end we're going to be using react this is by far one of the most popular front-end libraries for building web applications and so that is exactly what we're going to be doing we're going to be building react and i do expect you to know the at least the basics of react how to utilize react so you know components you know routers i do expect you to know a little bit about react now for the backend we're going to be utilizing node and express now express is a is a library that's built on top of node and it allows us to create these apis that we're going to utilize to interact with our front end for this i do expect you to know at least the basics of what an api is you don't have to know exactly how to utilize express but understand what an api is and how to utilize it and then lastly we're going to be using mongodb as our database i don't think you need any database knowledge for this because databases are relatively simple to understand in the beginning so they're just the places where we're going to be storing our data so storing and retrieving data so you don't really need to know a lot about mongodb to take this course but this is the mern stack because we're using mongodb for our database so m e and n are for express and node and then r is for react so this is the mirn stack and we can use these technologies to build full stack applications now here's the thing i'm also going to sprinkle in some other technologies that we're going to be utilizing we're not going to be utilizing javascript for this course at all instead we're going to be utilizing typescript typescript is just the way of the modern web at the moment and almost every new application will be utilized in typescript so if you don't know typescript this is going to be a good opportunity to understand it and learn it and i don't expect you to understand typescript when we utilize typescript things i'll try to explain it in as much detail as possible just so i can show you exactly what's going on but this could be very good for you guys because typescript is just the way that the modern web is going so we're going to be utilizing typescript and then we're going to be utilizing this wonderful technology called stripe so stripe is actually a multi-billion dollar company anytime you probably purchase something online you're giving a little bit to stripe this is a great company for adding that that payment session that we just saw and it's really just it deals with everything payment so we're going to be utilizing stripe to get that subscription payment plan inside of our application so that is the main stack there's also going to be a little bit of small libraries here and there but they're not really worth mentioning all right so that is the stack and let's just get right into coding let's get started with building our application now the first thing that we need to do in order to do this is to create a directory where our application code is gonna live so what i'm going to do is i'm going to go to desktop and i'm going to create a new folder and you can call this folder whatever it is that you want however this is the folder that we're going to be utilizing to build our application now i already did this it is called sub app but if you don't have one go ahead and create a directory for your application this is where the client the react app is going to live as well as the express node application which is going to be our server so the next step is we're going to go ahead and we're going to open up our terminal or our command prompt if you're on uh windows and then we're going to move into that directory so you're going to move into your desktop if you have your directory in your desktop directory and then you're going to move into that app directory and then you're going to execute a command to create your react application and in order to do this you need to have node installed so i'm assuming you have node installed if you don't go ahead to the node landing page and download it it's a relatively easy download so in order to create your client which is your react app we're going to do npx create react app so we're going to do mpx create react app but we also have to specify that we are going to be utilizing typescript inside of this react application so just to specify that we're going to say dash dash template and then we're going to say typescript and then we're going to call our react app whatever name we want well i'm going to give it just a name of client so go ahead and execute this command i already did so i'm not going to execute it again but what this should create is a so what it should create is a directory called the client inside of this sub app directory and this is going to be well our client so let's actually go ahead over here and let's open up vs code or whatever text editor you choose i highly recommend vs code let's go open and then let's go to our desktop and then let's find our sub app and now let's go ahead and open that up and you can see here now we have this client so we have this client and this is again our react application and it is built in typescript so if i were to zoom in here a little bit usually this would be app.js or jsx with typescript it is dot tsx all the time standing for well typescript so right now this seems like just normal javascript code and that's that's completely fine javascript is is or typescript is a superset of javascript so this is actually completely fine but you know there's additional superpowers that we're going to be utilizing with typescript so yeah so that's our client now now that we got that up and running let's actually build out that hero that we saw over here so let's go to our landing page so let's go to our landing page or you know what we can just log out let's log out and let's just quickly build this hero that we see so this is going to be relatively simple this is just to get our hands dirty with react let's get our hands dirty and start coding out our application right now we created our client and the first thing that i want to do is i'm going to open up my integrated terminal and i'm going to move into that client directory so i'm going to do cd client and then i'm going to do an npm run start in order to start up my react application so let's go ahead and do that let's just wait a little bit here so we can wait patiently and there we go we should see our react app is well at least well now it's up and running awesome you can see here that our source code is the app.tsx which is awesome okay so what do we want to do at this point well right now i think it'd be nice to first work on the landing page of our application the landing page is made up of two components remember in react everything is really split up into components so right here at the very top you might not be able to see it but we have this nav bar component you can see here if i were to just quickly zoom in you can see here we have home that's really the only option so that is what we are going to create we're going to need to create this nav bar component and then over here we're going to have to create this hero so let's begin with the nav bar component this is going to be probably the easier one and then over here this is going to be a little bit harder but still relatively easy so let's begin with the nav bar component so the first thing that we need to do is go to our app.tsx let's close this down we don't need that anymore and let's just zoom in a little bit and let's just get rid of everything inside of the header so we're gonna get every er get rid of everything inside of the header including the header as well and so now what we're gonna do is we're gonna build out the nav component now of course we can build this out inside of the app.tsx but that's not very organized so what we're gonna do instead is go to the source directory and what we're going to do is we're going to create a components directory so we're going to create a components directory and then in here we're going to create another directory called nav because we're going to have a nav component and then inside of the nav component we're going to create a file called nav dot tsx so over here now what we can do is create our function based component so we can say something like navbar is equal to an arrow function and then what we can do here is very simply just return and just for now let's just return a nav element that says home inside so very very simple and then let's go all the way in the bottom over here and let's just do an export default nav bar all right cool so over here now what we can do is we can go inside of this div and we can do navbar and you as you can see as you start typing it a cool thing is that it's going to auto import it for us so you can see here it auto imported and we can close off this component and if you were to refresh you see here that we have our nav bar so you can see here we have it now it's all centered in the middle um probably not all too great and the reason for this is because of this class over here so let's just completely get rid of this class and then as also let's also go to our css and just get rid of all of these styles the app.css all right so now over here you can see now it's in the left corner i'm not going to zoom in because it's not very interesting okay cool so now let's go ahead and of course we want to create a component like this now how are we going to do that well there's multiple approaches we can build out this component and style it ourselves but i think a better approach for us at the moment is to use a library to create our components now there's multiple different libraries out there for building out react components and they're really just pre-built react components for example there's material ui um you know there's there's a bunch honestly off the top of my head i can't really think of other ones other than material ui or the one that we're going to be using and that is react to bootstrap so we're going to be utilizing react bootstrap in order to build out a lot of our different components so for example if i need an alert you can see here that we can get this right over here this ui with this code right here we have this alert component that we can import from react to bootstrap and we get an li like this now what we want is a nav bar so what we can do is we can go to the nav section and i would like a nav bar that kind of looks a little something like this and what i would need to do is import these things over here just copy these styles and i would be able to do that so let's go ahead and let's install react to bootstrap now in order to install react bootstrap let's go to the react bootstrap landing page and then we're going to go to get started and then what we're going to do here is we're going to do this command we're going to do an npm install react bootstrap so let's just copy that we're not going to install bootstrap itself because we're going to use a cdn for this but we're going to just utilize react bootstrap so let's go here and let's go to our terminal and let's open up a new terminal window let's make sure that we're inside of our client directory and let's just do an npm install react to bootstrap awesome let's just wait okay so now what we can do as we wait we can go to our nav component and then we can write out this code so if you go back to what we had here we can write out code that is similar to this so we can copy this but in case you guys are not inside of the documentation i'm just going to go ahead and type it out so what we're going to do is we're going to we're going to get a few things from this react bootstrap what am i doing here not const import so we're going to get a few things from this react bootstrap library that we just installed and remember this is going to give us a bunch of components so we're going to use the navbar component we're going to take the nav item component and we're also going to ask for the nav link components and there we go so nav4 nav item and nav link now right right away we have an issue and you can see here that it's yelling at us so if i were to hover over it you can see here that typescript is telling us that hey there's import declaration errors now the issue is right now we're importing a component called navbar and now our own component is called navbar so maybe we can just fix this by simply just calling this nav instead so we can just call this nav instead of nav bar and now we don't have any issues all right cool so now what we can do is let's go here and let's say nav bar and then we're gonna have a nav item so a nav item and then inside of this nav item we're gonna have a nav link so we're gonna have a nav link and then inside of this nav link we're just gonna have home so we're just gonna have home and that's pretty much it for now and that's really all we need so now what we can do is let's go back to our page and if i were to refresh you can see that it's not really looking quite right it's not really looking any different and the reason for this is that yes we imported and we installed react bootstrap but what this does is give us a bunch of components with css classes what we also need to do is import in those css classes and we get that from bootstrap itself so what we can do here is go to get started now we can either install bootstrap and then add it inside of our css or what we can do is very simply use the css cdn so we can basically copy this link right over here then we can go to our public index.html and then right in here what we can do is we can paste in that link so let's go ahead and let's paste that in and then now you can see here it looks a little bit different you can see that there's a little bit of padding you know it just looks different so just take my word for it but now it works because remember with react bootstrap right now what we're getting so over here with the react bootstrap these are just a bunch of pre-built component with css classes that conform to the bootstrap library so that's good that's exactly what we're getting with this however we need those classes those bootstrap classes and we can get that by putting the cdn inside of our index.html i hope that makes sense all right so that is the nav bar now the next step is to create the hero so let's go over here inside of our client let's close the public let's go here and let's create another directory and we want to create another directory called hero with a file inside of it called hero.tsx so what i'm going to do is i'm going to click on the file even though we're creating a directory with a file inside it so i'm going to click on the file and in order to create a directory with a file inside it what we can do is we can do hero and then we can do uh slash hero dot tsx what this is gonna do is gonna create a hero directory and inside of that directory is going to create this file so you can see that's exactly what happened so let's go to our nav and let's just copy everything we have here and let's just paste that into our hero.ts and let's just get rid of this for now let's call this hero and let's call this a just have a div and we can export the hero all right cool that's awesome so now what we can do is right over here let's actually go ahead and let's import hero and put it inside of our app so now we have should have the navbar and we should also have that hero i go yeah we do have the hero but there's no text inside it now there is okay cool that is terrific so of course now we need to make it look like what we had before or what we have over here and so in order to do that let's go back over here and let's think about the stuff that we're going to utilize in order to make this hero so to do this we're going to utilize of course react bootstrap as well as we're going to utilize some of our own components that we are going to style so what we're going to need to do is we're going to need to style our own components and of course what we can do is just have divs with class names and then put them inside of our css but what i prefer to utilize is something called react styled components and it's really simple if you don't know what it is it's really really simple to understand and learn why is this on yahoo let's go let's go to google let's go here react styled components let's go here and this is a terrific library for creating styled components so for example let me just quickly zoom in here let's say you want to create an h1 that has a font size of 1.5 ms you know a text align center and a little this color what you can do is you can do something like this you can do this syntax zoom out here you can do this syntax and then what you can do is you can get this title and treat it like a component and i really like that so that's exactly what we're going to be utilizing to style our own custom components all right cool so in order to do this what we have to do is we have to go to our terminal and we need to do another installation now make sure that you're in your client directory for this and what we're going to do is we're going to import or we're going to install styled components so we're going to npm install styled components and we get this from from the docs from the installation docs right over here so styled components okay all right cool so now what we're going to do is we're going to utilize styled components so the first thing that i want to do is i want to create a hero component that is going to encompass our whole hero so let's go here and what we're going to do in order to create that styled component we have to import styled from styled components so styled components now you're you might be seeing this error actually most of you guys will be seeing this error and the reason for this is because we are utilizing typescript if we weren't utilizing typescript this would be completely fine so the issue that's happening here is that for each library that we install we also have to install the types if they're not associated with the library already and in this case the types aren't associated with this library so we need to install these types as well so let's go over here to our terminal again and let's make sure that we're inside of our client now in order to install the types we could just simply do mpm install and then the library but before the library we do at types and then slash and that way we get the types of this um of this library okay there we go cool so now it's working all fine and dandy all right so let's actually utilize this react styled components so what we're going to do here is we're going to create the hero so let's just call this the hero component so we're going to say the hero component is equal to styled and then we do dot and then over here so we do styled dot and then we do whatever html element we want this component to be in this case i want this component to be a header so we want it to be a header now it can be whatever it could be a p a p tag or it could be an h1 it could be whatever and what's cool about typescript if you put something that doesn't really exist it yells at you that's that's exactly why we installed those types so now we can just say dot header and then now we created this element with a header but of course we want to add css to it so now what we can do is we can do back and then inside of the backticks we can add our css how cool is that so in here what we're going to do is we're going to add you know for example let's just add a background color just so we can see how this works so background color we will remove this later but let's just do pink and now what we can do is instead of utilizing this div we can utilize this header component and we can save that and if you were to go to here you can see that now it is nice and styled all right cool and that's why i really like this this is a really cool um library to create these styled components so of course i don't want a pink background but let's give it some padding on the top so let's give it five ramps on the top zero from the left and right let's also let's also give it a height of 60 vh and then just so we can really see it let's go over here and also give it that background color again of the lovely color of pink all right cool so this is this is awesome this is exactly what i want except i want this image right over here to be uh to be uh the background of this hero not not the pink so in order to do this what we can do is we can go to a very popular website called unsplash and that's exactly where i grabbed this image and you can grab whatever image you want um preferably an image that is is you know longer that is wider than it is uh uh longer i guess or you know wider than it is tall or whatever uh you can pick whatever one you want i'm trying to quickly figure out where i found this image i might not be able to so what i'm going to do is i'm going to go to this page and i am probably not even going to be able to inspect it because it's safari you know what let's just pick a random image from here so let's let's find a good image and we'll just utilize that so good image what's a nice image for telling people how successful let's just write here success or something okay oh this looks really cool let's let's let's pick let's pick this one so let's click on this image let's right click it and then let's do copy image address and so what we want to do is we want the background color to be this image right over here and so let's go here and then what we can do here instead of background image or background color we can simply do background image and then we can say url and we can say that the url is the url that we just pasted and so now what we can do is well you know what it's looking kind of decent doesn't look that bad we can go over here to maybe fix some of the alignment we can just do background size you can say cover so we can fix that i would like it to be a little bit more to the top so let's do a background alignment alignment and let's do top or maybe let's do bottom never really know how this works background alignment is not really working the way that i wanted to background let's go over here to [Music] background alignment just to see how if i'm doing it correctly or not so it says here you can do oh it's oh it's called background position not alignment oh okay so let's let's copy this let's do background position center and there we go okay this looks pretty good honestly whatever this looks fine okay cool so we got that part done let's also get rid of this this extra stuff all right cool so i like this so far maybe later on we can change the image if if i don't like it i actually kind of prefer this one a little bit better i'll probably eventually change it to this one once i can figure out what the url of that image is i just really don't know how to inspect things inside of safari i'm right-clicking and i just never use safari but i'll probably change it to that image i don't really like this one to be particular but that's okay we'll we'll work with it for now okay so cool so now we have created our wonderful uh hero component now in here what we're gonna do is we're gonna add a container because what we want to do is we want to have our content more or less centered right over here so what we can do is from react bootstrap we can import container so we can over here go react bootstrap and we can import container just to quickly show you what this does i'm just going to add some gibberish and if you look closely if i zoom in here you can see the gibberish right here but if i were to put this inside of a container that container that we got from react bootstrap you can see that now it's a little bit more to the right so so the container is just it it makes sure that everything is not uh um that is that it's not you know all the way to the left it's kind of more in the center all right cool so the next thing that i want to add is the header so so right over here uh if i were to go to this we have this really cool kind of header right over here that says you know feed your mind as well as the success so i want to create this right now so i'm going to call this a header container so let's go over to our our code and let's do header container and then we're going to do that's equal to styled and then in here we're going to give this a little bit of styling so let's give it a background color and this is going to be a green background color let's give it an rgb of 5 1 4 8 and then 1 1 12. let's also give it a padding of three rims we'll also give it a color of white and then we're gonna give it a width of 32.5 rams so now what we can do is we can actually utilize this so let's go here and let's go in here and let's actually put that in there so now we get something that completely fails i wonder why that is oh of course we have to specify exactly what this is so we can say that this is a div all right awesome so we have that in there but of course now we want the actual content in here rather than um rather than just an empty random green box so let's add our content so of course we want the header that's the first thing that we want or the heading so we're gonna say something like head dink and that's gonna be equal to styled that's gonna be an h1 now we're very simply all we're gonna do is we're gonna give it a font size of five rams so let's go here and let's get rid of that and what we're gonna say in here is feed your mind with the best all right okay it's looking a little bit closer to what we have here all right so now we want the subheading so let's go ahead and let's create another component called sub heading and that's going to be a style dot and we're going to give this an h3 and over here let's give it a margin of one ram top and top and bottom and then zero left and right and then we're going to give it a font weight of 400. save that let's go here and let's create this subheading now inside of this subheading we're going to have some stuff in here so we're going to say you know grow learn learn and become more successful successful by reading some of the top articles by highly reputable individuals in dvd how do you spell that individuals so let's save that and now we get this all right cool that's awesome and it's actually kind of looking quite decent with the background actually so the last thing that we need to create are these buttons so these buttons right over here uh but this is gonna be um this is gonna be a little bit tougher because of course when you click these buttons they you have modals that appear so let's actually take a break and let's do that in the next section all right my good friends in this section we're going to create the buttons that are going to trigger the modal to appear so for example over here when we click the login we get the login modal when we click sign up we got the signup model so this is going to be actually relatively easy mainly because of the react bootstrap direct bootstrap library that we installed if we were to go to components you can scroll all the way down go to modal then what we can see here is we can you can see the markup for creating a modal so you can see here launch demo model and that's pretty much exactly what we want so let's go ahead and let's kind of copy uh this code into our application to create the modal so let's go over here and we're going to create another component so we're going to go over here we're going to say modal and then slash modal dot tsx then we're gonna go ahead and open that up and let's go ahead and in here we're gonna create our modal of course so we can call this something like a const modal component because we're going to import something called modal from react bootstrap and then we can just say that this is an arrow function [Music] and we'll return something a little bit later okay cool and then let's also go ahead here and let's just do an export default of modal component modal oh my goodness modal component please that's this all right so in here what we're going to need to do is we're going to need to import some things from react bootstrap so let's go over here and we're going to from react bootstrap we're going to import uh from react bootstrap we're going to import modal so there's a component called modal we're also going to import a component called button input group as well so inside of the modal we have to think about exactly what we're going to be adding we're going to be adding these input forms so email and password for both login and sign up and so we need to create we need to get the components to create those as well so we're going to say input group and then we're going to say form control so those are the the components that we're going to take a look at uh just just for references these ones again are going to be used to create the input you can always go to the documentation over here search for inputs or something like that uh or maybe search for form let's see at forms and you can see how they do things over here so they have a forum group and then they also have inputs as well all right cool so in here what we're going to very very simply do is we're going to go ahead and we are going to return and what we're going to return is a fragment so a fragment is basically something it's basically just jsx that is an element that doesn't really exist so if you know react you need to have one root uh one root uh element and then everything else nested inside of it however sometimes you might want to have you know two elements side by side and you don't want to add like a real element like a div so instead what you can use is a fragment to kind of get around this this uh this rule that we have to follow all right so in here the first thing that we're going to add is the button now the button is the thing that we are going to click in order for the modal to appear so we're going to go over here we're going to say button and for now we'll just leave the button as is we can also give it some props we can give it like size of whatever size we want but for now we'll just leave it as is and for now we'll just say sign up even though we're gonna make this dynamic to be either sign up or log in a little bit later so that's the button and then what we're going to do here is we're going to utilize that modal component all right so we're going to have that modal component now in here we can have whatever it is that we want and so now what we need to do is when we click this button what we want to do is we want to actually show this modal component so what we can do here is we can actually have some state so we can do import from react and we can import use date from react so we can say use state and then right over here what we can have so right here we can have const show and then set show so this is whether we want to either show or not show the component and that could be equal to use state and initially we can set this as false because we don't want to show our component initially we can do we can have also some handlers over here called handle close handle show so over here we can have handle close and then this what it can do is it can basically uh set show to uh false and then over here we can have another which is handle show and then this can set show to true so you can use these handlers if you want to um you know close or open this model all right so now what we want to do is when we click this button so on click what we want to do so on click what we want to do is we want to invoke handle show because we want to show the modal so let's go here handle show and then over here what we need to do is we need to pass in that show prop so this is the built-in prop from the react bootstrap modal component and this is going to be show which is going to either be a boolean or or true or false boolean and then we're going to say also we're going to pass in an on hide and then on hide we're going to do handle close this is basically just based off the documentation and i think that's pretty much really all we need in order to get our mortal up and running so let's actually give it a go let's go to our hero and then inside of our hero we're gonna have that modal component so let's go inside of the subheading and then inside of this subheading what we want to do is we want to display that modal component so let's go ahead modal component and let's just pretty much close it off so now if we were to go here and let's do a quick refresh you can see here that we get this button and we were to click it we get this modal so it works and we can actually click away and everything seems fine and dandy alright cool the only issue is the styling is a little bit terrible so let's fix the styling so let's go to our modal and inside of the modal of course we want to fix the styling because the styling just completely sucks so inside of this modal component let's create a modal header and what this modal header basically is is uh just just well it's a header it's going to tell us exactly what this modal is for so let's go here and to utilize the modal header we can use that exact same modal component and then we do just do dot header all right awesome and then in here we can do another thing another thing we can get from modal and that's the modal title and over here we can simply say sign up and now if we were to open this up you can see it looks a lot better all right just give me a quick second guys i have to charge my sorry my laptop is about to die i have to go ahead and charge it and all right there we go it's charged awesome sorry about that hopefully you guys enjoyed that all right cool so now we have this sign up so that's the header now let's create the body so as you can imagine to create the body we're going to do modal.body and again if this is all confusing this is just really based off of the react bootstrap documentation so we're going to go ahead do modal.body and then in here inside of the body we are going to want to have this this this input right over here so uh let's go ahead and based on the documentation what we need to do is utilize input group so we're going to say input group close that off and then we're going to do in here input group text let's go in here input group dot text all right close that off and then in here the first thing we're gonna have is the email so we're gonna have the email in here so save that and then of course what we want is we want that form so we can say form control for this and then we can close this off and we can say that this is of type email so we can say type email all right so if we were to save this and were to click on this again you can see this is exactly what we get now we can copy this exact thing for the password so we can say here type password and then we can say that this input group text is password all right cool so looks kind of hideous to be quite honest so let's give it a little bit of margin so let's go here to the input group let's give it a class we're going to give it a margin bottom of 3 m b 3 which signifies a a margin bottom of 3. and let's do that that exact same thing over here okay that looks a lot better to me it's looking exactly like what we had before so we're done with the body and now what we want to do is we want to create the footer so let's go here and let's create this footer all right and then inside of this footer we're going to have a button so a button component and we're going to give this button component a variant of a secondary and this is basically just some styling that bootstrap has inherently so we're going to give it secondary and then what we're going to do is we're going to say that this is a close button so on click what we want to do is very simply just handle close so we want to call that handle close function now let's go over here and let's create another button and then in this button we're going to call this primary this button is called primary and this button for now we're not going to have any on click we're going to create that a little bit later but right now for here we're going to call this sign up sign up or honestly whatever it is is it whether it's login or sign up all right so okay there we go it's looking kind of good actually so you can see here that it's looking really nice so now what we need is we need another button for the log in process and to be quite honest uh i don't want to create another model i think because the login and the uh sign up modals are they contain both just the email and the password what we can do is just very simply pass some data in and it can just dynamically change whether it's it's it's uh login or uh logout or login or sign up so what we can do is we can actually reuse this by passing in some props and what i mean by that is what we can do is we can go to this hero that's rendering this component and then inside of this hero we can pass some data inside of it telling the component the modal component exactly what it is that we want so for example maybe we want to have pass in the text so we want to pass in the text and we want this to be we want this to be sign up whereas if i were to create this other component i'm going to want this to be login so login so this is what we want to do and then of course inside of our model we want to get this text and then render dynamically now the only issue is right now if this was plain old javascript it would be completely fine however this is not javascript of course we're using typescript for this and so what we need to do is we need to define the prop types that we're going to get inside of our modal and that's exactly why we're getting this error over here so if i were to actually save this our whole application would crash because we would we're having some typescript issues so we need to define the props that we're going to get inside of this modal component now the best way to define the props is by using an interface so you can say something like modal props and then we can say that this is an object and then the props we're gonna have text and then this text is gonna be a string so in here what we can do is we can define that well we're going to get back some these props these props which is text string from the hero component and you can see that now it's completely happy and now over here i can just take the text right out so over here i can simply utilize the text and then maybe also over here i can utilize this text so i think that's pretty much it so now as you can see if i were to refresh this i'm getting two signups for some reason let's refresh that refresh refresh refresh i don't think refreshing is gonna okay also over here we hardcored sign up so let's save that all right so now you can see here if i were to just zoom in quickly we have sign up as well as login all right cool now another thing i i i want to do is i want to of course maybe change the color of this a little bit uh the color is quite small so let's go over here let's pass in some more data so we're going to say the variant for this or they say the color was small the color is just they're both primary and i don't want them to be primary so the first variance is going to be primary and then the second variant is going to be secondary and now what we can do is we could save that we need to of course here define that we're going to be passing in some variants now what we can do is we can define that this is going to be a string but really this is just going to be a particular set of strings so it's either going to be primary secondary or whatever real bootstrap classes except we can't put any gibberish in here so actually might be good to specifically define what the strings are going to be so we can say here that this is going to be primary or secondary and if you want to use other other different types of variants you can of course pass them in over here so now what we can do is we can get that variant and then in here inside of the button or inside of this button right here we can simply say variant is equal to the variant that is passed so variant is equal to variant that is passed and just to show you how like significant this is over here uh what we can do if if i were to type in any other string it would yell at me eventually yes right here so you can see here it's yelling at me it's saying that no this is not a valid variant all right so if you were to save this we have this uh honestly this isn't really beautiful so what we can do here is instead call this danger danger is what i wanted not secondary so save that now it's going to yell at us because that's not an acceptable variance so we can say here or danger so let's go ahead and save that and if i were if you were to refresh okay cool and let's go ahead and let's just make the size of this a little bit bigger so let's go here let's say size large just to make it a little bit bigger and of course what i want to do is i want to add a little bit of margin because they're just cramped up one next to one another so let's add some margin in here so what we can do is very simply just add some styles we'll just do inline styles for this you can just do margin right and we can just say one ram save that and okay this is looking kind of good maybe we can also add some some some padding maybe i don't know what could this be we can say something like uh let's say one ram top and bottom and then four rams left and right let's see this is just okay that's humongous let's do 0.75 and then let's do three ramps here that's still kind of big let's maybe make it a little bit smaller okay that looks really good to me actually all right cool so now you can see here that now we have the sign up for this and then over here we have log in for this all right cool this is terrific and that is the modals and now we're pretty much done our landing page so our landing page is up and running now the next step is actually to make things functional now that we got our landing page up and running it's working let's start getting into some of the more fun and challenging bits of this application specifically what we're going to be doing is we're going to be really adding authentication to our application because right now there is no authentication of course when you click on this it asks you for the email password but when you click on sign up it does nothing so let's quickly talk about how we are going to be implementing authentication so the authentication logic is not going to live in the front end but rather it's going to live in the back end as a quick refresher what happens is your client which is your front end is going to make a request to your server which is your back end the server is going to process that request you know interact with the database if need be and then it's going to send back a response to the client and this is exactly what we're going to be doing with our application our client is going to send a request to our server telling it hey this user wants to sign up and specifically it's going to give it to the email and the password the server then is going to perform a little bit of logic and then it's going to return a response to the client so let's actually talk about the logic that the server is going to create or or that we are going to be creating for this specific sign up route so let's go talk about that so the first thing that we need to do is we need to validate the email and the password so the client can go ahead and send us whatever email like whatever formatted email over here so they can send us something like this something let me just zoom in here something right like this that is not really a valid email and also they can give us a password that is extremely short maybe one or two characters short so the first thing that we need to do inside of our server is validate that the email is a really an email and that the password is well of proper length so that's the very first thing that we have to do if this uh step is not passed so this validation step is not passed then we're going to emit all of the other steps and just simply respond to the client saying that hey i cannot create this user i cannot sign up this user the next thing is i don't mind the animations guys i forgot to remove it the next thing is we need to check if the email is not already in use so there could be a person with lathar hotmail.com already inside of our database and is already using our account so we can't duplicate emails we have to make sure that the email is not already in use if the email is in use maybe we send back a response to the client saying that hey this email is already in use you already have an account with this email all right the next step if we pass these two validation steps then what we want to do is we want to hash the password i'll talk about this a little bit in more detail when we actually get to it but you never want to store your password in plain text so for example if you provide me a password of um i don't know cup holder just i'm just looking at a cup holder right now that's the thing that i thought of so if you provide me a password of cup holder i don't want to store that password cup holder inside of my database i want to do something to it you know change it around make it look more like gibberish and then store it inside of my database so then the reason why i want to do that is because you know if my database ever gets breached well at least nobody has the passwords in plain text it's going to be a lot more difficult to figure out what the actual password is so you want to hash the password and then after that we actually want to save the user to the database so we're going to take the email we're going to take the patched password and actually save that in our database and that is going to kind of almost say okay this guy is actually signed up and created an account with our application and then the last thing is we need to send a token back to the client and i'll talk about this step once we get to it it's relatively complex and kind of hard to understand so we'll just leave it as that we're just going to send back a token to the client and this is kind of signifying okay everything is successful so that is the steps uh let's actually work on these two validation steps or probably the more easier ones and then we'll work on the other ones later so this logic is going to live inside of our server so inside of the sub app let's create another directory that's not in the client that's in this root uh portion and then what we're going to do is we're going to create a server directory and so in here what we're going to do is we're going to open up a new terminal window we're going to move into the server and we're going to initialize a node application with npm init dash y all right so now we now that we initialized it let's install some of the dependencies now remember we're going to be creating a express application so let's just do an npm install express so let's go ahead and do that and now we should have inside of our package.json we should have express all right so the next thing that we want to do is we're going to be working with typescript inside of this application again typescript is really the way that the modern web is going so i want you guys to be up to date so we're going to install some dependencies here the first thing that we want to do is install the types for express so we're going to say at types express and then we're going to say add types node as well we're also going to install typescript itself and we're also going to install this package called ts node dev what this is oops i forgot to add the flag we also want to add the flag dash save dash dev because all these are development dependencies okay so let's go ahead and now you can see here we have these development dependencies and i wanted to say here this package is going to allow us to run our typescript application inside of development all right cool so now that we got that out of the way let's create a source directory so over here we're going to create a source directory and this source directory is where our code is going to live so this is where all the typescript server logic is going to be all right so in here let's create an index dot ts file so not js ts file and this is where our express app is going to live this is going to be the root of our express app so let's go ahead and let's start you know working with express so we're going to do import express from express and then over here what we're going to do is we're going to create a express app so to do that we can say const app is equal to express and invoke it and then the last thing that we need to do is we need to listen at a particular port so we can do app.listen and then let's listen to poor um let's just deport 5000 or maybe even 5001. you know what let's do 8 000. 880 is actually a very popular one okay that was the last one sorry about that and then we're gonna have a call back over here we can simply say console.log and then we can say you know now listening let's get rid of this and this why not now listening to port 5000 or 880 that's really all we need so now let's actually try to get this application up and running so in order to do that let's go to our package.json and let's create a new script and this script is going to be so this script is going to be start and then colon dev so we're going to start our application in development mode all right so in order to do this the first thing that we need to do is initialize that this is a typescript project so let's open up our terminal again let's go back to that terminal window let's do clear and what we want to do is we want to do t s c and then init and what this does is it initializes that this is a typescript project you should be able to run this command because you installed this typescript package but if that doesn't work try to install this typescript package globally and then run this command so let's go ahead here let's run that and now what happens here is could not resolve the path init uh let's see here is it typescript dash in it there we go sorry so it's typescript dash init not init and as you can see here it creates a ts config.json file and this is just a file where we can actually configure typescript to look for whatever it is that we want but we need it we need this in order to initialize our project all right cool so that's that's the first thing that we need to do the second thing that i really would like you to install is node one so let's go over here let's do an npm install nodemon and then add the dash uh g flag for uh making everything globally so install this and what this is gonna allow us to do is hot reload our application i already did it so i'm not going to do that all right cool so now that we got that out of the way let's go to our package.json and then in here what we're going to do is we're going to call nodemon because remember normal is going to run and hot reload our application and we're going to say that we want nodemon to watch for every single typescript file that is inside of any directory that is from the root so to do that we can just say that hey any any typescript file that is inside of any directory and it has the extension dot ts so again any typescript file that is in any directory that's exactly what we're saying here so go into any directory look for any files that have the extension.ts and we want you to watch this file and anytime any of these files change we want you to haul reload so that's exactly what we're going to do and then what we're going to do is we're going to execute so once this changes so once once there's code changes over here what we want you to do is we want you to execute ts node and then we want you to re-execute ts node and then we want to specify the root file which is the source.index.ts all right i hope that makes sense let's just kind of quickly go through that again so we want nodemon nodemon remember is going to watch for any changes in any files and of course here we're specifying that we wanted to look for typescript files and then if there's any changes we want it to execute ts node and then over here source.index.ts so just rerun the root application okay so let's go give that a go and now if i were to run npm run start colon dev okay awesome so our application or our server is up and running so now what we can do is we can go to localhost 880. let's go there and you can see if i were to zoom in here you can see we got this if you get this that means everything is fine so what we can do right now is uh go inside of our index dot yes and actually create a route so we can do something like app.get slash and then we can do reqrest so rec is the the request rez is the response so we can do res.send hello world and now if you were to refresh this give it some time we get hello world all right cool so now we know that our server is up and running now let's create our sign up route so instead of creating our routes here inside of this file let's actually create a route file or route folder inside of our source directory so this is where we're going to house most of our routes okay cool and so in here we're going to have an auth.ts route so we're going to go over here we're going to create this off.ts route and then in here we're going to use some very special uh expressed syntax so let's go ahead and let's do it right now so we're going to go in here and we're going to do import we're going to import something called router and we're going to import that from express so from express and then we're going to say so we're going to import well actually you know let's actually go ahead and import express from express so we're going to import express from express and then from uh express we're going to get something called routers we're going to say express dot router we're going to go ahead and invoke this and essentially with this now what we can do is we can create multiple routes for this file and then just export this route out and it should have all those routes for us so we can do an export default and then over here router and then what we can do is we can go in here now and we can just say auth routes and we can get that from the route slash auth so any routes that we create in here with router are going to be exported into our index.ts file right now we're not doing anything with it but later on we're going to configure it so that we utilize those routes okay cool so let's go ahead and save this and now what we want to do is well we want to create a post request for signing up so we can say router dot post and then what we're going to say is well we want to sign up so we want to sign up and then we're going to have an arrow function now let's mark this as async because well it's going to be asynchronous later on because we're going to be interacting with our database so let's just do that right away so remember the first thing that we want to do is we want to validate our email and password but before we do that let's just make sure that this route is actually going to be sending back some data and it's actually connected to our root application so over here let's do request and let's just very simply say res.send res.send and we can just say sign up route sign up route now in order to configure these auth routes inside of our root application what we can do is utilize app.use so app.use and then over here what we can do is specify the root path so the root path and we can say something like slash auth and then we can specify all of the routes so we can go in here and we can specify that so if you were to save this now what we can do is we can go to slash auth and then slash sign up and we should get back sign up route so let's actually give that a go and one thing that i want to note is that this is a post request so we actually can't do that inside of the browser we're going to have to utilize a tool a very popular tool that i always use is postman when i'm testing my application and so i highly recommend a tool like this if you want to you know test out your your server side application so let's go ahead here and uh it's a relatively easy download honestly just just it's it's very simple so go ahead install it if you can and then now what you can do is you can go to you can go to over here and let's let's actually do this from scratch let's let's delete this and what i'm going to do is i'm going to create a new project a new collection and i'm going to rename this to sub app sub app let me zoom in here for you guys because i'm worried that this is a little too small so i created this these are some other projects that i have but i have this new project called sub-app and then what i'm going to do is i'm going to add a request and i'm going to change this to a post request and so i'm going to copy this link over here so remember it's going to be localhost 880 and then we're gonna do slash then we're gonna do slash off slash sign up so if you were to hit this route let's go ahead and send this off we actually get back signed up route so now we know that it is configured correctly so now what we want to do is of course we want to validate our users so let's take a quick break and we'll do that in the next section now that that is working let's go ahead and let's work on these steps of the sign up route so validating the email the password and then checking if the email is not already in use so the thing is is we're gonna need to somehow get the uh the email and the password from the client to our server and typically this is going to be sent inside of the request body so what we can do here is we can simply extract out the email as well as the password from the request body so let's go ahead and let's do that so let's go ahead and then over here we're just going to very simply do a res dot send and send back that email as well as that password so we're going to do a rec dot send email password and it's actually better if we use res.json for this case all right so now let's go to our where's postman postman where were you here we go postman let's just give this a quick little save let's close the other ones so whatever save and override save and override oh my goodness how many more of these do i have okay seems like that's it let's just close all of these and so now what we're going to do is we're going to very simply make this request again but this time inside of the body we are going to i'm gonna have to zoom out here apologies so we're gonna have to inside of our body we're going to have to add something let me just zoom out again so we're gonna go over here we're gonna add raw json and then we're going to send the password and the email by having it inside of the body like so so we're going to have json email we can say here lathe hard hotmail.com and then we're gonna say the password is my new password all right let me see if i can zoom in a little bit here okay this is kind of annoying but hey it is what it is maybe we can close this i guess we can't all right so send off this request and right now you can see that we really get nothing back so it seems as though something has failed and if we were to go here it's saying you know we have a type error cannot read property of undefined so the rectal body is actually undefined and in order to actually make this work what we need to do is we need to go over here and then do app dot use and then we need to do express dot json and what that will allow us to do is to utilize the express body from this express application so let's go ahead and let's run this request again and now you can see here that this is how we're going to get the data from our client to our server so this seems like it works completely fine so let's go to auth over here and then over here what we want to do the very first thing that we want to do is we want to validate hey is this an email or is this so is this an actual valid email and then the password you know does it fit within our range we just want our password to be longer than five characters so how are we going to validate if this is a proper email uh well we can actually do that validation right in here so we can do some sort of regex expression so for example let's go to google right now let's see here validate validating email and then just just say javascript okay oh my goodness i hate how this is yahoo by default let's go here let's paste that in and let's go here so we there's you know there's multiple different ways if you go to the stack overflow here it's you know the best way to validate an email you can see here that we can utilize this regular this regex expression you know we can utilize this function over here we can literally copy and paste this and then we can just invoke this function with the email see if it returns true or false you know we could do that but i think actually a better approach is to maybe install a very popular package that is you know known for dealing with uh validating certain things so the package that we're going to be utilizing is going to be express validator so if you were to go to expressvalidator and as per usual for some reason this is yahoo i do not don't know why that is let's go to express validator here and then we're going to utilize this package in order to validate our things so the way that it works is over here we're going to import these two things and then inside of the route in between the actual path and the uh the handler we're going to have you know over here these validation steps so we're going to have something like body and then over here username and we're gonna make sure that this is an email you know what this might make a little bit more sense if we go ahead and just give this a go so let's go and install this so we're gonna do an npm install let's go here let's close this off actually wait this is running so let's move into our server we're gonna do npm install dash dash save express validator let's go ahead and install that all right so in here the first thing that we're going to import so we're going to import body and what this is going to do is it's going to check the body so the request body and then we're also going to get something called validation results so validation results and we're going to get that from express validator so we're going to go ahead and do that now in here so in between the actual path and the handler we're going to add what exactly do we want to validate so the first thing that we want to validate is the email so we have to make sure that inside of the body we have something called email we have something called email and that this email thing is actually an email so it's actually an email so it's the first piece of validation that we want to do now let's just get rid of this now the other piece of validation is i want to validate that inside of the body so inside of the body we have this thing called password and this password thing have to ha it has to have a min length of five characters we can say is length and then over here we can say the minimum length is five characters all right so now over here we've added our two validation steps but this isn't going to throw an error or something if the validation is not complete we actually have to catch the validation with validation results so in order to do that what we can do here is very simply go here and say const and we can say validation errors and we can say that that is equal to validation result and we can pass in the request itself and what this is going to do is it's going to return an array so it's going to return an array of errors so what we can actually do here is check if the validation result is not empty so if there's actually errors inside of this array then what we want to do is we want to throw some sort of error so we can say here validation result and over here it we can say we can call is empty so we can invoke this function is empty or sorry validation errors not validation result validation errors so if validation errors is not empty notice the bank over here then what we want to do is we want to throw some sort of response saying that hey you know something is invalid here so what we can do here is we can simply just get all of the errors from the validation error so we can say validation errors validation errors we can get it as an array and then what we can do is we can we want to throw some sort of response so let's actually map through every single error and this is of course going to be an error and what we're going to do here is we're going to simply return and we're going to return a message saying that hey you know whatever the error.message is so whatever the error.message is and so over here after we get all of these errors we're just going to very simply do a res dot json and we are going to send back those errors for now so let's go ahead and send back those errors okay so let's just give this a quick go let's say i were to give it an invalid email and i were to send this request off you can see here that i get an array of errors let's say i were to also give it a too short of a password now you can see that we have this array of objects we have invalid value and valid value now this doesn't really mean all too much to me so what we can do is we can also give it custom error messages so we can say here with message so we can say here with message we can say that the email is invalid and then over here we can say the password is invalid or the password is too short so remember what's going on here so over here we're catching the errors and then we're getting an array and we're just reformatting the errors so that it sends back an object with a message and whatever that error message is and then we're just sending it back as a response so let's go here let's make this request again and now you can see here that this is more meaningful and now what we can do is if we were to provide it with an actual valid uh valid password let's go here let's make this request again you can see that we actually don't hit this if block and instead we do this all right awesome we completely finished this very first step so now let's move on to step two check if the email is not already used now let's actually think about exactly how we're going to implement this step so what they're going to do is they're going to give us an email and of course we're going to validate that email that is a proper email if we pass this step what we're going to do is get that email and then try to fetch a particular record inside of our database that has that email if we actually get back a record then we want to say that well this email has already been used you can't create an account with this email however if we get nothing back then well we pass this step so the thing is is we need to connect our database to our backend in order to do this and while we need to create a database in the first place because here we're interacting with our database so what what database are we using well we're going to be using mongodb remember we're using the mern stack so the database that we're using is now the mongodb is actually relatively easy to kind of configure and set up in your application all you need to do is go to db atlas and let's go over here so mongodb cloud and over here you can see try mongodb cloud now and so what you can do is you can just go ahead and sign in now if you sign in you should see something like this and you can sign in with google or whatever it is that you want but you should see something like this i went ahead and i signed in with a brand new fresh account so you can see here what what is your goal today build a new application learn mongodb whatever so you can just kind of go through this form let's just say build a new application what type of application are you building uh internet of things i don't know uh what is your preferred language we'll say javascript we can go ahead and finish and then over here we can pick what plan we want do we want the service server list dedicated or shared shared is free so let's create share and then what we want to do is we want to of course provision our cluster so we can utilize whatever cloud provider we want whether it's google cloud or microsoft azure i'm going to use aws just because it's it's just the most popular and then you want to pick a region that's closest to you so if you live in australia australia pick sydney if you're in india you can pick mumbai i think honestly this is the closest one to me so i'm gonna pick this one east yeah this one's definitely the closest one to me so i'm gonna go ahead and you can change your cluster name if you want to you can call this sub app if you want doesn't matter not sun sub app and then you can go ahead and provision your cluster all right so the first thing that it's going to ask you is just for some authentication credentials so you can say your username i'm going to say latharb and i'm going to say that my password is password you know very terrible password whatever so let's go ahead and create this user call password is too weak all right let's see here still too weak all right there we go i don't know if i'll remember that password but hopefully i do okay cool so now what we want to do is we want to create our database so let's go over here and as you can see it's provisioning our cluster so this actually might take a little bit of time it might take one to three minutes to actually implement so i'm going to pause this video and i'll be back when this is all set up now that we got this up and running what we're going to do is we're going to click on connect and then what we're going to want to do is the first thing that we're going to want to do is add your ip you can just pick your current ip for this and then choose a connection method i'm going to say connect to my application and what i'm going to do is i'm going to copy this uri over here so i'm going to copy this uri let's just quickly zoom in here so right here this is how we're going to connect to this specific database so over here this is identifying what the database is and then over here you can see that this is our username and then over here we have to supply it with the password now the password is the password that we set up right over here when we quick started our app so please remember this password all right let's go ahead and let's connect to this database through our actual application so let's go over here and now let's talk about how we're going to connect to our database in order to connect to our mongodb database we're going to be using a very popular package library called mongoose mongoose is an o d m if you're familiar with orms like sequel eyes or type worm mongoose is something for mongodb and it's not at orm it's an odm because with mongodb we deal with documents but it's a way that we can connect to our database add records into our database retrieve records update and delete alright so let's go ahead and let's actually set up mongoose in order to set up mongoose we're going to have to do that inside of our index.ts file now before we do that what i want to do is i want to go to the server and i want to create a dot and file so i'm going to create this dot and file and i'm going to over here say uri i'm going to paste in that uri that we got and i'm going to change the password to the actual password that i created remember for this user right over here so if i remember correctly it was password and then one two three and then exclamation mark if i remember that correctly i hope that's the password but it might not be so that's the uri and this is how we're going to connect to our database so inside of the index.ts file we need to now open up our terminal because we need to install a few packages so let's go over here let's make sure that we're inside what's going on here let's make sure that we're inside of our server directory and the first thing that we're going to install is mongoose so mongoose is the first thing that we're going to install we're also going to install a package called dot env and this is uh going to allow our express application to interpret what's going on with the end file so let's go ahead and let's install both of these packages i'm not sure if we need the types for mongoose if we do we'll we'll know that and we'll have to install it alright so let's go here and let's very simply just do import mongoose from mongoose so we're going to import mongoose from mongoose and we're also going to import so we're going to import dot end from dot end all right awesome so in order to actually read the stuff inside of the end file this is why we're using the end uh the the dot end package and so what we're going to need to do is just very simply just do dot and dot config and just invoke that that's all we have to do in order to read the environment variables inside of our end file okay so that's the very first thing that we need to do but now what we want to do is we want to connect to our application so in order to do that what we can do very simply is mongoose dot connect and mongoose connect is a method and we are going to have to pass in the uri now the uri of course we added it right over here inside of our environment variables so the uri is going to be process dot n dot and then the uri so the uri now the issue that's happening here is that typescript doesn't know what type this is it really doesn't know if you hover over it you know string or undefined is not assignable to type string so what we have to say here is that this will always be defined and it will always be a string so you can just simply say as string and that's just some typescript syntax that you don't really have to deal with when utilizing javascript okay so now the next step is well the next step is uh this is gonna return a callback so this is gonna sorry it's gonna return a promise and so what we can do here is we can have a dot then and then a dot catch and now if something went wrong we could just simply throw an error so we can throw a new error throw a new error let's do error however uh yeah so if something goes wrong we're gonna throw an error now if something if we actually do end up connecting let's just go ahead and console.log connected connected to db or mongodb and then once we're connected we actually want to go ahead and run our server so what we can do actually is take all this and we can put it right in here so we can actually put all this stuff right inside of this callback so we can go here grab all this and just put it inside of this callback because we probably don't even want to start up our application if uh you know we can't uh connect to our database all right cool so that's pretty much it so let's just quickly go here here to our server and let's just exit out of it and let's try to rerun it again let's see if it works all right let's give it some time and of course it crashes so why is it crashing all right so i'm assuming what's happening is it's throwing an error right over here so what we can do is we can very simply just get this error throw this error in here let's also console.log the error all right so the error is the uri parameter to got undefined so okay so that's the issue so right now the issue is when we do a process dot n where is this when we're trying to connect here this is actually getting us undefined so let's let's see here why that is well that's because we need to get this dot to end file and you got to put it right here so let's let's try this one more time let's actually just try that here okay cool awesome so now that works so now we're connected to our mongodb database and now we're also listening to port uh 8080. all right cool so that's that's terrific so now that the next thing that we have to do is we need to define how a user is going to look inside of our database because remember what we're going to do is we're going to extract the email from the user check if that already exists but we need to define exactly how the user entity is going to look so for example a user is going to have a email that is a string and a user is also going to have a password that is a string user might have a name that is a string maybe if you want to add other credentials like the age or whatever we have to define that when utilizing mongoose so that right there is actually a model so what we can do here is we can create a models directory so we can create this model's directory and inside of this models directory we're going to create a user.ts file and what this is going to do is going to define exactly how a user is going to look inside of our mongodb database so in order to do this what we're going to do is we're going to import mongoose from mongoose so let's import that and we're also going to get something from mongoose so we're going to get something called schema so from ski or equal to mongoose we're going to get something called schema so schema and and now what we're going to do is once we get our schema what we can do is we can do const and then we can say that the user schema is equal to a new schema so we're going to go ahead and instantiate this and this is going to take in an object and in here we're going to define all of the different properties that we want a user to have for now we're just going to define that hey they have an email we're going to specify that the type is a string we're also going to specify that uh you know if uh we want to specify that we want to trim this as well so if there's you know additional space in the front of the email as well as in the back we want to trim it we also want to specify that this is absolutely required so you can't create a record without this and then we also want to specify that this is going to be unique because we don't want to have two emails uh two two individuals with the same email and now what we wanna do is we wanna do the password as well so over here what we can do is we can do type string so over here we can say that this is a type string you can also add that this is going to be required because well you need a password if you want to um create create a user and we can also add some other credentials such as min 5. so you might be thinking that well why are we adding these credentials if we are adding that same exact credentials inside of our auth file right over here inside of our route well this is just another form of validation of somehow some way that this is bypassed and it actually continues on what we can do is we can actually validate this inside of the database level and make sure that the min is five so this is just another additional step for validation all right cool so that's the user schema and let's just go ahead and let's export out this user schema so we're going to say export out and then now to define this as a model we're going to say mongoose mon goose dot model and we're going to say that this is going to be the user model and then we're going to define the actual schema and that's pretty much it so that's all we have to do very very simple and so now what we can do inside of our auth file so now finally we're coming back here is we can actually import that so we can import user from we can go up a directory we can go to wait where are the models oh i created the models in here let's let's put that in the source directory there we go so now we can go up a directory we should see the models and then we should take our you we should take this this file so now we can get this this user thing and now with this user what we can do is we can perform multiple actions on our database we can create a user we can delete the user we can do whatever it is that we want but what i want to do is i want to find a particular user that has this email so let's go here what can say is const user and we can say user is equal to a weight user now we need to await this because this is going to be asynchronous we're interacting with our database this isn't going to be a synchronous request so we're going to do user dot and because we're using typescript we're going to see all of these wonderful methods that we can utilize and i specifically want uh let's just do find one and i want to find by what well to specify how we want what record we want to find we can specify an object we can say email so essentially here what we're saying is well we want the email to be the email that we get inside of this request body now what this is going to return is null if there is no email but if there is an email it's going to actually return a real record now right now there's nobody inside of our database so we're not going to uh hit this error but let's just go ahead and let's just simply let's just simply do a res.json and return that user just for now so let's go ahead and let's give this a go and let's go here let's do a sign up and you can see here we get null back because there is no record inside of our database let's actually go ahead and create a record for now just for just for kind of showing this off so we can do user.create to do this and then over here we can specify the email as well as the password that we get back from the body so let's just create this user and we'll comment this out for now we'll just comment this as just a string or maybe we have to do a dot send here i don't know all right so what we're going to do is we're just going to simply create this user and this user is going to have you know this email as well as this password so send this off we get back user everything is fine what we can actually do is now go to our mongodb atlas go to our database click on browse collections and we should be able to see this user so you can see here we have this document in here i think that's too much you can see here we have this document so okay now we do have a user with this email and this password now this password is bad because it's stored in plain text but we'll fix that a little bit later one thing that is neat is it also gives us an id so mongodb gives us an underscore id and it is this uuid so we don't even have to worry about adding a id mongodb by default is going to give us one all right so now let's actually go get rid of this code let's go here and let's return back the user with a json all right so now if i were to send off this request again now we actually get back this record so we actually got back the record so if the record doesn't exist we're going to get back uh uh null but if it does exist we're going to get back this particular record so that's really the hardest step of this of this uh of this step that we're taking over here with checking if the email is used or not so simply now what we can do is we can say hey if we actually get back a user what we can do is we can just simply return res dot json and we we can return for now um we can return the the errors so the errors is going to be an array with one object that has a message of um of uh what what is the error gonna be oh yeah so email already in use and so right now what we're doing actually and this might be a little bit confusing we're actually just returning the errors i think it actually might be good to return the errors and the data in the exact same json response so what i mean by that is over here in the json response i want to get the errors and i also want to get data now if we actually get errors inside of our array then we want initially our data to be null then over here we can actually do the exact same thing so we can say here errors is null now once or sorry data is null now once we actually complete all this validation step and we're completely done we can return errors but as an empty array and then the data will actually have data inside of it so let's actually just continue on now and let's just uh see so now if i try to sign up we're getting some error open up our terminal just to see what's going on seems like everything's fine i'm not sure the thing is up and running everything is okay uh if user data so let's let's try to send this request again there we go so now what we're doing getting is we're getting this error hey this email is already in use however if uh if we change this email to something else we make the same request again okay this time we get null because that's exactly what we're sending over here but we're bypassing this all right so we completely finished this step step two but now what we want to do is we want to hash the password if we actually end up saving it to the database because of course we don't want to save this database in plain text if somebody got access to mongodb atlas we're pretty much screwed we're gonna get sued a million times because we just exposed everybody's password and of course we don't want to do that the next step on our list is to hash our password remember right now we're storing our password in plain text and obviously this isn't something that we want to do as we want to alter our password in some way maybe make it look a little bit more like gibberish before we store it inside of our database so let's just quickly talk about exactly what hashing a password even is so i'm on this really cool website let me just get rid of this and this is just showing us a bunch of different hashing algorithm so there's a bunch of these different hashing algorithms specifically we're going to be using one called bcrypt which is one of the more popular ones but again there's hundreds of them that do pretty much the exact same thing and now what is it that it does well let me just quickly refresh here i'm going to zoom in a little bit so what it does what these uh hashing algorithms do is you give it an input and it gives it an output and this output is going to be hashed so for example if i say i don't know mud pie or whatever uh let's just i don't know maybe something better let's just say password so if we say password you can see here that the hash is changing so right now what we can say is we can say password and then it's taking this and this it's doing some sort of algorithm and it's turning it into this particular hash right over here and what's happening here let me just quickly copy this what's happening is we're going to take this hash and we're going to store this hash instead of actually storing the password itself so for example what we're going to do here is we're going to store this right here so we're gonna store this now the next time that the user wants to input their password so let's say they put in i don't know let's put in they put in microphone by accident for example well that's gonna output this hash over here and so what what's going to happen is the algorithm is going to compare this hash with this hash and it's going to say no this isn't the correct password and one thing i want to note is this is a one way flow so the password is going to be hashed but there's no way to actually get the hash and change it back to the password and that's why hashing passwords is a lot better than encryption where you have some sort of key that can turn it to some some gibberish but the key can also turn it back to our a real plain text password so right now if you go back to password then what's gonna happen is it's gonna take this hash it's gonna provide the this hash and then it's gonna compare this hash to this hash and as you can see they are exactly the same and then that means that yes we have the correct password now there's some algorithms out there hashing algorithms that don't produce the same hash for the exact same password but they have some internal way of figuring out that yes these two hashes belong to the very same password so you don't have to worry about that but the premise of this is we're going to again hash this password so really nobody can see this for additional security all right so i hope that makes sense now let's actually get right in to it so let's go over to our um our auth dot ts and again we want to hash our password now we're not going to create the hashing algorithm ourselves we're going to use some of the very popular hashing algorithms that are already out there specifically like i said we're going to be utilizing bcrypt krypt is one of my favorite ones there's other ones like argon but again i want to utilize bcrypt because it is by far uh the most popular so let's go ahead and of course we're gonna need to install a package and we're going to install bcrypt js so let's go ahead we're going to install b crypt and this is a very easy word to misspell so let's do bcrypt js and let's install that and then once that is installed we can go ahead and import and we can import bcrypt so b crypt from b crypt js now this isn't giving us okay this isn't giving us okay it is giving us issues so what we can do is we can simply do an npm install at types and we can say bcrypt js b crypt js dash dash save dash dev just so we can get the types for this as well all right tick tock there we go now it's happy okay so now that we have bcrypt installed in our local machine what we can very simply do is uh what we can very simply do now is just go to over here so after we're done the validation step what we want to do is we want to hash the password so we can say something like const hashed password and we can say that that is equal to a weight because this is going to be asynchronous dealing with bcrypt is asynchronous we can say bcrypt.hash and then we can provide it with the password itself and we can also provide it with uh salt so assault rounds so essentially assault rounds are just ways that are going to make uh dealing with unhatching this password a little bit more complex it's kind of out of the scope of this course but just take my word for it if you want you can research exactly what it is essentially what they're doing is they're taking this password and what they're doing is by specifying we want 10 salt rounds it's going to take this password and then at the very end of this password it's going to add 10 random characters and what that's going to do is just going to make this hash be a little bit more complicated to figure out because right now what we can do is if we have a very common password like password maybe some person is going to go just take all of the common passwords and then hash them and then try to make that the um try to make that and try to sign in with your application now if you went ahead and you just added some salt rounds to it it will make it a lot more complicated to figure out exactly what your password is that's basically the premise of this all right so now that we got our hashed password now what i want to do is i want to create our user so now what we can say here is we can say here const new user is equal to await we're going to say user.create we're going to create a user with this email that we passed in and the password but the password not that we get in plain text the actual hashed password and that's pretty much it so now that we're done that we're kind of done this step we're actually done both of these steps over here so we hash the password and we save that to the database so then the next step is actually to figure out you know what we want to send back which is the token we'll talk about that a little bit later of course but for now let's just go ahead and we're going to go ahead and save this and let's just give this a quick go so let's go to postman post man post man so what i'm gonna do is i'm gonna go ahead and i'm gonna uh let's see what my body says so let's create another user lebron james we're gonna go ahead and send this off and we get null back which is i guess fine because that's what we're we're returning here but if everything is okay then if we go to our database we should get another document upon refresh and it has to have a hash password so let's refresh and there we go so we have lebron james and the password is completely hashed all right cool and now if i were to try to send this request again we get an error saying that hey this email already exists all right cool so again let's work on this very last step sending back the token let's quickly understand what it is and then we'll we'll obviously implement it the last thing that we need to do is send back a token once we successfully sign up to our application now let's talk about exactly what this token is so this token is going to be a json web token so let's go over here to google.com and let's very simply just search for json web token so we're going to go here we're going to say json web token and then we're gonna go here to jwt and then inside of json web token we can actually see the token that we're gonna create and send back so this token is our way of identifying who the user is inside of our client so what we're going to do is we're going to create this token and we're going to send it to our client and this token is then going to be sent from our client to our server with every single request that we make and if a request is particularly authenticated we're going to identify who this user is by checking this token now how do we check this token well right now this token is made up of three parts and you can see that it's actually color coded so the header the header is something that you pro don't really have to worry about that is okay but the two things that you have to worry about is these two parts over here so the second part is the payload so when we create a token we're going to put some information about that user whether that's the sub so that's the id the name of the user the email to user we're going to add that somewhere inside of this payload and then we're also going to have this verification signature so we're going to create this signature using a particular key that we only have in our server now once our user makes a request and sends off this token what we're going to do is we're going to use this to verify that this is the correct json web token for our server and then we're going to utilize the payload to check who our user is so this is exactly what we are going to be creating and sending to our client so let's go ahead and do this now json web tokens is what we're going to be doing so we're going to need to install json web tokens so let's go here let's go to our terminal we have so many terminal windows up and running and then inside of our server make sure that you are in your server directory remember what we're going to do is we're going to do an npm install json web token so let's go ahead and do that i don't know if you need types for this so i usually just import the thing jwt from json web token and i check if typescript yells at me it is so we need types for this so we can say at types so add types and we can add the dash dev or dash save that flag what's going on here oh add types not type so types and there we go now it's completely should be completely happy in two years there we go okay so now that we are completely done here so we have our user we created everything so now what we want to do is we want to create our token this is again going to be asynchronous so we can say await and then jwt dot sign this is how we create our token now the first parameter that we're going to pass in is going to be that payload so remember inside of oh i guess i deleted it or so remember over here we have this payload that has some data that we want to have inside of this token we can put whatever it is that we want i'm going to put in the user's email so i'm going to take the new user's email and i'm going to put that inside of the payload and then what we also have to define is well uh the the jwt secret that is going to make up this portion over here so this is going to be a secret that only our server is going to know so let's actually put that inside of our environment variables so we can say jwt secret and this can be just some random gibberish so over here some random gibberish okay so let's take this secret and over here we're just gonna do process dot n dot jwt secret awesome we're gonna specify that this is a string now what we can also do is we can also specify when this token expires so we can do that by adding additional options we can say something like expires in now this is going to be in seconds now i don't want this expiring for a very very long time so i'm just going to add some crazy number like this but for a real application maybe you want to expire every i don't know three hours or a day or whatever so let's go ahead and save this now what we're going to need to do because we created a new environment variable we're going to quickly just need to close off our server and just run it again because we created a new environment variable and so now what we want to do is we want to actually return back the data so we're going to do a res.json we're going to say errors is an empty array at this point and then the data what i'm going to do is send back an object that has the token that we have created and it's going to also give us some information about the user so we're going to get the id which is going to come from the user dot underscore id so remember with mongodb everything is stored man i have so many tabs open with mongodb it's actually called underscore id and not id and then okay we can also pass in the email which is the user.email and we probably don't want to send back the password really no point in doing that okay so that's that's pretty much it so that is terrific let's just give that a quick go so let's try to sign up we get an error so we get no data we get this let's change our body to somebody else let's change it to kobe bean bryant and then let's change our password to why not to um hello friends all right so we're going to go here we're going to send this off and we get an error all right guys we got an error so let's try to debug this stupid error let's let's see what's going on here best way to do that is just to read what this is so cannot read property uh of null whatever i'm not really sure what's going on here so [Music] uh oh okay sorry i'm using user i should be using new user so we can say new user here and the new user here okay so let's give this another go uh let's change the person because this already probably was created inside of our database so let's change it to somebody else who can we change it to another basketball player as you can see i'm i love basketball guys so i always use basketball players in my tutorials but you know what let's use let's use a a female celebrity let's use dua lipa i had somebody else yell at me for using selena gomez last time so i'm going to use uh dual leap at this time and we'll leave it as hello friends all right so let's go here and there we go so we got back our data so we got back data we get this token that we created and we get this user with this id as well as the email and if i were to actually copy this token so if i were to copy this token and i were to paste it inside of that site if i were to paste it in here so the first thing that you see is that it's invalid signature because the secret is not correct um but you can see in the payload you can see right here in the payload you can see that we have our email so that's that's pretty neat that's pretty awesome now we can actually verify this by simply going to our end file getting this secret and then we can actually pass that in over here and now you can see that this signature is actually verified all right so that's cool so that's that's that's really all we have to do for signing up our user and that's pretty much authentication so now that we've finished up uh signing up our user let's create a route for logging in our user and we're just gonna do this really really quickly because a lot of the concepts that we have here is gonna be relatively the same there's just going to be a little bit of differences with the logic so let's do that very quickly in this video what we're going to do is work on the login route and i quickly wrote out the three steps that we're going to take so in the login route we're going to send back the same data from the client to the server the email as well as the password the first thing that we're going to do is we're going to try to find that user inside of our database if we can't find that user then you gave us an incorrect email that doesn't correspond to any particular user inside of our database so we're going to throw an error we're going to tell them hey no these are invalid credentials next if we actually pass this step and we actually end up getting a user what we want to do is we want to get that user's hashed password from our database and then compare it to the password that we got from our request body now if well this this comparison fails again we're going to say that hey you have invalid credentials you can't log in however if it passes then we're going to move on to this last step and that step is just sending back that token so we're going to go ahead and send back that token so that in subsequent requests they can go ahead and become authenticated so this is really easy let's just do it in one quick go so let's go here now in here we have a post request for sign up let's create another post request for signing in or for logging in so we're gonna say router dot post very simply we're gonna say log in we're gonna say uh req res and there's actually no need to validate the password and email if they give us a password of one of one character then whatever that's fine we're just going to check it inside of our database see if it exists or and then if it doesn't then we're just going to throw an error because we probably don't want to do any of these validations here anyways because maybe our our password validation steps changes as we go along and thus maybe we might have users inside of our database legacy users inside of our database or old users inside of our database with password criterias that don't meet what we have over here so we don't we don't want to do any of that validation so the first thing that we want to do of course is we want to get the uh we want to get the email and password so let's get this email and password from the request body so from the request body and then what we want to do is we want to get the user so we want to say user is a weight user dot find one and we're gonna pass in that email now if we can't find that user then what we're gonna do is we're gonna go ahead and return res.json and we're going to say errors is going to be this errors array and then in here we're going to have a message of invalid credentials we could say that this user doesn't correspond to you know this email is invalid or whatever but i think it'll be better to be as generic as possible and then over here we can say that the data is null all right cool so that's pretty cool uh what's going on here with the issues i don't know what's going on here to be honest return res.json expected zero to one arguments but got two what i am confused guys what is this the error doesn't even seem like it's going away oh because there should be an array there we go that fixes that and then over here yeah so that fixes this so that's very quick and now what we want to do is okay if we pass this step then what we want to do is we want to compare the password so we can simply do something like const is match so we can do is match and we can actually use bcrypt for this we can use bcrypt dot compare and we can compare the password that we get back to the hash password that we got from the user so we can simply say user dot hash password or sorry user.password not hash password and now if this is either going to return true or false so we're going to say you know what if this is false we can just simply return the exact same thing we're just not going to say that this password is invalid we're just going to simply say invalid credentials there we go now if we pass both of these steps then well we're pretty much done at this point so now let's create our token let's actually go ahead and just copy this code here let's copy this because it's going to be exactly the same so we're going to go here we're going to create our token except this time we're going to use user so we're going to create the token and then very simply we're going to go ahead and just return res dot json errors of an empty array and then the data we're gonna have the token and then we're gonna have the user we're gonna have the user id so the id it's going to be user underscore id and then the email is going to be user.email that's it really really simple i hope this makes sense because what we're doing here i went through this relatively fast but again what we're doing here is validating if the user even exists with that particular email in our database we're checking if uh we're checking if uh now we're comparing the hash password to the password that we get back and if all these work then what we're going to do is we're going to return this token okay so let's go here and what i'm going to do is i'm going to save this route i am going to add another request and what i can also do here is rename this to sign in so i know exactly what it is and over here i can rename this to login and now i can go back to sign in let's copy this and now i should be able to do login and then in here inside of the inside of here let's provide it with this product was like a gibberish email for now that doesn't exist in our database it's provided with a whatever password so if i were to send this request it fails we got a 404 the reason for this is because why is it that we get a 404 i'm not i'm kind of confused let's see basically it's it's just not finding that particular request slash auth slash login well what do we call this oh i have to change this to a post request all right you can see here that we're getting invalid credentials so that's that's good so now let's go back here and what do we add here so do a lipa so this is an actual user now so this is an actual user if we were to send this off we still get invalid credentials because now we know that our the password is incorrect so the password here is hello friends you can pass that in now and now look at that we get back our token awesome so in terms of authentication we're completely done on the back end side so there's going to be a little bit of modifications that we're going to do along the way but most of 99 of the logic is completely done in the back end side so now let's actually start using these routes inside of our front end

Channel: Laith Academy

Views: 23,066

Keywords:

Id: Wxw1wNwlBbk

Length: 133min 32sec (8012 seconds)

Published: Mon Nov 22 2021