Flutter Firebase Authentication - Forgot Password | Reset Password for Flutter Firebase

hello everyone welcome to my channel and in this video we are going to learn about forget password for firebase authentication so in the last video we had seen how to do firebase authentication it's seen sign in and sign up right so if you see we already have a sign in screen and we have a sign up screen and you can sign up from here and then with the same username and id you can sign in so if you haven't seen that video please do watch that video and then only come to this video because this is an extension to that video so i won't be going through all the firebase settings and everything because i have already talked about all those things in my last video so you should have the link over here and you can watch that video if you haven't seen it so now let me just give you a brief demo so what we have currently is i can enter my email id i shivoh edu at gmail.com i can enter my password so the password we had created was welcome and then i can log in so this is my login screen it's pretty simple i just have a logout button so when i log out i come to the screen i can click on here and come to sign up screen so what we want we want a forget password so actually this video was requested by some of the viewers they wanted to see forget password as well because i had forget password in my screenshot in my the main project but i did not show it in the last video because it was not it was only focused on sign in and sign up so let's let's see how to do forget password so what we have to do first is we need to create the ui so right here somewhere i will have forget password question mark option and when user clicks on it we will go to a reset password screen so the screen would look something like the sign up screen just that will have enter email id only and then over here instead of sign up we will see reset password to do that let's go to our sign in screen sign in screen and what we want over here in the sign in screen we want to create forget password right here right so right after enter password we will have our forget password so this size box of 28 would be something else we will create it at like eight so let's do it make it eight and then i will have another function forget forget password right and this will also take our context and now let's create a function right here we'll create it right here so that would return a widget right and let's name it forget password and have build context context let me quickly write this code for you so you can see our forget password is ready the ui is ready and what we have done in this function we have just made a container and inside the container we have a text button so the text button has the text for get password this one and on click of it we are not doing anything so just simple very simple container and text button what we can see over here right you can see we have given height of 8 and it's too much i believe so just give it five and it should go up yeah and this should be fine so these are giving warning because these are constant so just put const keyword so that it looks nice and we don't have any warning okay so now we have our forget password button ready now on click of it we want to go to a reset password screen so for that let's create a new screen so create a new file and name it reset underscore password dot dot right and this file will as i said it will look similar to sign up screen it just over here we'll have reset password and then only one enter email id and then we'll have reset password so the logic is user will write email id when they click on reset password we'll call firebase reset password function and that will send an email to that user and then user can go to their email and reset their password as it works right so to create the reset password screen just let's just go to sign up screen and let's copy this whole code and then paste it over here right and then just let's just rename this one rename this sign up screen to reset password screen reset password screen right and we don't want email uh we don't want the password we don't want our username so let's remove that we just want email text control and over here also we don't want the username so let's just remove this whole thing we don't want user to enter password so let's remove this as well and then sign up button we don't want sign up button we want a reset button so let's remove this whole sign up button so yeah this whole thing let's remove it so yeah but we need a reset button so if you know we had written everything in our reusable widget right so our button looks something like this sign in sign up button and it is only for login and sign up but we want to use this we want to show similar kind of button for our recent password as well so instead of calling it sign in sign up button we will call it firebase button firebase code button so whatever is your uh project name you can take that and then uh instead of taking this bool we will take the title itself right so string title so that we can use it everywhere we want it so instead of checking the bool we will just put the title so that's it now we will have error everywhere else so let's just go and say firebase button and instead of true we want to tell user that this is sign in button so this is sign in right so sign in this was the text i believe and then let's go to our sign up screen and over here also we have to change the function name and give our button title sign up right and then in the reset password we will do the similar thing we will just call that button over here and we don't want sized box twice so let's remove it and then say firebase firebase button okay context is fine button title should be reset password right and then on tap what we want to do we want to call our firebase authentication right so i don't need this okay so this should be good and now we can go to our sign in screen and call our reset password screen on click of this forget password so let's remove this and we want to call we want to navigate to our recent password screen so for that navigating dot push and then over here material page route you want to go context inline i want to call reset password so this is our new screen which we created right so now when i click on this forget password i should be able to go to the reset password screen so then i click on it so it came to reset password screen but it still says sign up so let's go over here and over here instead of sign up i will say reset password okay so we have our reset password screen so now what i will do is on this on tab what we will do we will call our firebase authentication and we will call a function which is very simple let's call it firebase or dot instance dot and then we will say reset yes so we will call this send password reset email right so this will send an email to reset your password to this email id so whatever email id you have entered over here so we will take our controller for controller and dot text right so this is as simple as that right so on click of this on click of reset password button we will send an email to this email id whatever we have provided right you should do some authentication over here like verification whether email id is entered or not if it is empty like some form validation we should have we are not doing it in this video but in the real project you should have some form validation to check whether this email id is uh entered or not like whether user has entered any email id or not or email id is correct or not so something like that but we are not going to do all of that we will just enter an email id send a password send a reset password link to that email id so let's say my email id was hershey go right and i forgot my password let's say i forgot my password and i try to sign in then i will get some errors so even we were showing the error over here the password is invalid and user won't be able to log in right so in that case what will what will you do you will have to reset your password because you forgot your password so you click on forward password and then you enter your email id and then send an email also on click of reset password as soon as pass email has been sent to that email id if it is done successfully or then i will say pop to the main screen navigator of context right and then i can call cop so this will make sure that we pop from our current screen and close it okay so what will happen when we click on uh reset password button it will send an email and then we will be popped out from the current screen and will be on the main login screen so let's say she go edu at gmail.com right so when you see so we'll remove that and then reset password i clicked on that and i came to the screen now let's go to my gmail account and then let me just refresh and i have my reset password for your project so this is giving me my project name you can change all these so i will show you where to change it and then if you click on this link i have so many links because i had tried it two times before showing it to you so when i click on it it will take me over here and you can enter your new password so i'll say my new password is password itself so i'll say pass word okay i'll show you this is password okay save so now if i enter pass word sign in and i'm in okay so this is how you do reset password if you go to your firebase authentication page like on the firebase dashboard if you go to authentication you should have this so all the email ids you have tried and npc horseshoe edu gmail.com is there and if you click over here it says reset password disable account delete account all these options you have you can click on reset password and you can reset the password of any of your users from here itself and also it says send a password reset email review email template so if you click on it you it will take you over here so password reset so you can change all these things right and this is how you can change the format of your email that which which you are getting over here to reset your password so that's all that's all you do reset password for firebase authentication thank you so much for watching and if you like this video please do like and subscribe and let me know in the comment section what what is your suggestions like what kind of video you want to see on this channel and i should take your suggestions as well thank you so much bye

Channel: Harsivo Edu

Views: 9,615

Keywords: firebase, flutter firebase, flutter firebase forget password, flutter firebase auth forgot password, Flutter Firebase Authentication, Flutter firebase authentication forget password, firebase reset password, flutter firebase reset password, flutter firebase change password, firebase authentication, flutter forgot password, flutter reset password, flutter change password, flutter forgot password firebase, flutter change password firebase, flutter reset password firebase

Id: JR-jEbfQciw

Length: 13min 1sec (781 seconds)

Published: Tue Jan 11 2022