Flutter BLoC Firebase Auth | Google Login

hello everyone assalamu alaikum so to get started just go ahead and create a new flutter project and after that install this eight dependencies over here I mean libraries or packages so after that just do get Pub and you should be good to go all right and right after this we need to come over here inside this lib folder we'll create a new folder and we'll call it uh data so let's go ahead and do that data and after inside this data folder we're going to go ahead and create a new folder and we'll call it repositories reposit or res all right and inside this we're going to create a new file and we'll call it auth repo Repose repository dot Dart so this would be a dart class since we are going to do network connection so we are going to go ahead and create a class that would help us with talking with the network or the outside world it could be Cloud World Firebase World your own server or anything else but not your own phone okay so now inside this I'm going to create the class and we'll call it auth repository all right okay now inside this since we are going to talk with the Firebase we are going to use a Firebase auth to use Google login with block together so first we need to create a Firebase instance so here that's what we do Firebase auth dot instance and now this I think we need to go ahead and let's see if we can get it directly no it's not getting and I believe I already got them so here I have this virus off so let's try it like this uh instance all right and then after that let's go ahead and save it in a variable and we'll call it Firebase auth and now let's see if we can import the library or not yes we can okay great all right so after this because we are going to use our email and password to create an account register an account and then register the account in Firebase so first over here inside this we're gonna go ahead and create a method the method name would be void I mean the type would be void and we'll call it sign up and over here we would need two things okay and they're required we we need the must so here we do string and email so we'll have email ID and then also we'll have required string password okay like that all right so we need this two things and because this is a network operation so our method should have a sync tag and which should help us to avoid a crush and things like that so inside this we'll have try catch Clause now inside the catch Clause we want to catch errors so over here we'll just throw an exception and we'll just can we can just call exception and inside this e.2 stream so whatever is there we convert it to string all right so now we have this method over here so this is a registration method right registration Method All right so we already have the Firebase auth instance so we can go ahead and use that uh well we'll use it a little later but until that we're gonna go ahead and use actually this one so over here we'll have this one and then we'll do create user with email and password as you can see so we have email and password we just pass it to it and that's it that's as simple as that one all right so now while over here actually we can tag more conditions so we can wait the user whether the user is able to uh create or register its account on its own so what we could do over here right after this we can do on actually and we check for it that we see what happens so now inside this on so well we can put a statement inside this so here we do Firebase auth exception and it will catch error if we have error or any logging so we can catch them now over here we'll check if e dot code code and whatever the return state if it's like a weak password okay so we can return that and tell the user that hey you have weak password okay so here we could do throw exception exception and then we could say the part this password is too weak yeah that's all all right and then over here we can also do else if e dot code equal email already in use so if this is what we get from Firebase all right so here we throw another exception we would call it exception and then over here the account already exists for that email so you can't create a new one all right so yeah so if this two conditions I mean well either we can log in if we can't really log in we throw error but if we have other unknown so this would be for unknown errors right this would be for unknown errors but what if we have known errors the known errors like whether it's too weak the password or the already the email already exists so in that case we're gonna throw this error right so this is the first thing we want to assign to Firebase right okay so once again let me go through it so we'll call this method from our UI now of course how we do that we'll do it using block okay block will trigger events we know that and from that event we would get call this will get called and at the same time in the event we'll pass email and password as we do that this method would get called now Firebase auth is very powerful you could it could do a lot of things Firebase auth.instance you can create user with email and password you can sign in with Google you can sign in with credentials you can sign in with apple and then sign in with Facebook this is very powerful API and I love that this is the reason okay so anyway so yeah we checked for uh like uh minimum error and unknown error like that okay so yeah so this is our first we created this repository class and this is the first method wonderful now after this we would come over here and set the slip folder and we're gonna well actually even before we do anything else let me come over here and actually start coding and as we code I'm going to explain more over here so I'm going to remove everything from here we don't need any of this now all right and after that actually we're gonna remove this as well okay all right now inside this over here we don't need this material app for now okay so what I'm going to do over here I'm going to go ahead and do a container all right container now well either we can keep that or wrap it around something called repository provider okay so what I'm going to do over here I'm going to cut this and or actually I can wrap it around the widget so for that reason over here what I would do I'm going to go ahead and do like repository provider repository provider right this one now this repository provider comes from block okay uh so what it does well if you have Network requests like the one we have so you have to have this repository provider and once you have it will create a repository which means that actually with this you can able to talk with the server from your app okay so that's what it means okay so we have to actually out the way I understand that you have to wrap your code around this and then you have to inject or create a repository so this is the I mean this is the entry point but you need to give it something what do you want to give you want to give it this this class actually the class we created so it has an entry point so we're gonna give it a class okay what class this class okay so giving this class is called creating a represent story so to create a repository you need a repository provider that's as simple as that one okay all right so right after this actually over here we're gonna uh well now here it will throw an error right it says create one so this is what actually I was talking about okay so over here we want to create the repository I mean giving it whatever we have created so that's called creating and all we need to do we need to pass the context to it and after that we'll just return like this Repository uh Auto repository the one that we created okay and with this actually this would get injected inside and I mean we can load it and do stops like that okay all right so this is the first thing you want to do and block knits this block knits this repository because block needs to access this thing access the methods from events like that okay so that's why we created first you don't want to create a block first first create this and connect block and this repository together all right now how to do that well now for that reason actually we're going to wrap this around another widget and this is where the magic happens so here we'll call it block provider okay so we need that one block provider okay right now blog provider actually takes a block what is a block block that connects events and States together okay but now we don't have this thing in our case so we need to go ahead and create this block and uh States I mean sorry event and state so block provider needs actually a block and block is created using events and States one more time block provider needs a block and that block is created using event and States so if you have block you can trigger events if you have block you can get the states so that's why we need to go ahead and create States if we create those things then we'll be able to create a blog and if we can create a blog we can get information flow from this author repository so that's the basic understanding and hopefully it makes sense all right so now if you hover over on this it would say go ahead and create things over here so that's what we're going to do so let's go ahead and create a block over here uh let's see I I tapped on this looks like it's not responding well if it's not responding the other way to go ahead with this so I'm going to go ahead and let's see cut this okay now inside this what I'm going to do I'm going to do create okay so over here create and once I'm going to pass the context and then we'll create a block and we'll call it auth block but of course it doesn't exist yet so that's why it'll throw an error right and right after this actually we can have a child and this would be our material app the one that we had early and yeah that's it so as I explained so repository provider needs to be loaded first and the class we create we need to use that one and then after once that is done that will have information networking information and then we create our block to create a block we use block provider Now to create block we need two things State and events now we don't have any state and events so we'll go ahead and create them and combine them combining them together will create auth block okay so yeah this is the connection and that's how it works so now inside this will come inside this live folder and then inside this I'm going to create a new directory and I'm going to call it block all right and inside this uh I'm gonna go ahead and create another directory I'll go to block and then inside this I'm going to go ahead and create a file so here we'll call it auth events like that event dot Dart like this so inside this will create our events and then over here what are you gonna do we're gonna go ahead and create another file we'll call it auth state DOT Dart this too now once we have this too our Arrow should be gone so first we want to get rid of the error so and the last thing we have to do we have to actually create a block for this otherwise it will still have error so now let's go ahead and create a new class and we'll call it block event um yeah block blog actually or auth blog so we're gonna go ahead and call it authblock dot Dart all right great now inside this we're going to go ahead and create a class and we'll call it auth block and that extends our block the block that we installed as a plugin and it takes out block it takes auth events event and auth state okay and that's it all right now of course we need to import all this libraries go ahead and do that and let's see auth event of event okay so if it doesn't get recognized we could do like this we would do auth event like this and then over here do the same auth state and let's see so it says that you need to call Super Constructor this two arrows should be gone once we actually create things because right now we don't have any events so that's why we get this error so over here we'll go ahead and create a class abstract class and we'll call it uh auth event okay now we use Equitable to know whether two states are the same like for example if you have variable x x value is 0 and you try to change it but actually you didn't change it it's still zero and whether the states has been changed or not using Equitable we can know it easily it's not like get x that you can know it directly so if you have your state objects and you want to know whether they have changed or not you have to do that using Equitable class so it's a little bit different than uh get X but anyway so here we do override and then here we'll have list of objects because as in the auth events we'll deal with some properties that that needs to be changed or sending information through the auth event and it might not make a lot of sense now but as we talk go ahead it'll do more so Props over here props means the properties actually the properties that you're going to use so what properties we're going to use over here so while we do have email and password so these things need to be sent to this event class or the event class because events is trigger from UI so from UI you want to talk to the blog and pass the this information to this auth repository how do you do that you do it using this auth event class okay I mean not exactly this one so this is the abstract class actually now we are going to go ahead and extend this class and create more class so we'll create another new class and we'll call it sign in requested uh well actually sign up requested sign up requested because we want to sign up right so first we're going to sign up and then we do hot event like this now inside this will have two fields which is called string email and then final string password as we have this we have to have super Constructor as a reconstructor sign up requested and then this dot email and this dot password all right so now this is the class actually that gets triggered when you trigger an event I mean this gets cold as this gets cold the password and email would be sent so what I'm trying to say is that when you have this UI from UI you're gonna trigger an event so from UI we'll type in our email and password right so this class would get called as we trigger an event so we'd pass this email and password so as we pass this email and password we can grab them actually over here so that's how you do that okay but yet we still need to work a little bit before we actually understand what's going on now so that was for auth event now we'll go to we'll go down and do the same for odd state so now over here um we have to create another abstract class and we'll call it abstracts class and auth state extends Equitable all right now over here in this class actually we are not going to do any uh States changes directly using properties so that's why it's all empty we don't have any we don't have to have any okay so that's why it's empty and this is what we need first and then actually I can go ahead and create a class and we'll call it loading and it will do extends out state oh State all right like this and then well let's see okay well it would want you to do this override properties okay now this this things are all empty because we actually don't need any of this not like event because from our UI to the server Firebase server we'll talk talk through these events and we pass the data so that's why we have had these things over here now back to this and now over here it says that make it while either I can import the library or over here actually I can say part of auth blog okay and that would solve the problem part of of wow awesome block dot Dart well if you have this one actually this Equitable we don't need this anymore and the arrow should be gone now we should do the same for odd State go to odd State and actually remove this we don't need this otherwise we'll still get error so we're here part of block dot Dart and the arrow is gone all right so with this actually we are ready to work now let's come to our block over here now this arrow is completely gone from there all right now let's come to our main.dart over here and we'll see that the errors we had earlier over here they would be gone so the first thing we should do let's go ahead and import this all right now okay as I said that repositories get loaded first and then we create a block and the block needs to know about this repository right and how should it know actually over here we can pass it remember this is alt block class is a class right so this is a Constructor that we are calling so inside this actually we can create a variable or properties and we'll call it anything repository we'll call it repository and now if you want to access the repositories so over here you have to use repository provider repository provider.off and then you have to inject or mention the type actually auth repository and then simply pass the context now with this we'll still get error because our auth block class actually doesn't have a Constructor yes it does have a Constructor but it is not able to accept this uh argument the one that we have passed so we need to change this one so over here inside this we do like this so well we'll mention it later so inside this we do required required this dot auth repository auth repository but of course this variable doesn't exist yet so we're going to go ahead and create uh this class instance so we do author repository Auto repository and auth author repository yes that's it now with this the error should be gone but since we are over here so you're extending block over here so you also need to close call this super Constructor and inside this we can let's see if we can pass well we can't pass zero now if we can't pass zero but actually we have to pass a state over here now this state gets initialized the very first time when block is created and this state is searchable you can search and find it but now this state class that we created this used during the loading data from the server now we could go ahead and create a class and we'll call it uh unauthenticated on authenticated and extends of state and instead there's let's override the the one that we had already we don't need like this we can just return empty properties props means properties like the variables and things like that okay now inside the blog actually right now we can go ahead and pass this one so here so we're gonna pass on unauthenticated so remember this is a state and one second if you're coming from get X you know that state means variables or classes and objects like that so if you are in get X most probably just pass a value or map or a list okay here instead of this most of the time you'll be passing classes like that okay and after that over here you could do whatever we like so inside the Constructor body actually States they get initialized all right so let's check it over here we do have this and uh okay we're good with this all right so now if we come over here the arrow should be all gone so this is the basic architecture of our app so first of all have repository and we'll create a repository and we need to tell our block that hey we have a repository that means you can use this one to talk to the outside world and if you even get data um and for retrieving data using this auth block you can also trigger events and if you do trigger events do the events over here so that's the first basic thing all right now over here what we could do actually here first we can register an event okay and if we do that then we can work on our UI and call these events from our UI so over here we would do sign up requested okay and then inside this we'll pass our event and state actually our event would hold data now since this is a network request one more time so this would be a sync time so we registered this on method over here and it has a type it takes event type so this event actually refers to this one uh this class over here now this event would also hold data and what kind of data actually we also mentioned over here so hey this event can hold our email and password so that means that we're going to go ahead and use them but even before we use them actually first we want to emit a state and we'll call it loading the one that we created so that means that data is being loaded or sending or actually it means we are working with the network right now inside this we'll have try coach catch clock inside this we'll have try catch close and then we do e and then if we have error actually we can grab them okay so now anyway so over here we could also do unauthenticated error like this okay so we have two states when these events get triggered first we'll tell the UI okay I'm doing something I'm doing something with the network but if things go wrong when I do something with the network over here this would get cold so these two states would get called and we would be able to find them whether it's loading or an unauthenticated if we can find we can show users certain information that's the point so anyway once this get called we would load and at the same time we'll pass data to server all right so how to pass the data over here we already have author repository instance so we can use this one and then we know that inside this actually we have a method which is called sign up so go ahead and do that sign up right and all we need to do pass pass our email and password but where is this coming from this would be coming from our event so the event.email and over here with the image event dot password yeah that's as simple as that one now once again since this is a network request I'm gonna do over here a weight all right okay great so yeah with this our basic setup is ready and one more time we'll go ahead and what I mean now we'll go ahead and work on our UI and once we work on UI it will make more sense because I'll walk you through it

Channel: dbestech

Views: 9,040

Keywords: flutter bloc firebase, flutter bloc google login, flutter firebase auth, flutter bloc firebase loging, flutter bloc login firebase, flutter tutorial, firebase, flutter

Id: I0ahZz1DREQ

Length: 26min 40sec (1600 seconds)

Published: Thu Feb 09 2023