Login with Email and Password Firebase Flutter | Flutter Login Remember Me using Local Storage

and welcome back to boing with t today we going to learn how to create a login authentication in which we are going to use email and password authentication to let the user login in our application so first of all let's quickly have a look what we're going to create let's run the application and currently because user is logged out so we should see the login screen and you can see we are redirected towards the login so let's add email and password once uh these details are added you can click on Remember Me this is going to add email and password in the local storage and later on we can when user try to login again we will patch that data email and password from the local storage and display right over there so let's click on remember me and click on sign in let's wait for a few seconds and you can see the user is now logged in head towards the profile on log out and you can see still we have that email and password and simply click on sign in again and close the application now this time when we are going to run this again we should land on the home screen and you can see user is logged in so that's why we cannot see the login again so this is what we are going to create we creating filter e-commerce application and we are in our section 4 to create the login back end you can download the complete code link is in the description and in the previous first three sections we have already completed the complete design of e-commerce application so if you want to watch that you can again get the complete playlist link watch all the previous videos link is in the description so let's focus on today's tutorial so first of all we going to learn how to get the form validation first we will try to add the validation in the form then we'll see how we can toggle the remember me and also toggle the password so we can see the password or hide the password remember me is going to get email and password and store it inside the local storage and also when application is going to be launched or login screen is going to be appeared we will try to fetch that specific data if there is anything we will display it on the screen then we're going to trigger the email and password authentication and we'll try to First add a loader then we going to check the internet connection check the form validation if form is validated we are going to pass the data to the authentication repository in which we're going to create our login with email and password function so let's get started with today's [Music] tutorial we are in our B Dart and in here you can see in our prev tutorials we initialize the local storage and we also preserve the flutter splash screen until we want and inside once the Firebase initialization completed we redirect it to authentication repository and in here in the on ready function we remove first the splash screen then we check the screen redirect over here if user is not done in the screen redirect you can see we first get the current user over here and we check if user is not null this means that there is some user who is logged in we'll first check if email is verified redir to the home menu and if email is not verified and else we will redirect to verify email screen which is the previous tutorial and else if user is null then we going to check that if it is the first time of the user from the local storage we will pass the user to the onboarding screen and once once user completed the onboarding screen this is first time will be false and user will remain always redirected to the login screen okay now over here in the login section of the same authentication repository we're going to create a new function this function is again going to a future type of function which is going to wait until this specific operation performed so it's quite obvious the same like register with email and password the one we created in the previous tutorial and also we are sending the email verification so it will also be an async function so that whenever this function will be called compiler should wait so that this operation completed and in here we are using the authentication which is Firebase au. instance variable and using that variable we are going to call sign in with email and password function and pass our email and password we received in this function and it is going to return the user credentials so once done then at the bottom you can see we have default exceptions we talked about in the previous tutorial in detail and and then we are throwing the custom exceptions the reason to do all this the first thing is that our application should not crash the second one is that we should not miss the message that we want to display to the user and also we don't want the user to see any technical message so that's why we implemented all these custom exceptions when you hover over any of these you can see if email already in use is the case of exception then we return a relevant message to the user so list goes on once this function is completed let's go to the login do dot which is the design we created in our section two let's go to login form and inside this form we have to first assign the key of the form using that key we will be able to identify which form is this and after that we have to assign validation and controllers of each text field so that we can get the data so for that let's go to Features authentication and in the controllers we have empty folder name we just login right click create a new file login controller hit enter create a class name it login controller and it is going to extend with the gex controller the reason to do is very obvious that we are using a state management and gex going to handle few things for us it is typically not dependent on this gex controller so if you're not following the gex you can create a simple class and in here let's create variables first so first of all for the form we have two text form Fields email and password for that we need to create text editing controller for the email one for the password and for that you have to import material R do and then we have a form for the form key I'm going to name it login form key and to create a form key use Global key in the square brackets pass form State and you have your login form key created we also need to create get storage instance so in the pup spec you can see we are using the local storage which is gr storage you can use shared preferences package as well they both are almost similar so using the gex storage we created a variable which is local storage and import the package over there and also so for toggle password and remember me we have to create two more variables these will be a simple Boolean variables okay I've created two variables first one is remember me which is false and hide password is by default true and next you can see we have do OBS written next to these two variables OBS means that we are creating this variable when you H over this you can see now it is not a simple Boolean but using the OBS now it is rxb which is a gex feature to redraw State on the design CU if you're not going to use any state management and you're working on stateless and stateful widgets then you need to use the stateful widget to redraw the screen using set State method so because we are using State Management set state is going to redraw the complete screen whereas getex using OBS variable is going to only the draw a specific small wiget so we will see that in a few minutes so this OBS means that now this specific variable is being observed by something so now this is the observ Observer this is also the Observer now these two will be observed by some entity provided by the gex which is OBX so by name OBX you will know that OBX is the Observer which is going to observe all the variables that contains OBS as a value or that has the RX type so now let's head towards the login form and in here to create an instance of this class we are going to use final controller is equal to using get Dot put method we are going to create a new instance of login controller so this get.put is simply going to create a new instance and put that in the memory so we going to create a new instance using controller and assign form key controller. login form key and for the each text field because each text field has a controller so we have to call controller do email text editing controller and for the password use the password text editing controller for the validations of these two text fields we have to first call email validator inside the text form field we have a property validator when you hover over this you can see it has to be a function with some value which is a string nullable string and it is going to return a string as well which is also nullable so how it works we have to first get the value whatever the value is going to be on the field will be returned over here we will use this value to validate our specific text field and we're going to definitely create a function using T validator class which we have already created helper class dot I'm going to call validate email and pass the value you can see this class we already created it it is a simple D validator class it has a static function validate email will receive a nullable value value is null or empty it is going to return a string which is email is required if the pattern doesn't match it will say that invalid email address and otherwise it is going to return null so this function is going to throw an error whenever it is going to receive a string if it is going to receive a null it is not going to throw anything so same for the password let's copy and paste the password we going to not use the password validator but because for the login we don't want to user to be strict or specific that this much of length cannot exceed but we only want to make sure that password should not be empty so we have other function which is only going to check value is null or empty it is going to return a string which is using a field name and for now field name is password so it will say password is required so field name will be password you can hover over this so first thing is field name second one is value so past next for the remember me you can see inside this Row in the check boox we have a static value which is pro so let's change this using the controller dot remember me Boolean value so to add actual value of this RX bu or whatever the type is currently it's Boolean type to get the actual value which is Boolean we have to use dot value now it is going to return actual Boolean to this value so now this means that checkbox is dynamic and if we go to the screens in the sign up in the signup form you see the password field over here which has a controller of password and also obscure text which is going to hide the text which is dode password. value again going to let the actual value so we are going to copy this replace the password over here so we have the validator we have a controller we have obscure text which is going to hide or show the text so we will pass the hide password value which we created over here by default is true this means that it will be by Default hidden next at the bottom we are just having on Press On on the top of this suffix icon so whenever that icon will be tapped this onpress will be executed and controller. hiide password value will be toggled so let's say we have true it will add a negation sign so it will assign false back to this value so we're going to toggle this and then we have the icon if we have the hide password value true then we are going to use this icon otherwise we are going to use this icon right now the question is how you're going to toggle it definitely we will toggle using this icon button whenever it is going to press the value will be changed when this value will be changed we want to redraw the screen and we are not using the set State method set State when we call the set State and it is let's suppose a stateful thing it will redraw the whole form but if we are going to use the state management and simply because this is the OBS value RX type this is being observed we are going to wrap the text field inside a function and a wiget which is OBX widget so this widget is going to observe the values of hide password field whenever it is going to change it is going to redraw the text form field only and we will see a refresh state right same we have to do for this checkbox Alt Enter wrap it with a widget widget is opx and it has to be a function instead of child let's create a function to remove the dots and this means that now whenever this remember me is going to be changed it is going to redraw using the OBX now when it is going to be changed using this on change method we again have to toggle this controller do remember me fetch value will always be equal to the negation or the opposite of remember me value Control Alt l so you're done with the remember me all the fields password togg added the validations added a form key so let's close the login form head to towards the login controller now this means that we have all the values already inside over here v i created Qui function because we have already covered each and every step in the registration screen in detail so if you're new H you can watch the previous video to know each and every step in detail so let me also walk you through for the first step is to create the loader whenever this function email and password will be trigger so if you head towards the form and search for the sign in button using its on press previously we are simply redirecting towards the home screen but now we are going to use controller do email and password signin function we are going to trigger this function and when this function will be triggered it is going to start loading which is a custom class we already created using showdog property it has a pop scope this means that user cannot go to the previous screen until the operation is completed and then we have the loty animation after that we're going to check the internet connectivity if using again a custom internet network manager which we see in the previous video using it is connected method we are going to check that if it is true or false if is connected is true we will not do anything using the not sign we can check if it is false means we have no internet we will stop the loading using the function which is navigator.of context. poop we stop the loading and we will simply return back from this function same for the validation we will call the login form key do current state do validate and using the not sign if it is not validated we will stop the loading return back and over here new thing I added which is remember me do value if remember me. value is true this means that that remember me checkbox is selected what we going to do is we're going to use the local storage which the instance we created over top local storage. write to write and read data from local storage we have to work in Json format like keys and values so when you H over this right you can see the first one is key which will always be string and second one is value which can be anything it is a dynamic value so what I have done is I have created a key remember me email and stored email. text. Primm it is going to get the text from this text editing controller trim all the spaces and store it inside this local storage and the second value I'm storing is local storage right remember me password and using password. text. frame I'm going to get the text only in case if remember me is selected right next we going to trigger the actual login and email authentication using authentication repository. instance. login with email and password which we have created over here at the start of this video it is going to get the email get the password trigger the sign in with email and password it is going to return success message not the exception this means that everything works successfully we will remove the loader and we will simply call authentication do screen redirect which will check the user if user is logged in let user is also verified and if the over here user is trying to log in but user email is not verified user will redirect it back again to verify email screen instead of the home screen and if in case we are going to catch any exception from over here we will simply stop the loading again and display the error message using stack bar we created over here so now it's time to run the application okay so our application is running Cur we can see the splash screen and we have redirected towards the login screen and the onboarding screen because we already watched that so we cannot see the onboarding again so now this time we're going to use the same credentials we try to create our user when we registered it so let's try to log in with the same credentials so the password now you can see it is being toggled so it's the same password we try to create when we're creating account cing with at the rate of one and then you can see we can also toggle the remember me and when we are going to click on this it is going to trigger that OBX because the value of this remember me is going to be false on it's on press and it is going to trigger the OBX that OBX will redraw the specific icon now let's say we're going to click on remember me so that it can store email and password as well so click on sign in loader initiated it is going to check the internet perform authentication and you can see we have successfully logged in into our application and how we can check that that if it is success or not so let me close this application click on it again so this time we should land on the home screen instead of the login so you can see inside the profile using the log out feature which we already created in the previous tutorial which we can also log out we cannot see anything in the local storage the reason is because we stored data in the local storage but we did not fetch that data so to do that inside the login controller we have to press control o to overwrite and override the on init method call the super do on init and after that we are going to assign the latest values to email and password so to assign the values we'll use email. text and that text will be get from the local storage. read method to read the data and we have to pass the key which we want to read key will again string so let's head towards here copy this email paste it over here same for the password copy and paste it if you don't want to store the password you can skip the password line password. text will be this one now let me rerun this again this time it should fetch the data and display it on the screen so that we don't have to write it again okay so our application is running and now you can see when our application opens it by default have our email and the password when you toggle this you can see the password exactly same so simply click on the signin method it is going to load and you are signed in so that's it for today's tutorial in the next tutorial we're going to learn the Federated identity social signing the first one will be using Google and if you want to download the complete code you can get that complete code from the description below okay so that's it for today's tutorial I hope you learn something new if you learn something new please like the video and if you're new to this channel don't forget to subscribe and if you have any question you can ask me down below in the comments thank you for watching take care Allah h

Channel: Coding With T

Views: 6,302

Keywords: login with email and password firebase flutter, email and password authentication firebase flutter, flutter firebase authentication, flutter login remember me, flutter login page remember me, form validation flutter, flutter form validation, how to store data in local storage in flutter, how to get data from local storage in flutter, password visibility toggle flutter, remember me checkbox in flutter, firebase email and password authentication flutter, flutter firebase auth

Id: A358yxRc9JA

Length: 19min 41sec (1181 seconds)

Published: Tue Dec 05 2023