FLUTTER • FIREBASE Authentication • with BLoC - Basic Email Password Auth | dmgcoding

so welcome to channel guys so in this video we will build a flut app using Fus for authentication and block for State Management so we will Implement both the Google sign in and the normal email and password sign as well sign and sign up both of them so this is what we going to build uh let's let me how start this so it will when they upload it will show a splash screen and if the use is not logged in user will redirect to login screen and you can user can go for sign up and sign in and switch between those uh screens and when if the ex us signed you know when you to sign in you will go to this home screen and in the home screen you can add new task and you can it will show how many task are done how many task are in progress and how many are in Waiting uh so you can use it will show the list of the active task as well you can delete them you can add edit them uh change the status of them and so on so we will use fire store for this as uh managing as a DB as a database so you will also learn how to use file store database uh with the block statement State Management as well so that will be in a different video this on this specific video this will be a series of video so first video will be the registering as a as a normal normal user with the username and password and then uh Google sign in as well and so on definitely subscribe so you won't miss the those videos and let's get to the coding so first of all I have uh I will explain the folder structure first so in the main do do I have normal uh main method and this in this case I I'm using um I'm using Google fonts for the fonts so I will load fonts when the app loads before the run app uh I will load the fonts in here so which is basically it loads the Google fonts uh in this case lato and popins fonts so and then initialize dependencies uh so in in the initialized dependencies I will initialize all dependencies and I'm using G for that I will explain this in depth but uh now that's what happens before the run up method so when app our app loads it will uh load the phones so we can use those phones in our app and also they initialize the dependencies like repositories Services uh stuff like that and then it will show the splash screen in the splash screen uh splash screen we we will just uh delay we will uh show an empty show an image normal image like if we do this we H start will show our image and after 3 seconds in the in in of I'm waiting for 3 seconds and rooting the user to sign page so so I have M do I have Pages have all of the I have six screens so have six folders for that so those screens so as as example Splash Splat screen it will have blocks and we use for blocks all of the blocks related to this screen will go in here and all of the UI code related to this uh smash screen is will be in the views folder so that's the pages folder so let's add let's create the uh FAS project let's go create new and enter the project name so let's call it task cap and continue we don't need uh analytics for this one so I'm going to create it without it let's wait so project is ready and let's continue so uh this is how the P consol looks uh when it is fresh so in the before in uh in the past you had to to create a new Android app and create an IOS app and if you're using for web you had to create a web app but now you you just have to uh just do one one time and you can do all it will configure all of them for iOS for Android for web all of them for in one go so this is the easiest and fastest way so let's go to this one so you have we have to we need install fber CLI and log in fib and login so this is the first step so and install FL s we already have that if you if you're building on FL then you already have FL s so create a new project we also have the project so let's do this this step let's check the let's check how if I am logged into the flutter so let's call flutter login sorry uh it is five L uh was it not uh it was F login so let's type in this uh terminal and enter okay fibus is not found so let's also install this fusi I'm on a Mac so we'll have to do this one PE so this is what I have to do Let's test this and go so enter the password if you're on a uh if you're on [Music] a Windows then what you have to do is download this bner for Windows think you just have to download it and install it it will down okay it is a exe file so I don't need this one here if you on Windows just go to this link and it will download something some software so download that and you just have to install it so I have install the Fus tools Fus CLI so let's clear this terminal and let's try again for Fus login and okay allow fibers to collect CLI and emulator shoot us Ag and a reporting information uh don't need that and sign in uh I'm going to use this account you choose your account and set hello and it is Success uh so as successfully logged in as to to my account and let's play this so first uh first step is done so let's go to the next step and this is we have to activate flut fire C so let's copy this one and run this command do Global activate flut fire C okay the yeah that is done uh so this it says this is not in my part so let's do this one as well and run it as well so um guessing it is okay and let's let's go for this one copy that one and paste it as well and hit enter so it's asking which platform should you configure support so which which platform it is is it Android or iOS what do we need this app for so we want both uh all of them actually so you can select and unselected so you can in this case I have selected Android and you can with the arrow Arrow case you can go up and down and if you don't need Android you just have to press space in there so it will as you can see it removes the tck tick mark so uh in this I want all of them I want Android iOS ma OS web so I'm going to just hit enter so in this case in if with this command it will uh do the configs in uh in in our project for all of these platforms uh and also it will create projects uh it will create the console apps in the fibers console as well so we don't have to do anything it is the fastest and easiest way to inst install uh FAS on your flutter app so it's asking uh it's asking the files Android build Android app build will be updated to apply FS configuration and gr build plugins we want to continue of course we want to do that changes it is uh I'm going to hit enter uh okay you have an error when we are facing an error so as you can see we uh i p an exception uh it went um it throw an error so and then I ran this command do install exert project and the error is error was fine then after I run it I need run the command this command again so if you face this error then uh just run this command so now uh after I'm running it again uh the fibus C command again it's uh we have configured the fibus apps uh that we need so let's clear this and let's check uh we we have done this one again so let's go next and we finally had to do uh we finally had to do this command uh for the in our main do dot so let's go for the main do Dot for the other stuff we have to initialize the FES so we don't don't need this in here what you need in here uh is this this part so what it does is uh it's initialized the F Bas and this file uh this file is Created from that uh that command we ran it is automatically created so so this is there's an error that's because we have to import this this one and the fire base we have to install Firebase 4 plugin if you're using for any fire service whether it's fire authentication or fire store database you have to you have to install uh fire Firebase core plugin so I'm going to add this FL uh sorry flut P add F SC and hit enter and it will install that plugin and let's go here import this fers scope then we are good to go let's uh for to check this let's fill this and run it again so I first another error that is from Port if you're on Windows this won't matter to you for you but if you're on Mac then uh let's go for CD uh C let's go to the iOS folder and let's run P date what was that P repo update so for repo update and I think it's fine now let's back and run this okay so it was successful our app is Project is running without any errors so we all good to go and let's before before starting uh let's check the fibus console so we are done with this so let's continue to console and if we refresh this you can see we we didn't uh configure them manually they already uh with the that command f CLI they all they all of them are done so which saves us a lot of time so they are done if I go project settings we can see our we have separate apps for web Mac IOS and Android previously we had to do this manually configure them manually so that part is done we have integrated fibers uh fibers with the our flut app so what do we have what we do next um we need to add the username and password username password sign up we have to add the implement the registering user for this app so before that we we also need we we will need some few dependencies or we will need few packages let's go for pop D let's check the our so we have I have installed Google fonts yeah I'm using good get it package and F go so we will need FS o this this plug in uh so we will need this one you can see so we can just uh copy this one and paste it in here or we can go here L pop ad pop ad and our type the package name so in this case fascore fascore uh there's an ER so this should be double D sorry so FL add f s it will add all the depend uh the dependency that we need so let's go for this uh sign up screen we are first going to implement sign up screen so in this signup screen I have sign up screen I have I have breaken break broken it to two parts so it's first one it is uh sign up page widget this widget and that widget shows this underscore sign in widget which is stateless widgets both are stateless widgets so why do I need two widgets I could just uh use this cold I could have used let's actually let's increase the font size so you can see this better so that's better so I have basically I have uh this sign up page widget which shows this underscore signin page both St why we I could uh show this EX at this screen to here the reason I'm separating that is because uh we are going to use blocks so the four so when we are using block when adding blocks flut blocks I'm going we will have to wrap this we have to we have to provide this blocks so to do that I will use this widget I will wrap this signore sign in with a block provider so in that block provider I will provide the block that we that this screen uses so that's why I'm I'm using two stus RS for that one so let's add the block as well so we also need block because we are going to add uh we are going to use block for State Management so we're going to use flatter block so let's add this one as well let's go for the terminal flutter pop add Flore block and that's done so we have so the signup screen this is the signup screen that you see uh it's just basically a stack widget uh in the the bottom stack it has a image and then there's an overlay of just a with opacity and then there's our sign a p body which is this form uh all of these uh buttons and form fields and another button and this text uh that is this widget here let's go to that widget that widget we have a Google sign up button which is this one and email input field this one and then the password input field this one and then primary button I just uh Global widget that's uh just for the buttons because we if we are using buttons for that we will use the same style so we can use this primary button that's a custom vet that I Creed so so imp to implement sign up let's create let we will do that via in a repository so I'm going to create another repo in the LI folder so Repose and this Repose we will need we will have we will at all all of the all of the reports we are going to use so in this case all going create another create a folder inside that in this case uh I'm going to create o report do so this will be a class o report and this will have all the functions all of the functions related to the uh authentication so login register uh login register log out sign in uh sorry and Google sign all of that so let's create each functions for that so there the first one is the create user so we're registering let's get uh yeah let's create uh say create user with username password so this should this will return user that user is from uh FS we don't have to create an model user cluster I will import it from Five O Five O user we will return Five O user but if uh it can be wrong it can it can we can come uh p errors so if we Face an error then it will be null so that's why I'm putting this Mark in here so create user with username and passwords so this is our main uh this this is for the registering user so just create a user with uh username and password uh I'm going to first use a try catch block so try catch in here uh I will add on five Bas on uh sorry firee of exception exception catch e and this one if the you if the if the exception code is weak password that that is because password Pro is too weak and this is the error handling and the try Tri block I'm going to use final potentials that's we don't need that final crates I'm going to call it final crates and we will need F uh instance so I'm call it o will be a private variables of five base of instance just going to be this so five of instance uh we need that uh variable F on instance for calling all the functions in this case we want to create a username and a user with the username and password soore o create username use create user with email password I'm going to call this method and this is going to be a wait it's an iing function so so in this case this will be a future of type user which is not also notable so add the asnc as well so we we also have to so to create a user with username and password we will need username and passwords right so that will come as arguments so string email and string password we'll get the them as arguments or as parameters so we will call this method if if if there's if there's no error if the user creating user is successful then uh it will we will it will call the next line of this function so it will be return uh we can use final user with thisp do user so we can just we we have to return the user right so can just remove this part we can just return r. user so if it is uh if there's some error then we just return null if if this method returns null that means the uh the creating user wasn't successful so that's the rep that the the method that we want that we will use in the block so let's uh add the block now let's go to these Pages uh sign up and in the views we have we have sign up with Google and sign up with normal email and password right I'm going to use a block for this one I'm going to create a new block so let's go here if you let's go to uh right click on this blocks folder and create new block so I'm going to use two blocks uh for the authentication actually in this for this screen one for the normal username password screen let's call it uh let's block uh if you don't see these options that's because you haven't to install the extension in the vs code so go ahead and install block extension I'm going to create a new Block in here so that will be basic oath call it basic oath so I want to it will create this uh three files with the folder so I'm going to prename this this is not block this is a basic code bod so it will create these block okay so it will create this block and create the events and these states so let's modify this as we want so we have basic State uh in this block what our state our state is uh when you type some email that's that should be in our state and when you user pass the password that should be in our state and when uh when users those that's our state actually uh so let's go here and uh let's not call it uh field it's a normal class let's call it a maybe final class and uh we need uh string email and that should be final final string email final string password and the form status so there's also form status in here so if uh if the form is uh error if it is an error then error State like that so let's create an enum here enum uh form stas which will be initial um I think it's simple enum right enum initial I don't need this one as well so initial pending if the form is pending if uh if form is pending and then success and error so these are the form status so we need the find we also need the form status in here so actually let's make it like this so form status status and also we also need uh string ER if there if if it draws an error then we need we need that error as well so error message and it is not so and we also need to another method that is static it not static uh we need a copy with method I will explain this you will get why I am creating this lat later let's first create this the copy with I'm going to call it copy with this will just duplicate the value U duplicate the instance uh with the replacing some only some so it's going to be basic code State cre create basic code State uh we'll also have to create the Constructor as well so before that let's create Constructor so required this. email required this do password required is. status and then the error message the error message that is not required so so we I'm going to get these four uh variables values for those those four variables as optional parameters so this first one will be string and can be n we can pass we can choose not to pass that so email bring password and string uh yeah WR message before message let's go for form form status for status status and then uh that's also nullable like this and then also the error message so error message for email what you're going to do if this if you if this if you are not passing any value for this email argument let's check that if email is null then use the value in the this object so you will get the idea after when I'm implementing this but when you're using this function but just for now just understand this uh this email we have to do that for every everyone we have three other state three other variables so properties of this class so password if this password is if user is not passing any value for this password if it is null use normal the password value that already is there the status as well status if it is now use the default uh the value that already is there stus error message error message this. error message and that is done this is our called State that's our state and in the block we will have to give this state as in here as well so but before that let's create the events let's create the events uh what events do we have events we have uh email can be changed that's an event and password can be changed that's an event and and the button we can tap this button uh that's form submit that's an event as well so those are three events first one first one is one class uh email changed image changed and it should implement this extend this class so this is one event and there's another event that is uh password changed password changed extends this basic uh this abstract class so this there's another event that is form submit that also exchanges so we have done we have our state class and event classes event classes done let's go to the basic o in here the Block in here so basic block we have we we have to give uh the initial initial state for this our block so the initial state will be of this B go State and we just had to create uh we had to give email is empty string or we can actually in the state we can take this uh we can make this empty in here we can uh we can make this empty don't have to make it required so if it don't if you're not passing anything that should be that means that's empty so status equals uh status equals form status do initial okay now it's okay so we don't have to pass anything like that and we just pass the initial basic code state so we now we have to register call bags for each event so we have three events this one and this one and this one so we have to register events for them so let's go here IMA changed event and we have three two more and the second one is password changed and the third one is form submit okay so let's uh create the callbacks the void email email changed that should takes this event this type of event this is event type and then we need emitter of type this state we call it Emit and in here uh we forgot one thing in the events we have to get the event we have to pass if we are passing email changed event we have to pass the new value for that email so what is it will be a string so that's uh in here final bring email email value and I'm going to get this from in here let's do the that for the this one as well so final string password and we have to get the we have to get that value from The Constructor this our password and in here so so before creating that actually let's uh duplicate this for other two uh events scbs so this is image change this is password change password change and this is form submit form submit so image changes here and the second one is password change so event should change in here and the form submit is in here so this this type of events let's leave them here like this so so what should we what should happen uh when the image changed we just should we just have to update the our state right uh if you don't remember our state is the this basic go State and it has email password status and message when when in a event of email change when when user type something in here then that our state of that event should change so let's call let's get first the new value for email let call new value for email just for just just to be your quickly for you new value for email we can just call it email and event email this is the new value that we get from the event when us to type something in here so the final new value for email and event uh so what we going to do we have to create a we just have to emit a new state right Emit and we have the access for the state we already have a state right we already have a state when we are creating uh any initially we are passing some State and we can just uh we can just mutate that State uh kind of M mut similar to mutating like I mean editing if you only want to change we want to use the same values for other values but email we want to change only the email we can use copy within here that we the method we created that we created so State the Curr State we have and use copy with that is the this function that we created copy with and we passing email here and that is this value so what this does is it will create a new new basic code State object with this email the email that we pass okay so we are not passing password or status or error message so they are null so if they are null we are assigning the same uh objects some same values but for the email we are passing so if because we are passing email so we will use the email value that we pass and it will create return a new uh object like this and it will remit the new state Let's uh for just to be clear for you to see clear so let's start this uh this is the new state new state is this one and and let's emit the new state so that's what happens so that's what happens uh for the password change as well so if you use a types in password then we have to the we have to edit the uh can you can we have to update the other state so I'm going to do it this time I'm going to do it just in one value so emit state. copy with password is event. password like this so this is just to show you and we can do it in one line so okay so for the final one when form submit what do we have to do when form submit we have to check email and password is empty or not if they are empty we don't have to do anything we should uh create the user so let's first and if the user email and password is not empty then we can call the create user uh this create username create user with username and password this function we can call and get the user so uh let's do that so first of all check for check uh for empty values or validate uh so let's first check for email and uh let's go find email equals state. email final password equal state. password and let's check if email email is empty or if password is empty then just return then don't to execute a code after this just return if it is not if they're not empty if one if any of them are not empty then we can call the our this create usern name with username password function so so to do that we want this Alo we have to access this Alo right I'm going to use this uh we can just get this oo in here uh in the construct of this block when the when the when this block is created for the first time we can just get the this instance so we call it allo uh this see all repo allo we will get this from The Constructor thiso I'm going to use thisle and call create usern name with password and email and pass the email and password so this is an async method we'll have to wait for the values so uh can be future void actually so let's wait for this one the final us user is a wait on this one a wait like this so this user can be null because if if everything if everything goes correct then user can be null user user will be they will have be will be a value for that but if there's an error then user will be null so let's check if user is null then we have to then uh if you is null we don't uh I'm not going to do anything in here if us is not null that means us success created user us created successfully so let's go in here if us is not now that means uh uh creating creating the user is successful so let's s a new state that is a state just like before copy with uh copy with the status is form status uh form stat so form status success and just that that's all there we have our block basic all block is all all done we can go for the views in here and let's go for email input field and there there a value for own change there a so to use uh to use sign up uh use this block in this wave in this CI code we had to w we had to provide the block so I'm going to wrap I'm going to go to Here sign a page uh before this so I'm going to wrap this one with the block provider so let's uh it's not giving me the import so let's do the import manually but block let's import this and let's import this as well so our basic oath lock and we have to pass some uh this Al so this is not constant we have to pass some value we have to pass the repo right we go for here we have to pass the Au AO so we can just call we can just create a new AO here as well and pass it like this um let's do the import properly like this can do this it will work but I'm going to use the service locator pattern here and here I'm going to initialize this uh allo and use it using this LC variable so just call we getting an instance in here get it instance and call it LC do register L Singleton and create all Tri and just like that and using LC this LC variable we don't have to create H time uh each time there's a we have to use thiso and just call LC parenthesis and just that we don't even have to pass the uh pass the type of instance that way you're going to access just LC and parenthesis it will work this smart it is it will it will pass down the correct dependency so I will have to do a hot restart because I have added some code so like this so let's go so in this email block uh what we have to do in this block so we have to go if it if is to type something that should change our that you call email changed event right so let's go for these uh email input field got email inut field and there's a property called unchanged so whenever us type something on this us this email input field it will get this new value and we can some call some functions with that I'm going to use context. read this is for accessing our accessing our block accessing our block so basic code we want to access basic O Block that we created basic O block and we won't pass uh event so add event event will be event will be email change type of event so email change and this event we have to pass the value just like that whenever new state changes uh whenever users type something on this email email import field it will call at this event email change so to check this let's call in here let's just print the new value from [Music] email if I go for Deb console if I pass something I we will have to do some H restart we have a actually we have to go for the signup page this is the sign up page so if I type new email new email you can see uh it logs uh it calls this new value in here so that works let's see uh remove that line let's add the same line for the uh password input field as well so password input field let's go here and unchange in this case it is uh we have to import the DAT block we have to import the our O Block as well and this in this case it is not email change it it is event is uh password changed so like this so whenever now whenever you type something on this input Fields it will update the state in this block so for the fin finally for the this button sign up button let's go for the sign up button here the sign up Page Body we have this one in here primary button what we have to do in here and just pass context context and access the block that we want to access just give the type of uh block we want to access in this case it is basic both block and add done event what kind of events should we add in here so even we have email change to password change we need add event of type form submit uh so let's go here and pass that so to check if it works or not let's uh print the user in here print user let's go like this and add something add something in here and before that actually we will have to go to here and in the build authentication go to here and get started the fire console so we have to we have to give we have to enable the types of uh uh authentication types that we were going to use so in this case we are going to use email password and Google so let's enable this one save and let's add new provider we want to use Google as well so let's add this one here as well and uh we'll have to give email here so let's give email and Save okay so we have added new stuff in here so we will have to update our you know we can say in the Android we will have to update this Google services Json file so you have to download this again and add this to the at this to Android app and in this here Google Sy you just have to update this this file with the na file that you download from here and just uh same goes to here so I'm going to download this one okay now now let's uh I rerun rerun the project after replacing the these files so if you have replace the other files as well in if you're using Android uh you're using for as well so we have to go replace this file as well so I replaced all the files and read on the project and let's check uh this in the authentication now we don't have any user so if I if this works uh let's go for sign up in here so T gmail.com [Music] and test at 1 2 3 if I pass sign up in here uh does it work it actually actually doesn't work it's what is the issue here okay it's working it created user sorry so I had to right so it created a user so so if I go for if I refresh this now we have this user so it's it was successful so we have one more thing to do if if we have to show the loading screen and after if the user successfully signed in created then we have to redirect the user to the homepage so we can we will Implement that in the next video this will be that and and uh we will Implement sign in as well in the next video and we'll get onto the sign up with Google and adding uh file store database like that so let's meet in the next video and if you if you if you watch this far that means you learning something from the video so definitely hit hit the like button and share and subscribe so you won't miss the upcoming videos so bye for now

Channel: dmg coding

Views: 3,227

Keywords: flutter bloc, flutter bloc tutorial, flutter tutorial, flutter, flutter ui, beginners course, flutter ui design, flutter beginners course, firebase, flutter app design, flutter master class, flutter tutorial for beginners, flutter course for beginners, flutter ui design tutorial, flutter ui challenge, dmgcoding, flutter liquid pull, bloc, flutter bloc basics, bloc builder, bloc listener, firebase authentication, email password login, basic authentication, basic auth

Id: 9TU83weBeyI

Length: 55min 35sec (3335 seconds)

Published: Sun Nov 19 2023