Flutter Forgot Password with firebase | Reset Password in flutter

and welcome back to cing with t today we going to learn how to perform forget password authentication in the Firebase and let the user to change his password so first of all let's quickly have a look what we're going to achieve okay so our application is running and after a few seconds basically user was already logged in so that's why we redirected directly to the home screen let's go down and click on log out click on confirm previously using this remember me we try to store the password and email so by default we already have the email and already have the password being fetched from the local storage but for example there is no password in the password field or somehow in some other place user changes password so when we going to click on this forget password to reset the password the first thing is the authentication that we are going to learn we have to make sure that whatever user is going to write it should be a valid email address once a valid email is entered click on submit it's processing and after that we have our reset email sent to the user inbox so wait for the email to arrive and you can see our email has been arrived over here down below we will also try to check change this default email address to the email we just Ted from the user open the email that is arrived click on this link okay so we have landed on the reset password page in here I'm going to change the password to coding with T at the rate 1 Click on Save it's processing and you can see password changed we can close the Chrome head back over here click on this done icon so that we can redirect it back to home screen now in here let me change that password coding with at the rate 1 so click on this sign button so let's see if it's working or not so you can see user is now logged in using the new password so this is what we are going to create we will also see how we can resend the password as well so stay tuned watch complete video till end because some of the users asking me the questions that we already covered in the video as they didn't watch the complete video so they asked the question that is already inside the video so let's get started we are creating flutter e-commerce application and we are in the section four which is about to be completed and from the next video onward after the forget password SC screen we are going to learn specifically how to get user data the data we stored from the authenticated user how to pass that data to user profile so next video is very informative make sure to hit the Subscribe button and on the Bell icon to get notified for the upcoming videos so let's get started with today's tutorial we are inside the project we started for our e-commerce application and in here we are inside authentication repository so let me just again explain the main authentication in the main radart because this is the main entry point of your application whenever it runs it is going to initialize the Firebase and go to the app to run over application but meanwhile it reaches to the app also it is going to initialize or create instance of authentication repository using get.put so when authentication repository instance will be created right after initialization has been done for the Firebase so when its instance will be created for the first time this on ready method will be executed and it is going to remove the native splash screen and also call this screen redirect method which is going to decide which screen should be appeared fake the current user from the Firebase authentication if user is authenticated and if user email is verified we will redirect to the home screen else we will redirect it to email verification screen if user is authenticated but email is not verified and in the else case if user is not authenticated this means that if this is the first name of the user or user is logged out so we will check that using local storage or using Shar preferences using get storage we create a simple one Boolean variable which is going to get the result if it is the first time of the user we will show the onboarding screen if it is not we will display the login screen after screen redirect we already covered login with email and password register with email and password send email verification then in the previous tutori we learn how to use the sign in with Google we ski the Facebook because currently Facebook is not allowing to create test accounts so that we can test our methods if it's working or not we'll get back to the Facebook later on then we learn how to to use the log out for both Google signin and for the Facebook authentication and then simply redirect to the login screen we covered already all the authentications for today's tutorial we are going to learn how to use the forget password or how to send a mail to the user uh using the link which will lead user to change his password so first of all if we see any of the method we have this try and catch created so what I'm going to do I'm just going to copy the above function with all the try and catch remove the main try from here in here I changed the name to send password reset email and we are going to receive the email on which we are going to send the reset password link so to do that we have to call the wait sign because it is going to be a cloud query so it must wait until this operation will be completed so using again fireb o. instance you can call but we already have the Firebase Au instance created here so we going to use the same one authentication dot very simple password reset email it requires the email which we will receive in this function and we will pass the email to this one and and simply it is going to send the reset email for us so it's that simple for the Firebase to perform operations because at the top you can see for the simple email verification you again have to call one single line same goes for all the functions so rest of the headache is for the Firebase we're just going to use our custom exception handling to catch the related exception so that we can only display a relevant message to the user so just quickly because we have already covered exceptions in previous tutorials so let me quickly show you these exceptions they going to send the code and using the Dot message we will get a relevant response because we don't want the user to see any technical related issues so that's why we should send or display a very relevant messages to the user because you can see we are catching this exception and throwing it again but throwing this message which is a string so only throw the strings that that are relevant to the user and in the Google sign in you can see in the CCH we are not displaying any technical error but we are catching this using if statement printing the error in the debug mode and simply returning null this means that whenever this technical related issue will be appeared either you can display something went wrong or there's no need to display like this one something went wrong please try again so our method is created okay let's head towards the features in the authentication controller we are going to create the forget password controller so I created a new folder over here folder or package they are same then inside I created an empty class which is forget password controller class it extends with the gex controller and it has again a static instance because using get.put we we will be able to create a new instance of the same controller but using get. find we can easily find the already created instance of the glass so you don't have to be worry about this one if you don't want to use it it's normal you can just use get.put and call the next screen it will create the instance okay first of all I've created two variables the first one is the email variable so that we can get the value of the email text form field which is going to let the user enter the email on which we are going to send the reset password after that we have a form key which is forget password form key so that we can perform the validation and down below I have two functions empty functions first one is send password reset email and second one is resend password reset email the first one is not going to receive anything because we will use this email and second one recent password email will take or will receive the email from this function and then we will resend the email both have empty try catch because whenever we are going to catch the exception from authentication repository right from here so they're going to throw the exception we have to catch it when we going to catch this exception we will be able to show the popup to the user so let's start coding first of all in the try we are going to enable the loader then we're going to perform all the other operations so to enable the loader you have to call the T full screen loader because we have created a simple Class A simple T full screen loader class it has a static method open a loading dialogue which receives text and animation both are in string animation is basically a Json file loty animation so we showing the show dialog method pass the context barrier dismiss is false we are using the pop scope once again pop scope is not as in the previous video I explained the pop scope pop scope is updated version of will pop scope so if you cannot see the pop scope means that you're using the old version of the F letter and try to use will pop scope and then we have can pop false this means that we are going to disable popping with a back button so user cannot cancel the operation or leave the screen until this operation will be performed then the container we designed everything using the animation loader the first thing is we are displaying the loty animation then the text then we have a button if we want to display it and in the stop loading we have navigation. of context. poop to Top This loading right so head back over here animation is started next check the internet connection import the network manager let me show you this one this is a network manager it has the connectivity internet connectivity and go to the pub spec and you can see the connectivity Plus Package we using this get the connectivity or the connection status of the current device and in the on init method we are simply calling the update connection which is going going to display the warning sign whenever if there is no internet and here we what we're going to call now is the is connected method which is going to Simply call this connectivity and using this check connectivity function is going to get a result if result is equal to none we're going to display over and false else it will be true if there's any exception we will again return false so is connected will be false so if we receive from this function is false so we have to call is connected false mean it's not is connected we will simply stop the loading and return from here then we have to perform the form validation for the form validation we have to call the form key that we are going to assign in few minutes to the design form if form current state. validate is not valid using the not sign if it is not valid we will again stop the loading and return from here if we are not going to return it will keep executing the next operations and will not do anything right next for the authentication we have to call our authentication repository do instance do send password reset email and we have to pass the email using email. text. trim to remove any extra space so this is going to call the function we have just created and send the email to the user and the email is the email from the text form field after that simply remove the loader because our main action has been completed now we are going to remove the loader and simply redirect to the next screen first we going to display a success screen notification which is going to tell the user that email has been sent and email link sent to you research your password then we are going to redirect to the next screen which we already designed which is a reset password screen in this screen we will receive this email in the Constructor so this means that we have to pass the email and we're just displaying this email inside this text then we have the password title and also the subtitle so the password is already created in the text strings which is a constants you can see over here which is a class text and inside we going to say the password as password reset email sender and as a subtitle we're going to display your account security priority we have send you a secure link to safely change your password and keep your account so before going yet let's go to the screens and inside let's go to the forget password in here where we are manually calling the next screen right from here which is the reset password screen using get to off so instead of calling the next screen manually we first have to call our controller which will going to handle all the operations so to call the controller or create a instance of new class simply we going to use G.P method if you're not using the getex you can simply call the new instance which is a simple name of the class which is forget FW controller so a new instance will be created using this controller now we can call all the other activities so first of all we have to wrap this text form field with a form key so Alt Enter wrap it with a widget use the form assign a form key controller. forget password form key and inside the text form field we have to assign controller which is going to control this text form field so controller. email because this email is you H over this you can see it's a text editing controller also we need to add the validator we going to use our custom class T validator do validate email and by removing this automatically the email will be passed which we will receive from this function and this function is simply check that if the value which we receive is not null and is not empty if it is we are going to return the string because whenever validator is going to receive anything in a string it is going to display it as an error so we have to return the string if the expression is again not valid we will simply return invalid email address otherwise we will return null so that return will be received to this validator it is not going to display any error once done inside this function whenever this button will be pressed we are going to call controller. send password reset email this is the first function that we are going to call which we have just created it's going to start the loading check internet do the home validation and email to the user remove the loader show success message and redirect to the next screen then in the catch if there is any exception we first want to stop the loader to loading and after that we want to display the loader error snack bar and the message whatever we received so so this is the snack bar we created a custom snack bar using static we can directly call this class tader do any function that we want to use so we have three functions success warning and error snack bar they are using the snack bar display the snack bars so this is done now simply copy everything from try to catch or replace with the reset email password in this we just going to not deal with the form validation because user will not be on the form but user will be on the screen which I've already sent the password so we will receive the email not from the form but from here stop the loading we will also not redirect user to any screen but simply display a message that email has been sent again if there is any exception we will catch it over here now we all assigned this forget password reset email right over here so it is going to call the next screen which is reset password screen it has a simple image then it has a text saying the email title subtitle then we have two buttons first button is the done button which is going to lead the user back to the login screen so we will call get out off all off all means remove all the screens and head back towards the login screen at a constant and using this function which is the next button which is the resent email button so whenever user is going to trigger this you can also add a timer on this button so that after maybe 30 seconds or this much of seconds you want to trigger this but for now if you see over here we have already created the instance using get.put for this class for get password controller we don't need to again create a new instance so that's why we simply going to call forget password controller do instance this is the benefit of creating instance because it is going to call get. find for us and it is going to find already created instance if there's no instance it is going to throw some error so make sure that there is already created instance before calling do instance then we are going to call recent password reset email and we are going to pass the email we received from here so this function will be executed at is going to do the same so we are pretty much done over here let's run the application okay so our application is running let's click on forget password and in here when we going to click on the submit is triggering the validation let's try to add the email click on submit it is processing and you can see popup it means that email has been sent so wait for a few seconds so that we can receive the email and you can see the email has been received so before clicking on that also you can see we have the same email we just passed so let's try to reset the password click on this link we can also customize all these values from the Firebase console but for now let's click on this reset link and it is going to pop up a new field in which we can reset the password so I'm going to again set the same password we set for the demo account coding with T at one let's say 2 three make it unique so let's save this password changed now we can close this one both add two words here click on done previously it was coding with T at one so let's add two three click on sign in it's processing and we sign in with the application okay so that's it for today's tutorial in next tutorials onward we are going to see how we can manage the user data how we can get the authenticated user data from the fire store which we stored while creating the registration screen we'll also populate all these details of the user we try to change the name of the user so make sure to stay tuned and watch all the videos once again thank you for watching I hope you learn something new if you learn something new please like the video and if you're new to the channel don't forget to subscribe and hit the Bell iccon to get notified for all the upcoming videos thank you for watching take care Allah h

Channel: Coding With T

Views: 2,819

Keywords: reset password flutter firebase, forgot password flutter firebase, flutter reset password firebase, flutter forgot password firebase, flutter firebase auth reset password, flutter firebase auth forgot password, flutter firebase forget password, flutter forgot password screen, firebase forgot password flutter, how to add forgot password in flutter and firebase, forgot password in flutter, Password reset in flutter using firebase, coding with t, flutter firebase tutorial

Id: awwxYgHF_kU

Length: 16min 36sec (996 seconds)

Published: Thu Dec 07 2023