How to build an eCommerce Website using React Redux, GraphQL, Firebase #4 – Registration and Login

welcome to the fourth video in this tutorial series on building an e-commerce website using react redux graph QL and firebase now I want to give you a quick demo of what we're going to be implementing in this video tutorial it is basically user email and password or authentication users will be able to register their information so they'll enter a full name so for example Joe mass their email so Joe mass ad outlook.com they'll enter a password and a confirmed password once they hit registered they'll not only be signed into the application will be redirected away back to the home page of course this also means that once they are signed up we will be storing the users information in our users collection within our firebase database once we log out you'll be able to head over to your login page we're also going to be building our login page in this tutorial so let's login to the same users account that we just created so it's joe mass outlook.com and enter the password click login we'll be logged in and redirected away to the home page before we begin this video tutorial I just want to encourage you guys to like comment and subscribe your support goes an awful long way but apart from that please check out our official YouTube channel that's youtube.com forward slash simple to not only to check out the other videos and other content but of course I will be posting a direct link to the in the description of this video to the official playlist for this video series this is an entire video series on building an e-commerce website with react and again each video will be broken down into bite-sized chunks where we focus on one topic and that will just allow me to go into much more depth but also provide you with the most content for your time but by the end of this project we will have a complete ecommerce website I also want to let you guys know that this is the official repository for this project so as I proceed through these videos and I make these video tutorials at the end of each video I'm going to be committing and pushing my code to this repository so if at any point you want to compare your code with mine maybe you want to look at the code in the browser or you want to clone the project and run it locally on your machine feel free to do that again I'm posting all the code to this repository and a link to this in the description of this video alternatively you can just type it in the web browser github.com forward slash simple Tut and search for this repository and of course please do visit our official website that's simple tot calm before we begin this tutorial let's take a quick look at our current application look at what we've done so far and what we'll be doing in this tutorial so we have links in our header which can take us to a login page where we don't actually have fields form fields to sign in with an email and password but what we do have is a button that we can click to sign in with Google if we click that we'll get a pop-up which allows us to select our account once we actually go in and log in it will log us in our header updates and we have a link to logout we're also redirected to the home page if I sign out again I'll be logged out the sessions will be cleared and the header will again update and again it will show me the links to either register or login and of course we have this link to our registration page which we haven't built yet and again this is something that we will be building in this tutorial so let's go ahead and make a start the first thing that we need to do is enable email and password or authentication within our firebase app now that's really easy to do all you need to do is head over to your firebase project and on the control panel just select the develop tab and authentication from there you can select sign-in method and that will give you a full of all the sign-in providers available from firebase you need to go across to email and password and click on the pencil icon and just enable this authentication do not worry about enabling the email link we're not going to be setting that up in this tutorial once you've enabled it just click on save and you have successfully enabled email and password authentication within your firebase app the first thing I need to do is build my registration form component so let's come back over to our text editor let's go into our components folder and we need to create a new folder we're going to call this our signup component it is going to be a class so the first thing I need to do is create my index.js file and a style sheet so Styles scss let's go into our index.js file and let's import react and we want to D structure component from react we'll import our style sheet so we can just go ahead and do that so stylez SCSS then we can create our actual class we're going to cause again signup so we need to extend component we need our render method and we will return for now a div we're just going to call this signup we're gonna add a wrapper so we'll have another div here with wrap and we need a h2 which is going to be our heading and I'm gonna call this I'll just say signup and underneath that we'll put a form but we're not actually gonna build out our form components yet I'll come back to that let's just add a semicolon after our return statement and down here let's just export default signup okay so as you know from previous videos in this tutorial we have our components but we also have our page his component and as you know we already have a registration page component that's what you saw rendering in the browser let's go into the index file here and this was obviously the h1 that you saw rendered here so if I show you in the browser you have registration page here let's come back to our editor this is that h1 so again what I want to do is I want to import my new signup component so we'll say signup import sign up from our components folder we have signup and all I want to do is I want to return this new component for signup so if I now come back over to our signup component I should see a h2 rendered which just has the text of signup let's come back over to the browser and you can see that's exactly what I'm seeing now as I mentioned before we already built a large part of our login page and I want to take the same styling that we applied here so again if we come back to our text editor in our components folder in the last tutorial when we created our sign-in component you might have already noticed we took the same HTML structure right so I want to apply that same styling so I'm gonna come to the style sheet that we wrote for our sign-in component here and I'm gonna copy it and I'm gonna just put that into the style sheet for my signup component so let's go ahead and save that and let's come back to the browser go to a registration page and of course we need to just change the the class here so for signup we we need to add the signup class but once I've replaced that if I come back to the browser you'll see that it we're inheriting the same styles that we wrote for the login page and that's just gonna save us a little bit of time but again if you guys are just joining then obviously please go ahead and check out the previous videos of this series if you want to go through how we actually wrote you know this part of our application or the Styles etc but I want to focus on just the form and the sign in and sign up functionality with firebase in this tutorial so we're gonna skip over some of this by just reusing some of the code we've already written so we're now ready to actually obviously build our our actual form components so one of the great things about react is that the code is very very modular which means that you you'll end up with a bunch of very small reusable component and we already have an example of that because in the last video we created a reasonable form button component and we want to do the same thing for our form inputs so let's go ahead and create that now that's gonna be a functional component so within my forms folder within components I'm gonna create another new folder I'm gonna call this my form input component and within that we're gonna have our index j/s file we're also gonna have a style sheets of styles dot s CSS and this is gonna be a functional component so all we need to import is react from react we will import that style sheet so we'll just import sales dot s CSS and then we'll create our functional components so it's gonna be called form input we are going to destructure from props a handle change event so we'll say handle change and we're gonna use this to update the state of the parent component when the user is typing into this form input but we'll I will explain that a little bit more later on in this tutorial we'll take a label and of course this is optional and also we will use a spread object to grab any other props that might be passed to this component and then all we need to do is return for now we'll return a div we'll add a class here of form row and within this I'm going to render the label if we have one so we'll wrap that around the conditional so if there is a label will have a HTML label and will render the label that we have and also we want to obviously render an input field we'll add a class here of form input and we we on on the change event we're gonna pass this handle change method that is passed to the component and then we will just pass any other props that might might have been given to this component and we'll use a spread operator to pass that to this input field so we'll just add a semicolon after the return statement and then we'll just export defaults form input alright so at this point we have our reusable form components for our form input and our form button but we need to now use those components within our signup component to actually render our form on the page so to do that we need to first of all import those two components so we need to import our form input from our forms component and we need to do the same for our button so we'll import that from again forms button once we've done that we need to think about the fields that we want to render on the page and we're going to store the values in our state so I'm going to create an initial state so in your state this is just going to be a object so we're gonna have a display name and this is going to be the users full name we're going to have an email we're gonna have a password and we're gonna have a confirm password because we need to make sure that the password the users entered is is valid and correct we then need to use that initial state so we'll create a constructor will define our super and pass props will then say sis dos this top state equals and use the spread operator to define our initial state once we've done that we are ready to actually use our form components so we're gonna take that form input I'm gonna use that within our form so we'll create our first input field and this first form input field is going to be for our display name we need to create form inputs for all of these fields so the first one is going to be our display name that's the user's full name so it's going to be the type of text the name is is very important that the name you give this input field is the same and matches the value the key that we have in in our state so the name needs to be display name and the value is going to be the value that we have in state so for example where we actually have our after we have our within our render method but before our return statement we need to de structure from state first of all display name and that is going to be the value that we passed to our form input we can also add a placeholder and I'm just going to add here full name alright so now let's come back over to the browser and on the registration page you're gonna see that we now have our new form input field showing but if we put our cursor inside that and we try and type something you'll notice that the input field doesn't update and that is because if we come back over to our text editor we have binded the value of the input to what we have in this state so there's no way currently to update the value of display name within state so even if we're typing within the form input field it's not going to update the value that it can that it has so we need to write a method that will handle that so what we need to do and again we can pass this because within our form input component we have the option to pass other additional props which gets passed to our input field here so what I'm gonna do is I'm gonna create a new method on this class called on change or handle change and that is going to take an event and then we're gonna D structure from event dot target the name and value and then what we'll be able to do is we'll say this dot set state and we'll set the name equal to the value and once we do that we will need to add this willing to bind it so we'll say this dot handle change equals this dot handle change don't find this and will then be able to pass that in unchanged event handle change once we do that we can come back to the browser and you'll now be able to type in this field so for example here I could say actually and the benefit here is because we have binded this if I now come back to the text editor and just demonstrate this so if I if I was rendering this display name here let's just render it above our form input here come back to the browser let's type something in here and you'll see as I type it we're updating the state the value we have soared in States so that when the user clicks submit we can actually get all the data from the form from state right so that's how it works but what we need to do now is create the additional form input fields for the various other fields that we have in in-state so to do that I'm just going to copy this block of code and what we want to do is it's going to be another field it's going to be type email and again we want to destructured email from state and we're gonna pass that as the value for this form input will update the placeholder we also want to do the same thing now for our password and confirm password so again we're going to D structure from State password and confirm password and we're gonna duplicate this form input this form input twice the first one is going to be type password we're also going to set this type to password as well the reason we do that is when you type in it this form field you're going to you won't actually see what you've typed it will be hidden because it's a password field that's very important and what we want to do is just give this again a name so we'll say password and we'll say confirm password and again the value will be password and confirm password will update the placeholder so password and confirm password and that's all we need to do so at this point we can come back to the browser and you'll see that we have now got all of our form fields but we are missing our form button so let's come back over to our text editor and again let's just use our form buttons so we're gonna have our button here but we're gonna have a value here which is we'll say register and finally we just need to add type submit to our button form component alright so we've now built our form if I come over to the browser you're gonna see that we have all of our form fields and of course because we already have styling in place for our form button that styling is being inherited but of course our form input component was a new component we haven't written any CSS for it so we need to style that component let's go ahead and do that so let's come back to a text editor go to our form input component and as you can see we have this Clause here for form row let's go to our style sheet so styles that s CSS let's target that Clause within that let's target our input field and of course you can style this any way that you want I'm going to style it as display block I'm gonna set the width to be 100% we're gonna add some padding I'm gonna say about 10 pixels top and bottom would be 5 pixels left and right let's add a margin top and bottom of 10 pixels and center it let's set some font size let's set about 15 pixels to 1.5 mm add a line height of and what I'm also gonna do is I'm going to set a font weight of about 400 and let's do a text a line of left and let's add a border of 1 pixel solid and I'm going to say something like 90 90 90 and I'm just going to set the outline to none cool so let's just have a look at what that is like in the browser okay so that looks a lot better already but what I want to do is just add a bit more space under the h2 so I'm gonna come over to my for my signup component I'm gonna add a wrapper around my form so I'll add a div here and I'm just gonna say form wrap and I'm gonna wrap the form here and actually on the style sheet for my signup component let's actually add the same let's let's create target of form wrap and we're gonna add a margin of 3 rim which is 30 pixels top and bottom and just check that out in the browser yeah that looks all right I think I'm actually gonna remove the bottom margin though but that yeah that looks a lot better now that we've built our signup form we're ready to actually implement firebase in and actually store the user's information in our firebase database now to do that what we need to do is go ahead back over to our text editor and our signup component and the first thing we need to do is import two things from our firebase utils file that we created in a previous tutorial so we're going to import from our fire base utils file we want to import our poll fly Bri and the handle user profile util file a utility function that we created in the previous video tutorial ok so before we actually continue let's just head over to a firebase utils file and remind herself exactly what the handle user profile utility function actually does so what it does is it takes the user auth object it checks if the user exists in our users collection in our firebase database if they do not exist then we register them we create a new document in our users collection and we store the users information and this is how we actually register the user and then regardless we return the user ref document that we can use to store the users information in our local in the local state of our application to actually sign them in so let's head back over to our signup component and use these this utility file to actually register the user so currently we have our form and our button here set up to submit the form but on the submit event we want to call another method which is going to be this don't handle form submit and we need to create that method on our class so let's create handle form submit and that's going to equal an async function which is going to take an event and the first thing we want to do is prevent default so let's prevent event prevent default that's going to prevent the pay the form from posting to itself and basically reloading the page and what we want to do is just D structure the values that we currently have in state for our form so let's go ahead and destructure from this state we want to destructure a display name email password and confirm password once we've done that the first thing we want to do is think about validation so currently we have our password and confirm password and we know that we don't want to register the user or proceed any further if these don't match so what we want to do is have an if statement here and we're going to say that if our password does not match confirm password then we want to first of all we want to return so we don't want to proceed but before that we want to create a new error which is going to be just a note of notice notification to the user that the password doesn't match so we'll say passwords we'll just say don't match and we want to render that out so what we're gonna do is in our initial state we're gonna create an additional errors array and we're gonna destructor that in our handle form submit method here so we'll D structure errors our errors array and what we want to do is we want to say this set state and we'll say errors equals is going to is gonna we're going to set it to this new error and what we'll do is within our actual render method on our class we want to render those errors if there are any so again within our render method we're going to D structure our errors array and we're just going to render any errors that we might have so for example here what we're going to do is we're going to set we're going to say that if the length is greater than zero then we are going to return an unordered list and we're gonna then map through that errors array and we're going to show all the errors so what we're gonna do is we're gonna say errors dot map and we're just going to take the current error and the position and then we're just going to return it as a list item so we'll just render the well actually we need to wrap that in a return statement but will render the error and we need to of course set the key on our list item to the position which is the index now let's just look at this in our browser so let's come back over to a browser and let's try and submit the form so let's say that password is 1 and confirm password is 2 and register and you'll see that the form doesn't submit and what we also see is the area that the password doesn't match so now that we've added proper validation to our form we're ready to actually go ahead and store the register the user and saw their information in our users collection on our firebase database so to do that I'm going to head back over to my text editor and within my handle form submit method I'm gonna create a try-catch I'm gonna catch any errors that might occur we're just gonna console the log error I'm gonna comment that out for now and I'm going to use a function that's available to me from the auth library that I've imported at the top so I'm going to use this async/await keyword so we're using this async/await returns a promise and we're gonna use the auth dot create user with email and password function this expects two things the email and password of the new user but we want to D structure from the wrist once the user objects and what we want to do is we want to utilize the same handle user profile utility function that we created in the last tutorial for our Google authentication so again we want to use the awake keyword but we want to say handle user profile and we want to pass it the user object but we also want to pass it some additional data and in this instance is the display name and again we get the display name up here from our state so all these values are being restructured from state we don't actually need to destructure errors in this in this case and then once the user is actually signed signed up and registered we want to restore the initial state and that will just simply reset the form okay so let's test this out in the browser so let's come back over to the browser let's just reload the file and we're going to enter a random name so let's say Joe mass and the email is gonna be Joe mass that's outlook.com let's enter a password and let's click register and what you're gonna see is that the form is reset and also you're going to also notice that my header is updated and I'm seeing logout right and that means I'm logged in but I haven't been redirected away from the registration page which ideally I would be and let's actually figure out why that is so let's come back over to our text editor and let's actually collapse everything down and go over to our app.js file and i want to implement the same logic that i applied to the login page to the registration page which means that you should only visit the registration page if you are logged out user otherwise we're going to redirect you to another page in in in this we're gonna redirect to the home page so what I'm gonna do is within my render method what I'm gonna do is I'm gonna say if the current user object if they're if they're if the user is low signed in so we have current user we are going to redirect away to in this case the home page otherwise we are going to render out the registration page now if I was to do that and I come back over to the browser you see I'm still logged in let me log out here come back to the registration page and let's say I'm now gonna sign up as Joe Joe black and we're gonna say Joe black at outlook.com enter the same password and register and in this time I'm going to be redirected away to the home page and I'm also logged in as you could see the header is updated and again I can still log out now just to demonstrate to you that users have successfully been signed up I've just come over to my firebase database and as you can see in my users collection the users that I've I've just registered and signed up they have been added to my users collection and you'll see the same if you check your database collection we are currently able to register users but of course if we head over to our login page we don't actually have the ability to sign in with an email and password so we're going to implement that right now now that we've actually created some of that functionality there the the reasonable form components etc it's going to be a lot easier and quicker to implement that so what we want to do is go into our sign-in component and the first thing that we want to do is we want to import our form component so I'm going to import my form input from our forms form input and I'm going to import the button from forms button and just like we did on our signup form we're gonna have some initial state which is going to be an object with the fields we want within our form so we're going to have our email and password and again we're going to need to add that initial States or use it so we're gonna create a constructor we then need to have our super and we'll define this dot state equals and use the spread operator to spread our initial State and once we've done that we can actually build our form itself now as you can see we actually already have a form we built this in a previous video of this tutorial so all I need to do is actually add my form fields so all I need to do is add my form input and again this first one is going to have a type of email we're gonna have a name again of email the value we need to first of all D structure from state so we're gonna have Const from this state we're going to D structure email and password and the value is going to be we're going to bind the value of this input to email will have a placeholder which is just going to be email as text and we do need a handle change method here so we're gonna create handle change and again we're going to D structure from the event dot target the name and value and we need to then set the state so this dot set state name value and of course we need to add our binding so this dot handle change equals this dot handle change dot bind this and this is just we use this because we're passing this function as a prop down to multiple form inputs and we need to make sure we're only updating the formula that we're currently typing in so again we'll we'll pass this in as handle change this dot handle change sorry handle handle change fantastic so I'm gonna duplicate this code because we wanted the same again for password so we'll have our password field name is going to be password the value will be password as well and the placeholder will just say password so let's come back over to the browser and you can see this is our form we are missing our form button so to add that in we'll come back over to the code and we're going to add a button here so our button component not a HTML button and the text will just be login but we want to make sure we pass the type of submit now on our form we already have an on submit event which caused a handle submit function async function and before we actually look into this let's just look at our form in the browser and as you can see it's looking pretty good I'm happy with that but I do think we should add a bit of a gap between the h2 and our form if you look at the register page we did that here so to do that I'm just going to come back to the code come back to the style sheet for my sign-in component and as you can see under the h1 I'm just going to add 3 realms of about 30 pixels gap between the h2 and the form and I might get rid of the margin between the login button and sign-in with Google just see how that looks shall we so let's come back to our text editor and there you go that looks a lot better so alright so now that we actually have our login form what we actually want to implement is is the ability for users to actually use this form and login with their email or password and again fiberous firebase makes this really easy to do so again all we need to do is come back over to the browser head back over to our index so Jess so this is our sign-in component and within our handle submit function what we need to do is D structure again we need to destructure from this state the user's email and password now again we're already what we need to do is we we're already importing sign-in with Google from our firebase utility fun while we need to now import off our author library and what we need to do is within this handle submit method we need to add our try-catch and again we're gonna catch any errors that might occur and we can add a console log of the error we can use that if we are debugging any issues again this we're already using this we're going to use async await and what we're going to do is we can add some code within our try we're gonna say a weight again we're using this async/await keyword and we're gonna say auth dot sign in sign in with email and password and all we need to do again is pass email and password that we've already destructured from the state and again I'm going to reset the form with this dot set state use a spread operator to pass in our initial state and once you've written that code all you need to do is just head over to your browser and test it out and if I log in using that information you're gonna see it logs me in and you can see the head has been updated I can see log outs that means I've obviously got look I'm obviously logged in it's created the correct sessions and I've also been redirected away from the login page and that has occurred again if you check the apt ojs and our routes if the user is logged in on either of these routes we redirect them to the home page so again that actually takes care of it for us and that brings us to the end of this video tutorial where I've shown you guys how to set up email and password authentication within our react application using firebase now before we sign off I'm just gonna head over to my terminal and check in my code so again let's do a git status I'm gonna commit this code so this was our email and password orthe using firebase I'm gonna commit those changes and I'm gonna push them to my branch and upon completing this tutorial I'm gonna head over and merge that in so just to remind you guys let's head over back I'm gonna be posting a direct link in the description of this video to the official repository for this project if at any point in this series you want to compare your code with mine if you just want to look at the code in your web browser feel free to head over - the official github repository for this project you can find that on our official github page which is github.com forward slash simple touch and look at look for this repository but again I'll be posting a direct link in the description of this video but once again thank you for following please like comment and subscribe now in the next video we're going to be looking at email password and that basically means that a user is able to reset their email if they've forgotten their login information but until then thank you very much for following this video tutorial have a great day

Channel: SimpleTut

Views: 11,192

Keywords: ecommerce, react, react redux, GraphQL, React Context API, Node, Node JS, redux, online store, stripe, stripe api, shopping card, paypal, firebase, react router, react router dom, routes, routing, Google Sign-In, Google Auth, Google Sign In Authentication, login, signin, registration, user registration, user registration system, user login, user auth, firebase registration, firebase login

Id: QUDT0INBPvI

Length: 45min 15sec (2715 seconds)

Published: Sun Apr 26 2020