How to build an eCommerce Website using React Redux, GraphQL, Firebase #5 – Forgot Password

welcome to the fifth video in this video series on building an e-commerce website using react Redux graph QL and firebase in today's video we're going to be looking at implementing email password before we get started I'm just going to demo what we'll have built by the end of this video tutorial so of course if we're coming from our home page they'll be able to click on login they'll have a link to reset their password if they enter a invalid email so for example if I don't enter an email we're using an html5 email field so of course that just has html5 email form validation but of course if I enter an email that does not exist within our users collection within our firebase database so for example test at example.com and I try and submit that obviously I'm gonna get an error it's gonna tell me that the email hasn't been found and that I should try again if I enter however an email that does exist so go ahead and enter an email for an account that does exist within our database click on email password I'm gonna be forwarded to the login page that I can log in and of course the email has now been sent so let's come over and look at the actual email itself and as you can see this is the email that the user will receive it contains a simple message to the user that just says click this link to reset your password and of course I'm also going to show you how you can customize this email or you can just modify the text it's completely up to you I also show you how you can customize the domain for this password reset link but again these are all things that we'll cover later on in this tutorial for now let's just click this link to reset the password user will be taken to a new page where they can actually enter in their new password so let's go ahead and do that once they click on save it will update the user's password and they'll be able to click on continue and at which point they'll be sent back to your website where they can log-in with their new password and as usual before we begin this video tutorial just wanna encourage you guys to subscribe to my channel which is youtube.com forward slash simple Tut on here you can find all of our content but what I really want to encourage you guys to do is check out the official playlist for this series as I've already mentioned this is the fifth video of this series on building an entire ecommerce website and of course after I upload each one of these videos I will be adding them to this playlist again so far this is the the fifth video but of course as I create more videos for this series they will all be posted here and the link to this playlist will be posted directly in the description of this video so you can either click that or you can visit our channel and search for the playlist directly I also want to encourage you guys to check out the official github repository for this project so at the end of each one of these videos I'm I'm pushing the code I write to this repository so that if any point you want to come over you want to compare your code with mine or you want to look at the files in the browser or you just want to clone the entire project run it on your machine and check it out for yourself feel free to do that again there'll be a direct link in the description of this video or you can find it by visiting our github page which is github.com forward slash simple Tut you can also check out some of our other cool projects too overall I just want to encourage you guys to like comment and subscribe and of course start our project on github but also please do visit our official website which is simple to calm where you can find links to all of our tutorials and cool open-source projects that you guys can check out okay so the first thing we need to do is create a new page that we can actually use to insert our email password form so what I'm gonna do come back over to my text editor I'm gonna go into the source folder and my pages directory I'm gonna create a new folder called recovery and inside of this I'm going to have my index.js file and I'm just going to import react from react and then I'm gonna have a functional component so I'm gonna say Const recovery equals Propst and we're just gonna have a return statement and for now what I'm gonna do is I'm going to insert a div tag with a h1 because I want to just see it rendered out on the page in the browser and I'm just going to email password and we're going to come back to this but what we're going to do for now is just export default recovery and we can save that now that we have our pages component we can go back to app j/s and we can create our new route so when we import our pages components we're gonna import a new one which is our recovery component so that's in our pages directory and recovery and what we can do is come down create our new routes so right here we're gonna have route we need to set the path and the path is gonna be forward slash recovery but we want to have well we want to tell this route what it needs to render so what we want it to render is we want to render our of course our recovery pages component but we want to obviously specify the layout so we're gonna use our main layout the child we're gonna pass it is of course gonna be recovery our recovery component okay and once we've done that we're good to go it's gonna indent this and let's save that now let's come back over to our web browser and let's actually visit this new this new route so we want to visit recovery and as you can see that's our new page set up so at this point we're ready to actually build our email password form and this is gonna be a fairly simple form all its going to actually contain is an email field and a submit button but I want to pause right because what I've noticed is that what I'm going to show you so if I actually come over to either the registration page or the login page we have some repetitive code that I've noticed right so we have this auth wrapper right which basically wraps our forms it basically has this box and basically a h2 and then we have our form which is different but if we look at the registration page it's also the same right we have a basic a basic box that wraps our forms that the styling is exactly the same so this is a bit repetitive and especially now that we want to create our recovery our email password form I certainly don't want to have to keep writing this out and then you know going forward if I want to make a change I'm gonna have to update every single one of these components individually which isn't great so what I'm gonna do is I'm gonna refactor this a little bit and we're gonna create a component that can actually do this for us and all of the CSS and styling will just be in one place and which can update our other forms so let's go ahead and tackle that so what I want to do is come back over to my components directory and we're gonna create a new folder inside of my components directory we're gonna call this our oath wrapper and we're going to create a new file it's gonna be indexed rjs we are going to need a style sheet so I'm going to say styles dot SCSS and on our index file it is going to be a functional component so we just need to import react from react and we just need to create our functional component of course I also need to import my style sheet so I'm going to import that to some Styles s CSS and then of course we can just create our functional component so it's going both rapper and it's just going to equal so props function and we're gonna have our return statement and again for now what I'm going to do is I'm just going to have like a div and it's going to have a we're going to give this a class right of like well earth rapper and we'll have another div inside of that where we are we're just going to call this like rap and what I want to do is instead of it just importing props here right I want to D structure from props a couple of things so the first thing I'm going to import is my headline this is gonna basically be our h2 and then I'm also gonna import what I'm gonna say children and what I want to do is I want to take children and I want to render children within the component here and I think also we're gonna have a h2 so I'm actually gonna have a h2 here so we'll say h2 and we'll insert our headline but I only want to render the headlining in fact if it's passed in the props so I'm gonna wrap that in a conditional something like that and yeah so that looks good and we'll say children will wrap that in like a conditional too so that looks good and for now that's okay but I think also I'm gonna wrap the children in it in a div tag will say this class name we'll just say children cool that looks good at a semicolon export default both rapper okay and now what I want to do here is I want to come over to let's say our sign-in component let's let's start with that and let's look at the structure of our HTML in this file so similarly we have one wrapping div with a wrapper with a wrapper then we have our h2 and then we have our our form basically so what I want to do is I want to come over and grab this CSS and I'm just gonna copy this right just gonna copy it for now and what I want to do is come back over two or three per and this style sheet I have for my o'the wrapper and I was gonna paste it and I kept the structure pretty similar so I created my class which is o'the wrapper so in my o'the wrapper style sheet I'm gonna replace the sign in class with auth wrapper we're gonna leave the Styles unchanged we then have wrap and in our oath wrapper we have wrap as well then we have our h2 and of course the h2s here we don't need this styling but we can save that now and yeah this looks good so let's come back over now to our sign-in component and what I want to do is just show you this in the browser so let's come to sign in so this is our login page so in theory it shouldn't look any different right when I'm when I'm finished so remember how this looks let's come back over to the text editor like this and let's import our oath wrapper so I'm going to import my oath wrapper from the earth wrapper component so it's yeah both wrapper and I want to use this component so I'm gonna do a little bit of tweaks here so basically I'm gonna delete everything up to the h2 and I'm gonna have my both rapper and then we just need to clean this up so we want to basically up to here we'll close this off so it should look like this so we're basically we have our oath wrapper which is a parent component and then we have our form wrap and our form cool we can also come to the sign in style sheet and we can just delete everything but our social sign-in style here because this social style social sign-in class is for div here that's inside of our form so let's come back to our web browser cool so this actually looks exactly the same nothing's changed which is awesome the only thing that has changed is the h2 but that's because we haven't passed it to the author upper component because remember we need to pass that as a prop so let's come back over to our text editor and just within my render method but before the return statement I'm gonna say Const config both rapper and we're gonna just specify that headline and we're just gonna say that this is login so this is basically our h2 and we just need to pass that configuration object as basically pass those props to o'the wrapper component and again if I come back now to the browser as you can see everything looks the same and that's you know that's really nice so let's utilize this same component now on our registration form as well so let's come back over to our text editor and do the same thing so for our signup components so we have our signup component again I'm just going to close all of these files to make it a little bit easier for you to follow let's come over to our sign up component go into the index file and the first thing again we need to do is import our oath wrapper component we want to import that from both wrapper and we're gonna wrap our form with this component so here we are so we're going to up again to the h2 we have our through and all we need to do up until this point we just need to close it off so we have our form and in this case we also have this our errors here so what I'm also going to do is just I'm gonna move this move our errors inside of our form wrap but but just above our form because this needs to simply return a single wrapper so we can't put our errors unordered list outside of the form wrap it needs to be inside but again we need to specify our H - so again Const config both a wrapper and just build the props so again we just want to pass headline which is our h2 and we're just going to say registration so let's pass that to our author upper component save that let's come back to the browser and again let's refresh this as you can see so nothing visually has changed on either one of these pages or the login or the registration forms but we've made a refactor that's really going to improve our code and actually let's come back over because I also want to clean up the style sheet for my sign up component just come in here and actually what we have here is this form wrap we added a margin to it everything else is actually we've basically you know refactored away so we can just the only thing we need to is our forum rap which we have here which is you know it's it's you know specific to this particular page so let's again come to the browser and again as you can see nothing has changed the styling is exactly the same and again if we have those errors let's test those so that was for the password and confirm password validation sort of password is one confirmed passwords two obviously they don't match so if you click on register you see the errors rendered so that's fine and what we want to do now is utilize the oath wrapper to just basically help us build the form on our email password page so for our email password component so what we need to do is now come back over to vs code and create our email password component and the first thing that we need to do is inside of our components folder we need to create our email password form component so let's create a new folder we're gonna call it email password and inside of this we need to create our index j/s file and a style sheet so Styles s CSS and again and this is going to be a class so we're gonna import react from react but we're also this time we're going to D structure from react component and we're going to import that style sheet so we're going to import Styles dot s CSS and then we can create our class so this is going to be email password and it's going to extend component we need to have our render method and our return statement and again for now what I'm going to do is I'm actually going to import my form components so I'm going to import my auth wrapper so this is again it's going to be very useful throughout this application and we can import that of course from oath wrapper we want to import our form components so again we're going to have our form input from it's in our forms directory and our form input and then of course we want to import our button we'll import that from again our forms directory and button now that we've got that in our return statement or we'll do is we'll return our oath wrapper and for now I'm going to just create my config so Const config fourth wrapper and that's going to contain our headline this is going to be again used for a h2 and we're going to call this email password we're going to pass that to our earth wrapper and for now I'm gonna leave it there but what we'll do we'll come back to this and and finish off our form but we want to export default email password and then what we can do is we can come back to our pages component so we have our pages folder and we created our recovery page component and inside of this I need to import that new component for email password so we have email password from components and email password and rather than return this div tag with the h1 we're just going to return the email password so if I now come back over to the web browser and we go directly to recovery you're gonna see that we have our a wrapper and our h2 but we don't have our form yet so let's actually go ahead and build our email password form that's going to be pretty easy to do all we need to do is come back over to our text editor and let's head back over to our email password component and all we gonna do is create another div this is gonna have a class of form wrap and inside here we're gonna have our form and we need to obviously just build our our initial state so our initial state is just going to be Const state equals and all its gonna actually contain is email and that means we need to have our constructor constructor so we're gonna create our constructor and then we just need to initialize our initial state so say they start state and pass our initial state and once we have that we're free to actually D structure from state within our render method email and we can use that in our form so again we have our form input component and what I'm gonna do is just going to build that so we need to pass a few a few props we need to pass a few properties here so the first one is going to be type which is going to be email because this is going to basically be an email field we need name again this is just going to be email we need value and this is going to be again email we need placeholder and this is just going to be email as well now again if I come back to the web browser and my email field but if I type obviously this doesn't update and the reason is we have binded this to the value for email from our state and there's no way of us actually updating the state so we need to have and we need to use the unchanged event and that's gonna call this door handle change we need to bind that so we'll say this dot handle change equals this door handle change don't bind to this and then we need to create that method on our class so that will be handle change which will take an event and then will be structure from the event target and we want to destructure the name and value and then we can use that to update the state sorry so it's this dot set state and we can update the name value and of course the name in this instance is going to be email which obviously matches the key in state for this email for this form field and the value of course is the value again of the of the of the change so let's come back to the browser and we have an error so okay so I missed something so let's come back to the text editor and in our handle change method this should equal let's come back to the browser this works let's try and enter an email so test at email com great so it obviously works the problem is that we don't have a form button so we need to add that let's come back to the text editor and luckily we have our form button component we're going to use it so we need to come back to our form and just insert our button now the text we want to pass to the button is just going to be email password and of course this needs to be type submit' but we don't have we need to actually create our handle submit method for our class so we're gonna say on submit and we don't we haven't created this method yet but what I'm gonna call it is handle submit and we need to create that so again up here let's say and I'll submit and this is going to equal a function takes an event something like this we can also cook this also needs to be AC and first of all we want to say want to prevent default right so we'll say prevent e so it will be the event dot prevent default and this will just prevent because this button is submit type submit this will prevent the page from posting to itself and basically causing a page refresh so let's say this has come back to the browser and have a look at what we've done so this looks pretty good now we have our email password form you know if I just enter an email would say this is a test at email comm set and click this of course nothing happens right but also if it wasn't a valid email I'll get the normal standard html5 email validation because this is a type email field so this is great right so what this actually does is it allows us to basically submit the form capture the user's email and that's pretty much all we need to do okay so we've built our email password form but at the moment it's not doing anything so we need to integrate this with firebase so that users can actually enter an email and then we can actually basically tell firebase to send a reset email to that user so that they can reset that password and login to their account so to do that I'm gonna head back over to my text editor and on my e-mail password form component we have this handle submit method which is called on the forms submit so what we want to do is we want to have a try-catch and we're gonna catch any errors if there are any we'll console.log them out so we'll console.log the error for now i'm gonna comment that out and inside of my try i'm gonna be structure from state so this top state the users email that they've entered into the form and then before i write any more code here i need to import my the earth library from firebase now in an earlier video of this tutorial we created this firebase utility file where we exported the earth library so just to show you that this is our firebase utility file that we created in an earlier tutorial in the series and as you can see here we're exporting all the firebase earth library so we can use this we can import this into our email password form component and what that will allow me to do is within my try I'm gonna use the search async/await we're gonna use the awake keyword here and we're gonna use the old library we're gonna say send password reset email we're gonna call this function but we need to pass it two things the first is going to be the user's email and the second thing is going to be configuration object so we're gonna say Const config it's going to equal an object and we want to we want to pass it the URL this is the return URL this is the URL of the page we want to send the user once they've reset their password so in this case just to give you guys an example I want to send them back to the page the login page so when they've actually reset their email they can come back here and login so I'm just gonna grab this URL and of course you can actually enter you can pass the actual URL that you're going to have on your your live site so you'd enter your domain here if it was HTTPS every HTTP but in this case we're in a development environment I'm just giving you guys a demo showing you how to code it so I'm just gonna use the localhost URL here but feel free to make this whatever you want and I'm just going to pass this with my email and then we want to do is we want to call we want to use this then call back here and we want to specify what should happen when it's successful and we want to also if it fails well we want to do something else so if it passes for now we're just going to say that password reset and if it fails we'll just console.log something went wrong now of course this isn't what I'm actually going to do in these events but of course I want to just demo this to you in the in the browser so let's come over to the browser and let's head back over to our e-mail password form let's open up our consult and the first thing I'm gonna do is I want this to fail so I'm just gonna enter something that is invalid so for example test this is not an email let's enter that and you're gonna see that we get the normal email verification sorry validation there's html5 email validation so it doesn't allow the form to submit because it wasn't a valid email let's enter a valid email so test that email com but of course this email does not exist within my my firebase users collection so this would still be invalid let's click on email password and as you can see here it does post but we get a 400 error and as you can see here we log out something went wrong so we've captured this event where the email password fails but what about if it is valid if it passes and that email password is sent so let's enter a valid email of an account that is in our database and let's click on email password and as you can see here we're now getting that password reset confirmation so we are catering for both events we know when we know when the email password form has has succeeded and that email has been sent and we know when it failed because they either entered an invalid email or maybe it just doesn't doesn't exist so let's handle both of these events so the first thing that I want to do if this succeeds is I want to redirect the user away from this page until the login route right so to do that we're going to import something from react router don't write so then import from react router dome and we want to import sorry want to import with router and we're going to use this so we're gonna come down and where we export default we're going to wrap this around with router and what this will do is it will give us access to the history store in react router so what I can then do is say this dot props dot history don't push and I can push the user to my login round ok so let's test this out let's come back over to the browser and let's enter a valid email and that will actually submit a password reset email so I'm going to enter that and I'm gonna send this and as you can see I'm then redirected to the login route ok cool let's come back over to my text editor and what I want to do is I want to render an error if this fails so I need to do a little bit of a little bit of rework here on the component because we don't yet have a way of handling errors so similar to how we handled it in our registration form component I'm gonna have an errors array which will be empty by default we're going to store that in our state and in the event that there was an error I'm going to create a new errors array so I'm just going to say error equals an array with a string and I'm just going to say email not found please try again and I want to say this dot set state and it will be errors and it will equal our new error array but we're not rendering them out at the moment so again we're going to D structure within our render method our errors array and if there are any we're gonna wrap this in a conditional but if there are any so we're gonna say if errors dot length is greater than zero we want to do something and in this case we'd have a unordered list and we're gonna map through so we'll say errors dot map will grab the current error and the position which is going to be the index we want to return in this case a list item and we want to render out first of all the error itself we're gonna have to set the key which is going to be the position which is the index cool let's add a semicolon here let's save that and let's come back over to the browser and this time let's come back over to email password let's enter an invalid well an email that is valid it an email but it does not exist within our database email password and as you can see we're rendering out our error at this point we have built our email password form and we've also integrated it with firebase so that if you actually submit your email in this form it will actually send you a password reset email and you'll actually be able to reset your password and of course in a few moments I'm gonna show you what that looks like and also how you can actually customize that email template that gets sent from firebase there is one thing that we haven't looked at yet and that's the fact that we're not linking to email password currently from anywhere within this application which is a bit of a problem so what we need to do is actually linked email password from our login page and our login component so let's go ahead and address that issue so what we're gonna do is we're going to head over to our text editor and specifically to our sign-in form component and what we want to do is import at the top we just want to import from react routered um the link component we'll just scroll down and below our social sign-in div will have a new div we'll give it a class of links and we want to just add our our link component will specify the the to prop that we need to pass which is just going to be for slash recovery that's the the route that we created for our email password page is full slash recovery and we just want to say reset password now if we come to the browser that is gonna work but obviously it doesn't look that good right now so we want to add a little bit of CSS let's come back over to our component let's go into the style sheet for our in component and we're gonna target links we want this to be let's say display block will see with 100% said a margin so we'll say about 15 pixels 1.5 REM from the top nothing from the bottom I will just reset that color so we'll say that any link within that should be black let's come back over to our browser and yeah that looks a lot nicer so now you can obviously register once you've registered you can come and login if you need to reset your password you can click through and reset your password or you can come back up here and just log into your account now let's send a password reset email and let's have a look at what this actually looks like when it comes through so I'm just going to insert an email from a user's account that's within my collection it's cool so let's email that password and now let's head over to our heap so as you can see this is the email I have received it's a fairly straightforward template the things I want to point out here is two things the first thing is you can notice the email the sorry that the the name that it is referring to in terms of your website so as you can see here it says ecommerce website password so what is this now this is the project name that you created when you created your firebase project that was at the very start of this tutorial series now I'm gonna show you how you can customize and modify this template as you as you wish I'm also going to show you how to customize the link as you can see the link here that you get that firebase sends is also you know referencing the e-commerce website which is the project name of our firebase project when you created your firebase Aikau start of this series we I named it for this tutorial ecommerce website so if you named your firebase project something different and that's what you're gonna see here but again I'm gonna show you how to customize the email template and also show you how you can customize the the domain and it's actually really really simple you just do it from your firebase control panel but before we get there I just want to come back and I want to show you how to reset your password so I'm just gonna click on this link that's going to launch a new window in the browser and as you can see I have an option now to reset my password so I'm going to go ahead and do that I'm gonna go ahead and click on save when I do it's just gonna pop up saying that the password has been changed you can now sign in with your new password and have this button to click on continue and if I click on that you're gonna see I'm taken back to my login page and what's really important to note here is that if I come back over to my text editor and I go to my e-mail password component when we actually send this request I mentioned before this configuration object and the return URL so you noticed that when I reset my password and click continue I was sent back to this login page and that's why it's because when we actually sent the request we passed the config object object with this return URL so remember it's really important that you pass this in your configuration object so that you always send the user back to the correct location and and return URL okay so now as I previously mentioned I was going to show you how you can customize that password reset email and I'm just about to do that so I've come over to my firebase control panel but again I just want to show you guys exactly what I meant so as you can see here my firebase project is called ecommerce website and that is what you are seeing inside of the password reset email so whatever your chill firebase project is called is is by default what you'll see when you are sending that password reset email so most of the time the title of this project is going to be for your for your own personal reference but there are some circumstances where a front-end you a user of your application may see the project title so it's really important that you consider these things as you're building and creating your project okay so let's look at how we can customize that password reset email because it's really easy to do and definitely worth it so all you have to do is again from your firebase control panel go into the develop tab click on authentication and come across to the templates tab and this is a tablet we haven't looked at yet in this tutorial and just on this left-hand column here you'll see the option for password reset so again these are all the different emails that may get sent out from your application to users depending on you know what you build into your application and as you can see over on the right this is your email template this is what we got sent when we requested that password reset email and you can customize this really easily all you have to do is click on this pencil icon and as you can see you're suddenly able to edit these these text these fields there are some dynamic placeholders so for example the app name again for me that was ecommerce website this is your your product your syrup reject your firebase project name so these are some dynamic placeholders that will insert these values so for example here this is going to be the users email this is the link for the password reset so again I wouldn't advise you guys to modify this too much if you're unfamiliar with some of this code but if it's simple text changes then you know feel free to go ahead and and as as you as you as you want now other than the actual contents of the the password reset email you will notice that the URL that the user clicks on to actually reset that password from within the email is not your domain name so firebase actually takes the user to a custom page within firebase that they can reset their password and then they click on continue and as you saw they send the user back to your website that's how it works now what you may want to do is customize and personalize that workflow a little bit more and one way you can do that is actually by enforcing the URL that the user will see when they click on that link in the email or in the browser when they actually go through and click it you can set that to be your domain name and to actually do that is pretty straightforward within this same window all you have to do is click on customize domain this pop-up will open and of course all you're asked to do is enter your domain name and if you click continue obviously here you can see they will want you to verify that you actually own the domain name and that just means editing your DNS settings for your domain again this is not something that I'm gonna cover in this tutorial because it's a little bit of topic 4 and because it's a little bit outside the scope of this tutorial but it's something that I want to make you guys aware of because it is pretty easy to do and of course if this is going to be your your company website your your business platform then it's definitely worth the effort and again it's it's really easy to do it's not gonna cost you any money and it's just personalizing that user experience a little bit more and and why not so this is how you do it that's how you edit the the reset password email and that's how you customize the domain name that the user will will be clicking on when they want to reset their password and these are all the little things that just improve the user experience that a little bit more and that brings us to the end of this video tutorial but before we sign off I'm gonna head over to my terminal window and I'm gonna check in my code so I'm going to commit my message is just gonna be email password and we're gonna check that in and I'm going to push origin the name of the branch and after I sign off this tutorial I'm gonna merge this in with master now in the next video tutorial we're going to be looking at setting up user roles within our application what that means it's basically setting up an admin area and allowing an admin to log in and access pages that normal users cannot we'll also refactor the way that we handle restricting access to pages currently we're doing that within our routes themselves but we're actually going to start doing it with and hire a higher-order component but of course for now thank you for following this video tutorial please like comment and subscribe for more content have a great day

Channel: SimpleTut

Views: 7,789

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, Forgot Password, Password Reset

Id: FIkdeLA81xA

Length: 50min 52sec (3052 seconds)

Published: Sat May 02 2020