Flutter & Firebase App Tutorial #4 - Firebase Auth

okay then so we have the three basic widgets created for the structure of our app now so I'd like to introduce the notion of user authentication and by the way these are faded out because we've not yet created those widgets we created my app wrapper authenticate and home right so we want to only let authenticated users people logged into the app see the home screen on the right side and it's children if they're not we only want to show them this side of the tree as a login or register now to do this and to keep track of the authentication status of the user will be using firebase off and that is a service by Phi base which is going to manage authentication for us and it makes working with user authentication very easy for us as developers so we've already hooked up our application to our firebase project we did that in the second lesson and we installed both the firebase orth package and also the cloud firestore package so we're pretty much ready to start working with firebase Earth right away but there is one more thing we need to do first of all and that is to enable authentication methods in our firebase project so let's do that first of all alright so inside our firebase console now we can go to authentication over here to try and set up authentication and at the minute you can see it's asking us to set up a signing method so click on that and it's gonna throw up a load of different signing methods that we can use for our application so we can use facebook login Google login phone login email and password and almost all these different types of login now what we're gonna do is enable email and password that's eventually what we're going to use but we're also going to enable anonymous login as well or sign in and that means they don't have to supply any kind of email or password to sign in and I'm doing that so that I can demo how easy it is to set up user authentication without having to create a form to capture any email or password data but can just focus on firebase off to begin with so let's enable both of these methods email and password which we are going to use later so enable and press save and then anonymous at the bottom press enable and then save so now we've enabled both of those signing methods it means from our flutter up we can use both of these sign-in methods so let's go back to the code and do that okay then so now we've enabled a couple of different signing methods either email and password or anonymous let's try setting one up inside our app now the way I want to structure this is to have a separate class inside our app which is going to handle all different authentication cases whether that be signing in or registering or signing out etc and that way all of our logic all of our earth logic is going to live in one single place and it won't be dashed about our different UI widgets so this is going to make our app much more modular and definitely easier to update in the future so first of all let's create a new services folder inside our Lib folder we already have a folder for screens we now need one for services because after all this is a service we're using firebase alt which is a service and in the future we'll create another file inside that folder which is going to be for interacting with the database service okay so let's create a new folder called services and inside here we're going to create a new file and I'm going to call this off dots and darts so this is for our earth service now inside here we're going to use that firebase auth package that we installed back in the second lesson so if we go to the top spec gamma file we're going to see these two packages firebase auth and cloud finest store that we installed we're going to use this one right here firebase auth inside this auth dot file so let's import and we want firebase off right here this second one okay so now we can start to use that inside this file now we want to create a class and that is going to be called off service like so and inside this class this is where we're going to define all of the different methods that are going to interact with firebase auth for us so we want to do a few different things in here right first of all we want to create a method to sign in anonymously so let's do a little comment for that we also want to do a method to sign in with email and word so sign him with email and password we also want to do a method in the future to register with email and password so well they were comment for that and then finally we do want some kind of method to allow us to sign out as well so we'll create that in the future too now the one we're going to focus on for now is signing in anonymously because that's the quickest to get up and running with but first of all what I want to do is create an instance of our firebase authentication and this instance this object that I'm going to create is then going to allow us to communicate with firebase earth on the backend this is how it works right so inside here I'm going to declare a final property final meaning it's not going to change in the future and the type of this property is going to be a firebase or object so that's the type right and I'm going to call this off but I'm gonna start it with an underscore and that underscore at the beginning means that this property is private meaning I can only use it in this file and not in another file okay so this private property auth is going to be equal to firebase off which we can now use because we've imported this library at the top dot instance so that right there that is a property to get us in firebase auth instance okay and we see a blue squiggly line under this because we've not yet used it that just means that this is an unused variable at the minute but now we have this object this firebase auth object which is an instance of that firebase auth class and that is going to give us access to all the different properties and methods on this class so we can do things like sign in anonymously or with an email and password or register or sign out and all that kind of stuff so whenever we want to do something interact with firebase or thin the future inside this class we're going to use this earth property right here okay so let's flesh out this thing right here to sign in anonymously so this is going to be an asynchronous task and it's going to return a future now if you unsure what futures are I've got a whole video of it inside the floated for beginners series so I'll leave that link down below but anyway it's gonna return a future and this is gonna be called sign-in and nod so that is a method name that I am creating it doesn't have to be called this just makes sense to be called that because that's what we're doing we're signing in anonymously so this is asynchronous so we need the async keyword and inside here we want to try and interact with firebase off to login our user anonymously now this could end up in an Arab so what we're going to do is embed this in a try and catch block so we're going to try something and then if that doesn't work we're going to catch the error and then we can react differently okay so what are we going to try well we want to get some kind of authentication result from firebase by making a request so the way we make that request is via this auth object and by the way we need to await this because this is going to take some time to do so we want to wait until this is complete before we assign the result to some kind of variable now remember I said that we access all the different methods or properties of the firebase earth class which is responsible for us interacting with firebase auth via this object right here so if I say off and then dots we can see all of these different methods that we can use now we're going to use a method called sign in anonymously which is right here so this allows us to sign in anonymously to the application now it's important that you have that method of authentication enabled in your firebase project we did that before if you don't this won't work so this thing right here once it's done is going to return an auth result and that is the type of object it returns an auth result much like we have a type of future here returned are a type of firebase off here the type of this thing right here that's returned is an auth result object and you can call this what you will I'll call it results and set it equal to this thing so it's going to go out it's going to try and sign in anonymous lip to our firebase project and it knows which firebase back-end to sync up with because we set all that up in the second lesson and we added in our Google services JSON file into this Android folder before so it knows to link up with our back-end tries to log us into the application and it returns to us some kind of results okay now on that result object we have access to a user object which represents that user so I could say now that the firebase user object and this is again the type of object and we'll call it user is equal to the results dot user okay so now we have access to that user and if we wanted to we could return that user so I'm going to say return user like so now we're not using this user object anywhere at the minute because we've not called this but say for example we called this function or method from the sign-in page at some point then what it's going to do is try and sign in and then if it succeeds it's going to return this user object to that sign-in widget from where we call this method okay then we can do something with that user later on we're not doing that yet we're just setting up this method anyway if there is some kind of error then it's going to catch that error right here and for our sake we could just print it to the console so I'll say print the error dot to string and underneath that will also return something we'll just return null so if in the future we call this method from another widget like this sign-in widget and we try to do this and it fails then this time it will return null and we can do something with that okay so there we go that's our auth service plus kind of setup and we've also created this one thing right here this one method that we can now try and use in a different widget to sign in anonymously and we're going to try using this in the very next lesson

Channel: The Net Ninja

Views: 184,666

Keywords: flutter, firebase, tutorial, flutter firebase, flutter with firebase, flutter app, flutter app build, app build, flutter firebase app, flutter tutorial, flutter firebase tutorial, firebase auth, signinanonymously, anon sign in, anonymous sign in, firebase anon sign in, firebase sign in, firebase auth class, authentication class, firebase authentication, firebase auth flutter

Id: mZYuuGAIwe4

Length: 10min 54sec (654 seconds)

Published: Tue Oct 22 2019