Flutter : Authenticate user with Firebase(Email and Password)

hello my gorgeous friends on the internet how you are doing so in this video i'm going to show you how to use the email and password to authenticate user into your flutter application all right and basically i'm not going to be covering google and facebook authentication in this video but i want to cover it in the future video and also i'm going to cover how to set up phone authentication so just subscribe if you haven't and hit the notification button so that you won't miss the update all right so the of course i want to introduce you to so it's an event a build an event application with flutter and firebase 2021 edition so with this course you will be able to get amazing you get amazing knowledge so you learn how to use firebase adding firebase authentication creating database fireclass firestore creating countdown notification which is basically sms and local notification and setting up users updating the user and how working with github also uploading your project to play store and the things you need to know before you upload your app to play store so this course is actually available for five days with a coupon code so i'm gonna put a coupon code under the description so the first part people to get it within that they get it for a discounted price for 9.99 which is but outside that outside of five days is going to increase so i want you to rush and get the scores before it increase all right so let's get started to business so the first thing i'm going to do uh okay i believe you already know what this authentication is all about so it's like it provides a back-end service and to help you authenticate your users to your app so it supports authentication using password phone numbers basically we're going to work with passwords and email in this course in this video sorry and we can also work with other identity providers like google facebook and twitter but that will be in the future video all right so the first thing you want to do now is to add firebase to your project and i actually did that in i actually did a video on that in the previous tv i did so i will put the link also in the description below it's actually the video i showed you how to uh send push notifications to your flutter applications i'm going to put that in the description below so right now i just have an app so just an empty app and nothing serious is going on here so now what i'm going to do first thing first to get started using firebase authentication is to go to your firebase account so i believe you have an account and create an app so this is the app i'll be using and once you get the app you click on authentication and this will take you to the page so this page we need to enable the email and password so without this we won't be able to make use of it we won't be able to create a new user so you want to make sure you enable this if it's enabled already you just leave it in uh if you want to use phone you can enable phone as well you can enable google and the rest of them all right so since we're working with only email i'm just going to enable that and right now currently we have no users for this project so what i'm going to do now is to go to the so i believe you all know the site which is flutter fire is actually uh a website that just shows you how to use firebase services and the rest of them so i'll be taking making some reference here though i can do it without the sideboard for your stake and i also want to introduce you in case of those that don't know about this site so you can find easy solutions to implementing firebase into your application so the first thing we are going to go is here all right so we're going to introduce us to the plugin we need to install so you're going to copy this plugin and go to your firebase your your app and uh go to your prospect of the yammer file so i'm going to paste this here inside my prospect the dmr file and once you paste that and make sure you run flutter pop get okay so we just let that run so while it is running i'm going to create three classes okay two classes basic one is for handling the screens which is the ui the interface of the app and the other one is for the provider to actually communicate with firebase and then we can create a new user and the rest of that okay so right now the app is just blank and you can see my leapfrog i just have two folders and right now this one is not needed it's useless i'm not going to you make use of it so this means that that is here which is the simple stuff you have seen right here so what i'm going to do i'm going to create two folders package so the first one is going to be screens so it is going to hold all my screens and then i'll create another one for provider so this is going to hold and we're going to implement the firebase stuff so here that's fine i'm going to create uh alt class or audit provider let's just go with all provider and okay so this is where we're gonna we're gonna create a class to handle the function for creating a user signing the user in and resetting the user and also signing out a user so i'm just going to create a class so this is going to be art class okay remember it's a class and i also need to create the instance of the firebase authentication so this stuff has completed running and we're just going to call firebase alt so if yours didn't show up you can restart your project or okay and we're going to have alt here and then i will just create the instance of it just initialize it firebaseart.instance right so this fox function is for creating an account and the second one will be for signing in user you know to sign in user this one will be for resetting password so we set password and this one will be for okay we can call this sign out all right okay so i'm just going to leave all these classes blank for now all these functions black okay and then i will go on to create the art classes the odds pages so the first one is going to be for login the second one will be for register reset and also i want to have okay screen all this should be inside alt class sorry i'll just create all screen okay so just copy this refactor it inside and do the same thing with this okay so do the same thing with this as well so what i did i just moved all of them inside that folder okay so i'm going to create another one so this one is going to be for the splash screen so this is going to be splash page because it's needed in this project and now then the finally is going to be the main page the home page of our application so it can be anything depending on your home page your dashboard whatever page you want to show first to the user whenever they come up whenever they sign in and all that okay so this is going to be the home page so basically i'm just going to work on the homepage really quick so we're just going to have uh it's just going to have an app bar and a test that is showing the email of the user so right now we cannot retrieve the email but we there's still a method to just put it there okay so using firebase odds so i just have a stateful widget and this is going to be home page and here i can return a scaffold okay i can return the scaffold and the scaffold we have on our bar and to just welcome you that's all so no too much function so it's going to be a test we get with a welcome test and then we have body which is going to be a center widget okay and we have error here close this okay so we have center and i'm just going to return the tests okay so this test is just going to be the email of the user okay so you just have email and the email is going to come from let's call this email so to get this email there's a method using firebase alts okay so the firebase auth returns so many things that are needed so right now we cannot read review but we just want to put it there okay because until you sign a user is fully authenticated we'll be able to retrieve this data so i have the email as a string and i will have firebase dot instance dot current user so from here you can get so many things you can get the email of the user the user id okay you can get the email the user id phone number photo url but using email and password you'll be able to get photo url you won't be able to get the split name you won't be able to get phone number just use the id email i believe so to get all this you will need to use the google sign-in or you use your phone number to open the gate to get the phone number on the user so in this case we are just going to go with the email which is provided and i'll pass it here as a string but right now we cannot do anything even if i hot restart the app so what i'll do now is to go to my splash screen to check if the user exists or not okay so the splash screen is just going to be a simple page you know and i'm just going to show the flutter logo there okay and so it's going to be a stateful widget and this is going to be splash i hope i'm not too fast i'm just trying to make this thing really quick so that the video won't be long you know and then we're going to have a center widget in the chat which is flutter logo and i will give you the size of 80 to make it bigger all right and save this so now go back to my home page and no not home page sorry we got to move this home page because i don't think it's needed we can go to our main dot dot okay so we have the app bar we have the home home okay so instead of returning this home let me just return a splash okay so for now we can just comment this don't worry we're going to need this later because we need to initialize firebase app but i don't want to do that now i want to run the app number and then once the error shows you'll see the reason why we need to initialize or firebase app okay because i want to do it in a way even if you encounter it later you just remember okay there's an error like this i encountered in a video okay so you know what to do and how to initialize the firebase app okay so here we just return splash screen all right and if i save it you should just return the splash and you can see the flutter logo showing up here but right now he's not doing anything he's not taking us to any page or whatever so what i'm going to do i'm going to create a register page once i do that i'll create a login page that will contain email and password and then i'll create a reset page that will just contain email and then the user can just you know send the email all right so i'll put an import here okay and there's gonna be a stateful widget so this is gonna be register page okay so this is going to be a scaffold widget and abba so we can have a title i believe okay yeah i believe we have register all right so inside there now i can also create a body so this body we just have a column so we just just want to create a simple ui there is no too much design to read just a simple ui and the first one is going to be test from feed and it will require a controller so this controller is going to be email controller and then i'm going to have a hint so you must have input decoration we can have hint test so this is going to be email all right i don't think we need any other thing there again so let me just give it some space so using the size box we can use height of 30 okay so we can alright so now we have this but i'm going to change this instead of password instead of email it's going to be password and we can change this one as well to password so to get rid of these errors i will just need to create the test editing controller for those two buttons for those two controllers sorry okay so you can copy this yep yep we can copy it and paste it here and change the style to password all right so i think now the errors are gone okay okay so now to see this stuff working and i will use some if statement here so to actually see the speech so i'll go to uh my splash screen where is she where is it okay so where is it let's see i will create a firebase class first so check if the user is null or not so if the user is null we are going to take the user to the login page to create an account but if the user is not null we just take them direct to the home page all right so normally when the user is always known is when the user is just in your app for the first time or the user they'll sign out from your app or the user on install your app or you clear the local storage so that way the user the firebase will just see the user as an old user but if the user is not known let's say the user you have used your app once and then just close it from the recent tab and come back again to access the application so it shouldn't be all right so now what i'm going to do splash splash error somewhere uh let's fix that okay all right so i'm going to create a firebase art class and this one is going to be firebase art dot instance okay and that is good and now i can use my future builder to actually delay this screen for three seconds future delay and it can set a duration [Music] with a sequence of two seconds yeah i just want to make it shorter instead of longer okay all right so now i can check if the user is null or not so if uh if odds dot current user is equal to null so what do we do we just take you direct direct to the sign-in page but since the sign-in page is not ready i'll just take the user to the register page and then later we're going to change that all right so just go to register page all right and don't forget to close this okay so else and copy that so if the user is not known we just take you straight to the home page which is the home page which is this i believe which is this you just take it to the home page all right so you see your email and your welcome message all right so just change this to home page all right and make sure you close this terminate it here and you can do a hot restart and sorry yeah you can do it hot restart now and let's see so if it's not take us to our register page if it's not now take us to the login page okay so this was the error i wanted to show you no firebase app default has been created okay so we need to call the firebase.initialize app following this method we are still going to get error though is still going to work okay so if you come here now which is the main.that and create the stuff they access to do which is around firebase dot initialize app right firebase is enough firebase oh it's not firebase.initializeapp so if we happen to do it this way now which is the method they showed us here it's still going to work but we are still going to get the error and which is not a good practice you're still going to get the error okay let's try it again the error should show you can see the error is showing and then we are going back so it is not what we want we just we don't want to see the error instead we want to see a progress indicator or something else we don't want that error to show so there's actually an easier method if you go to the firebase site and those side and you go to overview all right and if you scroll down there's a prerequisite that means we need to initialize the flutter fire so our weight flutter initialize app so this method is not actually good so what i'm going to do i'll just first make sure you call this widget of flutter binding dot in the initial initialize and then we are going to copy this and this is actually the main thing and they use feature builder there is actually another one where you use stream build i believe okay i can't get that one but i think there's another method where they use stream builder okay okay this is stateful builder sorry uh stateful widget but this method i don't really like this so i'll just go with the one of future builder and i'm going to copy this and add it to my app so you can see how they initialize it here with the initialization and all the stuff so i'm just going to copy this one okay copy that and i'll go back to the projects all right so go back to the main dot dot you can see the reason why i commented this home page all right so i'm going to uncomment it again okay so and what i'll do is to remove this okay and then replace it with this one like so all right so now we have the home page so instead of returning this home page we're just going to return instead of returning the splash screen we're going to return the home all right which is this so now what is happening here is that we use the future builder to check for initialization because this is actually a future so we check if the snapshot has error what we do we just show a container so let's just show you container there so you won't see the error and then if the snapshot dot connection state is equal to connection state that don't that means the firebase has been initialized successfully we just navigate to the splash screen then if there is any error or no not an error if it's still loading like it's not yet initialized then we're going to show a cycle progress indicator all right so it can just return center and is to have a child cycle sometimes you may not see the cycle line indicator because it's actually so fast so you won't be able to see it all right so this is how you you initialize the floater app easily without any yeah any red screen or whatsoever so now we are going to hot restart this again let me bring up the app and how to start you should see there will be no you will you will see that red error again so let's try it again the red the red screen is not showing just take us straight up to what we want all right so now we have successfully accomplished this part so i can remove this okay and then we have the register screen something actually happened okay all right so what i'll do i believe okay you still taking us here that is because i've already done this once i've already done this once okay so this is not nice so let me see okay let me just sign out so and okay i'm going to create a currently the reason why this page is showing is because i'm not the user is not know because i've already tried to do something like this before so what i'll do i'll just create a icon an icon which is a action icon and it's going to be an icon button so this button will help us to sign out the user okay so we're going to use exits to app i believe okay and i'm pressed so this method will just sign out to the user for us so we can just sign out user here okay so but now we are not going to sign that user yet okay i'm just going to implement the function and then we can sign up the user but for now let me just do some twerking here it's not actually a good thing well just check if the user is not now then go to that page okay so let me just use this so that we can and so that we can just do the register login and reset page is up all right so it should take us to the register page i believe all right so this is a register page it can rub this with a padding to give it some nice feeling so let it be space here okay so that's the reason why i added that okay so now we are going to add a button so this button will just enable us to i'll use a flat i'm not really a fan of flat buttons but let's just go with that and i just like using container with a gesture detector you know to using container will just help me to that way i'll be able to style the button with any how i want can i also add a shadow if i want so i can do this one is going to be create account okay and we can have okay save that we should have this grid account so i can give it a color let me give it a blue color okay and then next i will create what about if the user has an account already so if you have an account you just take you down to the i'll be using a gesture detector for this but first so if the user has an account if you click on it to just take it to the login page so it should be of height 20 okay so i will use the guest chat right here on top so basically once you click on this it will just take you to the login page so let me have the child first and it's going to be [Music] already have an account then you can log in okay and i will go to the splash screen and just copy this stuff uh yep yep it should be push okay so just copy this stuff oh no let me just type this manually so we have navigator the push okay and we have the material page route and we have the contest and we can return the login page right now login page does not exist so we're going to create that real quick login page does not exist so login then what about if the user forgets his or her password we are going to reset the password for them and we can have the cost size bus height uh okay 10 let's go with 10 okay so i will have this so forgot password so what you do is just reset so it should just take you to reset page and this one is going to be the reset page okay and i don't want to spread this stuff correctly all right so now we have accounts that we'll see okay so now we have the login page and the reset page we're right now showing error because we have not created the spg so what i would do since they are all similar i'm just going to duplicate this copy it go to login page and paste it just make some changes so instead of register page this is going to be login page and make sure you copy that and we are going to put it here and do the same thing here same thing as well all right so now i also have the test editing controller for email and password so changing those back to login and you also change this back okay email email password and login account login and we can remove these okay so this one is gonna be already have an account no don't have an account so you'll be able to okay don't have an account so you'll be able to register as a new user all right so in this one which is for reset page forgot password reset all right so i made a mistake somewhere this reset shouldn't be in the register page so i'm just going to get rid of it it should be in the home page all right so now we can we can import this and i'll do similarity into the reset page just paste it okay error somewhere so just copy this and uh paste it here okay and paste it here all right so already have an account already have an account login so it will take us the login page so this one instead of create account it should be reset accounts okay and we have the password shouldn't be for resetting an account so we're going to remove that and we only require email when you try to reset a password so this should be reset and you remove this one as well and we are going to change this to reset page okay and copy that we can also replace it here and do the same thing here a similar thing here as well okay similar thing here as well all right so i think everything now are properly linked so let's just see error is somewhere odd screen and then which screen is that login page so we need to import the reset page alright so now i think i can do a hot restart to show everything all right so now we have the email we also have the password we can also have a button for creating an account so now you can log in if you already have an account and you can log in you can we need to change this to register so don't have an account register so once you click on this register it will take you back to the registration page if you click on reset it will take you to the reset page and it has only email click on this it will take you to login page all right so we have successfully implemented that so now the next thing we are going to do now is to work on this alt package where we are going to create a class for actually handling the authentication stuffs all right so the first thing we are going to do is for though we have created an instance so it's going to be a future and it will have a return type of string so we have this as script account okay and it's going to take a name constructor which is email and since you're authenticating you since we are creating a new user username and password we also have a string of email and password and he's in a sync function so we are going to use a sync there and actually there's also actually uh method already prepared for us so what i'm going to do i'm just going to go to the flutter fire page and go down to authentication usage and i'm just going to copy just copy that for the email and password because i don't want to keep typing this continuously so i will just copy this which is actually for creating if you look here now we have create user with email and password so we just copy that and go to your project and i'm going to paste it here all right so since you already created this instance you're going to make use of this so i will just remove this we don't need it all right so use your awaits and alt dot create user with email and password and we're also going to remove this dummy email and return the one we have in our constructor and also remove in our parameter survey and we also remove that and put this okay so what is actually happening here we use exception handling to try and also catch the error so i wait so if us the just alter the great user with email and password if it's successful we can just return remember this is for welcome this is for register we can just say account created okay accounts created you can just return that remember it has a return type of string you don't need to return an integer so here we check for firebase authentication exception so if the if is a weak password we can just return this stuff to the user hey the password is weak and try a stronger password then if the image is already used like another user we already have another user with the same email we can just return he may already exist exception all right else we can just return anything uh error accord so we can try again so all right so now we have that for creating an account and now we're going to work on creating a new user so i'll just copy the same function because it's just similar stuff we are doing so i will not really copy that function so i will just okay i will copy the function and then just make some changes okay copy it paste it here and then i'm just going to remove this try and catch all right so this should be sign in okay and i will go back to that site so i think they have that for scripting signing in the user all right so we're going to copy this as well and go back to our app so inside here i'm going to paste it and remove this stuff okay so it should be a weight art dots signing with email and password okay if you see the previous one was create user with email and password okay error of code okay and the email also i'll also need to change it to this email and also i'm going to change the password as well so it's going to be password and then once everything is successful i'll just say welcome and then this one i'm going to return the error which is the firebase exception okay and we can close this and i can also return this if the email or password provided is wrong okay and make sure you close this all right so now we have this one set up and the next thing i'm going to do now is for resetting the password all right so to do that password it's just going to be straightforward stuff so it's this similar thing and doing firebase email and password indication is not difficult as you think so how we do reset password function and it doesn't require a password it only requires email and this one also we can just use resets send password reset email and it doesn't require a password so we can remove it if you hover on it it only requires the email and the action code setting which is not required for us so we can just say here email sent all right and i don't need to use firebase alt and the rest of them so we can just remove it and i will just catch the error here and just return error of code so whatever the error is just print it out and uh make sure you close it accord okay so now we have this one for resetting the password we have for signing in the user we have for creating a new user all right and then for signing out a user since he does not return anything we are just going to use the void here sign out and i can just call the firebase which is the art class we created above dot sign out so it does just simple it's just simple nothingness so now to actually make this stuff look good so what i'm going to do i'll go back to my splash screen and i'm going to check this stuff so if it's not and you do your stuff it's just not and do your other stuff so what i'm going to do now since i've already implemented that button i will set i will call this class which is this uh where is it is it this sign up okay so that i'll be able to sign out the user and then let everything go back to normal so i'll go back to the home page and so on click on this button i'm going to call the art class so remember the art class we created which is from here the the provider auth provider so we have this host class and it will give us access to each of these member functions okay so i will go to home page i can call alt class dot sign out all right asap this is just simple and you want to make sure you save it and once you click on this it's going to sign up the user but it's not a good practice what i want you to do that if you click click on sign up button any sign up whatever it is let it bring up a dialogue or a confirmation confirmation message to tell the user hey you are about to get to sign out are you really sure you want to perform this action and you know all those type of messages all those type of warning messages so until the user performs uh accepts yes do not sign the user out so we're going to click here and it's going to okay so we it's not working let's see firebase odds let me do how to start okay so it has been signed out but the reason why you didn't do anything was because i was supposed to navigate the user back to the login page once you sign that and that was my bad so what i'll do i'll just copy this and go here so once the user signs out you can just navigate the user back to the login page okay so maybe you want to create another user no problem you just do your stop there all right so the first thing we're going to do is to work on the login page i want to show you something so try to create the login and then try to to login using any password without creating an account so let's see what firebase is going to throw at us all right so but by default if you are using all this stuff you need to show it progress indicator okay you click on create account you should show progress indicator hey wait the stuff is processing and then once it's done you get a message or you get any action so to do that i'm going to create a bull lane variable so it's going to be of name is loading and i will give you the value to be false all right so currently it's not loading so inside this inside here i'll check for conditioner statement so if it's loading if it's loading is equal to force you can just return this main this main page which is this one then if it's not if it's loading then we can just return the center widget with a cycle progress indicator all right and i think this is good so now let's implement the s login really quick so the first thing we're going to do once you click on the login i want to set state and then put it it's loading to be false yeah to be true so once you click on the button it's loading we start loading so if i click on this button now okay let me save this stuff and i'm just wondering how i'm going to get out of here okay okay is a login page okay so let's go to login page okay so if i click on this button now you should see the progress indicator but right now nothing is happening okay so what i'm going to do is make sure you close this just hot restart okay so we have gotten that and then once it's loading we can then perform the action so call the hot class again and then we can call the sign in user so sign in user and it takes the email of the user which is the email controller we created so we're going to get it from email.test and you also want to get one to three minutes to remove every white species so this is this email and this is the controller we created here so the next one now is to pass the password and it should be password so this password is actually going to the password and the email will retrieve any test that the user entered inside here all right so our rights and we can use the then method so once this is done and we can just check for conditional statements so with this now we'll be able to know okay when are we going to send the user to the home page is this thing an error message or whatsoever so to get that remember i returned uh if you go to the other class what provider why creating an account i return welcome so this welcome is where we have a successful response so now we go back to my login page and then i will check if if the value is equal to welcome that means the user account has been created or you have successfully authenticated the user so what i'll do i'll just go back to this splash screen so you have to copy this home page so just navigate the user straight up to the home page widget okay and copy that home page and we navigate to the home page all right else so if the user if there's any error whatsoever error like this no user found wrong password and the rest of them we are just going to show a scaffold sniper okay and you should have the value at the time of the string okay all right so we are good okay my phone yours is connected so i'm gonna import this home page as well and i think everything is good except this one okay so we're just gonna connect that all right so okay my app is still running all right oh it's not running so we can just run this real quick okay so while that is running uh we can okay now i've successfully shown the uh the scaffold messenger all right but now this thing is still loading so what i'll do i'll just set state and here updates okay so i'm just using state because i just want justice to serve here so i want it to be so fast so we can just use first and the same thing if we encounter any error we can still show this as well okay and then we are done with this home page so now let's implement that for the register page so i'm still going to copy the same thing because it's still the same method or true so we're going to copy this and go back to register and look for the register button okay okay so this is the register button and we paste that and so right now i'm going to import this first and then this welcome message let's see so alt class dots create user okay first import the art class that will be able to access the field inside so it does create accounts okay and it also takes an email and a password we already passed the email password which is this and this okay so we don't need to do any changes there again all right so now we have this so if the value is equal to it shouldn't be welcome so i think it's something accounts created all right so is accounts created okay so the welcome is for email so password if it's successful we return account created so what i'll do now just go to the register page and then change this stuff to accounts created all right so now i also need to implement this is loading so remember the same thing we did we created a boolean value boolean variable okay and then i use it here the conditional statement to actually return a progress indicator if this stuff is already loading okay so we can just return a progress indicator here which is cycler okay and don't forget to wrap it with a call a con a center so that it will show on the middle here all right i think we are done with this register so now let's go to the reset and then implement this real quick and then we test it all right so now i'm just going to copy this it's still similar thing all the processes so i'll just copy this go to reset and we have the reset button here right so you do the same thing but this time now we are not going to the login page we are actually going to we are not going to the home page actually going to the login page all right so once you reset just take it to the login page and uh we don't require we don't need a password for this so alt class first import it and this stuff should be changed to reset password and the email is not required get rid of it all right and put this stuff don't forget okay so now we need to create okay e value e values because i account created in this case it's not account created i think it's image sent okay yeah it's email sent okay so let's go back to reset and this should be email sent all right so i'm going to create a variable of this is loading as well above here okay remember it's also a boolean value so it's loading equal to force and i'll do the same thing here to return a progress indicator so if it's loading is equal to force so just stay as it is return that page then if it's not we can return a center widget with a cycle cycle up progress indicator okay i think we are done we are done already there is no other thing we need to implement so let me just do a hot restart and then we are going to test this app all right so splash screen i think i've done that okay so if the currency side is equal to node go to login screen go to login all right oh it's still registered should be logging okay so let's do this one more time run it and let's see where it takes us to all right join the login page okay so now let me try to create an account remember we have not let me try to log in an account remember we have not created any user so i'll use my email okay and i'll use one two three four five six seven eight nine okay and if i click on this login button now the progress indicator will show and the message we if there's any error or whatsoever okay so now we have no user found for that email that means we have not created any email we have not created any accounts using this email before all right so now what we are going to do now is to go to the register okay and let's go to register and still using the same method to talk to destiny okay and then we use the password all right and then create an account and let's see who really now is taking us to the login the home page so we have certainly created an account so if i do a hot restart now it's not going to take us back to login page it will take us direct to the home page so let's see that now you have it we have the home page okay so right now if you want to sign up just click on this button and it will take you back to the login page again all right and it's actually handled by this so we are going to call the list okay it shouldn't be reset okay home page you remember to call this we call this once you click on this button that button sorry to just sign the user out and then navigate to the login page asap and that is actually what it did here all right so now let's proceed to creating a new account so go to register okay we have already created a new account so let me try to log in with that my previous account the account i just created with okay first let me try to okay let me try to login and on to three four five six seven eight nine okay so that's the password if i click it should just take me to the home page so now even if i do a hot restart it's still going to take me direct to this home page okay so from here i can log out and now let me try to log in with uh an e a password that does not exist the password is incorrect so one two three four five okay let me try with seven and if you click on it you see wrong password provided by that user so the password does not correspond with that of the user okay so now let's go see let me just assume i try signing in and i have forgotten my password in this case let me just assume i for what's in my password what do i do i'll go to the reset page remember we implemented the reset page we implemented it and this was the reset page just alt dot send password reset email email and the rest of them all right so we're going to click on reset and we also require let me say i enter an email that does not exist you should also throw an error you see error occurred so the email does not exist at all so what i'll do now is to just use the top to destinate okay so i'm going to use it to register reset the password so click on it we should say something email send wasn't shown okay we set password we set password uh okay if email is sent i just we can navigate to the login page so it has been reset already i just navigate direct to the login page and this is it so we have the login page and i believe by now the email has been sent to our email address but this thing i did here is not a good practice so if you're doing your own make sure you show a dialogue or a kind of message to tell the user hey the password has been the the reset link has been sent to your email address all right so right now i've when i clicked on that the email address has been sent so i'm going to open it really quick in my application so let me just remove this okay all right so i'm gonna go to my email app real quick okay so my email app is running already so i have the the link this one was the previous one why i was trying to test it out so this is the second one and you can see the link follow this link to reset your por your project and it has some number password for your account remember this stuff you can still change it if you want yeah the way it's been structured the name and the rest of them so you can just go to your firebase console all right so this this was the app all right so we actually went to so to do that just go to your authentication so currently i believe we only have one user which is talk to destiny so if you sign up as many users as possible you should have them listed so let's just go to that page first so you can see we have only the snare assuming you have so many users created that has already created the account you'll see all of them listed so now i'm going to go to templates and you can edit how this stuff will look in user's email address okay you can edit this all of this they are customizable you can also edit the password and the rest of them you can also see your usages what you have consumed so far and you can also okay a signing method i already talked about this and then this is where you see all your users so now let's go back to our app and i'm going to show you how to okay so now we have received the reset email so once i click on it it's going to take us to a special site another site and where we're going to have we will be asked to input our name our new password so in this case i can just put f f f f okay so how many is that oh no i don't like that so let me just give you one two three four five six seven eight okay so eight is the new password and then we can just click enter and you can see you can now sign in with your new password all right so let's go back to our floater app so just go back to the flutter app real quick and now we can log in with our new password so let's let me say talk to destiny ad and it was one two nine right or one to eight it should be one to eight so if you click on it and now we have successfully navigated to the next route all right so guys it's been a nice journey it's been a nice one so far and i want to appreciate you for taking the time to reach the end of this video and please do it to subscribe and so that you won't miss all the important uh videos i'm going to do so because next video is going to be about google and firebase facebook authentication so you don't want to miss out on that make sure you subscribe hit the notification button and i will see you in the next video take care guys

Channel: Destiny Ed

Views: 5,120

Keywords: flutter, firebase authentication, email and password

Id: 5wkxkQ1vbrg

Length: 59min 48sec (3588 seconds)

Published: Tue May 11 2021