📱Reset Password • Firebase x Flutter Tutorial ♡

yo what up welcome back to another quick flutter tutorial in the last couple of videos we created this nice looking login screen and so we can now log in users as well as create a new user using this register page so the natural next thing that we're going to do is to create a little text widget here that says forgot password so if the user did forget their password then they can click on this and we'll send them a password resetting link to their email so let's give this a go now the first thing we're going to need to do is to add that little bit of text that says forgot password so if you look on our login page and we scroll down let's go to where our password text field is and underneath here i'm just going to create a text widget and let's say forgot password cool now if you save this you can see it's in the middle automatically so the way we set this up this column is getting everything to be centered so i actually want this kind of on the right hand side so one little trick you can do is to wrap it in a row which will bring it to the left hand side and you can change this main access alignment to the end which brings it over here and all of the padding i've used is actually a padding of 25 so let's say horizontal and 25. cool so there it is and let's actually bring in another size box above this as well sweet there it is and just so that we can let the user know that this is a link you can click on kind of like this register now button let's grab this text style and give it to this guy as well cool so we can click on that link now once i click on this it needs to be tappable so let's wrap this text widget with another widget called a gesture detector and if we tap on this then let's execute a bit of code so if i tap on this forgot password then i want to bring a new password page so we're going to use a navigator.push and we're going to navigate to a new page now we haven't created this page yet so let's just write this first we're going to return what should we call it let's call it forgot password page okay so if i click on this then we're going to return this password page which we're going to create now so in the pages folder let's call it forgot password page and let's create a quick page here so a stateful widget called forgot password page and let's just give it a scaffold and in the body let's create a text widget saying enter your email and we will send you a password resetting reset link something like that so let's come back to the login page and import this new page that we just created and let's see if this works so i'm on this page and if i forgot password then it brings us our forgot password page okay so it looks like everything's stuck to the top so let's just decorate this ui a little bit so first thing is maybe just create an app bar because it brings us this back button and i'm just going to change this to the purple so here you can decorate it however you like but let's just leave it like that for now and this text widget let's wrap this in a column okay because we want to say this bit of message to enter the email and we also want to come back to the login page and let's grab one of these email text fields so it's going to be the same text field and we're going to have to create this controller so let's come up to the top and say final email controller is a text editing controller okay so here it is so the text controller just keeps track of what's inside and then finally under this let's create a material button and we'll do something when the on pressed is touched and here let's say uh reset password and the color we can just make it like a light d purple cool so here is our button and just to make this look a tad nice i'm just going to main access alignment all of this to the center cool and this text widget let's just align this to the middle as well and let's just add some quick padding here just to make it look nice and finally i just want to put in some sized box between these guys so we can make it look a little bit more prettier later on but let's just get the functionality right here so if the user types say a particular email which is their email and we click reset password then when we press it we want something to happen so let's call this method password reset and we haven't created this yet so let's come up to the top and first of all dispose of this controller and we're going to create the method here so future password reset and we're going to say await firebase auth.instance and you should be able to see here send password reset email and we have to give it the email so that's just this controller here and let's just grab the text and also just trim it so that we can format it correctly cool so so far looking good now one thing that i want to do is if i just put this in a try catch this will help us identify if there's any errors so if i click on this reset password it'll call this method and we're first of all going to try to reset it so if that happens then good now if it doesn't then what's the error and i'm just going to print it in our console over here so let's give this a go now there's a couple areas that you can run into so for example let's say we come across an email that doesn't exist in our database then if you reset the password then you can see if i just bring this up you can see here it says there is no user record corresponding to this identifier so this is because we don't have a user with this email now if that's the case then i actually want to print it to the user like if the user types in a wrong email and they reset it right now we can see it in the console but i want to give some feedback to the user so the way to do this is maybe let's just show a dialogue and so let's create an alert dialog and in the content let's just put in the text widget for the error okay so this is the error that we just printed out but this time let's print it out in our app so just get the message and convert it to a string so if i try this again and get put in a wrong email and i reset the password then it says the error okay so yeah you can customize whatever you want your error message to be but it's good to give the user some feedback i think it also works if you don't put in a proper email like if you just put in some stuff like this it says the email address is badly formatted because it doesn't have like an ad sign and stuff like that so yeah this is why firebase is so easy to use but okay so now let's say we actually have a user and so one of the users that i created in the last couple of videos was mitch gmail.com and so similarly let's copy this show dialog and paste it over here okay so if we are successful in resetting the password then we want to let the user know about that fact so say password reset link sent check your email something like that so if we put in a proper email then it will show this message password reset link sent so check your email then the user can go back to their email and reset the password cool and then if you check your email then you should have gotten this reset password and we can click on this link and put in whatever your new password is new password so password is changed you can now sign in with your new password awesome and once you've done that you should be able to sign in using your new password cool so that's how we do it good thing we sorted out this particular functionality if you want your app to be actually usable in real life then you're going to need this sort of service in your app so now that that's done we still have a few more things in authentication that we can take care of like for example we can put in a loading screen like a circular loading widget to kind of give some more feedback when we're loading and also maybe when we register instead of just getting the email and the password we can also get some other details like maybe the name your age and you know extra information for particular users and things like that so let me know if that's something of interest but i think we're making some good progress let me know if you have any questions or any problems i'll try to help you out but other than that thanks for watching and i'll catch you guys in the next one laters [Music] you

Channel: Mitch Koko

Views: 41,550

Keywords:

Id: Sp4_2zi0kZg

Length: 13min 8sec (788 seconds)

Published: Mon May 02 2022