Flutter & Firebase App Tutorial #5 - Anonymous Sign In

Key Takeaways

Oh Clinton gang so now we have our all service class set up we can now go ahead and use that to log in anonymously inside our app now we want to do that from this sign-in widget right down here and that is going to sit beneath the authenticate widget so in this lesson we're going to create this sign-in widget so that we can use the auth service inside it to login okay then so the first thing we need to do is create a new dart file for the sign-in widget now that is going to live inside screens and inside authenticate so create a new file right there called sign underscore in dart and then inside this file right here the first thing we want to do is import the material library so let's do that first of all and then we want to create a new stateful widget because in the future at some point we are going to use states inside this widget so let's say st ful and then tab and we're going to call this sign in like so okay so the first thing I'm gonna do is flesh out this widget tree that we're going to return right here now it's not going to return a container instead it's going to return a scaffold so that we can do things like add an app bar at the top and maybe even add something else at the bottom later on so let's do a scaffold widget and inside here we want to first of all do a background color like so and this is going to be equal to colors dots brown and it's going to be of strength 100 I also want to add in an app bar and this will be a nutbar widget like so and inside this we need to define a couple of things first of all a background color for this so background color and that is going to be colors dot Brown again and this time it's going to be a slightly stronger brown so strength 400 and then also we want to say elevation is going to be zero point zero that means it removes the drop shadow it's no longer elevated off the screen and then finally inside the app bar title which is going to be a text widget and the title of this particular screen is going to be signed in to brew crew okay so that's our bad done now now after the up bar we also need a body property and this is the actual body of the screen so what is shown to the user now to begin with this is going to be a container and inside that container we need a child property but before we do the child let's add some padding as well to the container so that the content is removed away from the edges of the screen a little bit so this is going to be edge in sets and it's going to be dot symmetric and that means that basically the left and right the horizontal direction has the same pattern as each other and the vertical direction top and bottom has the same padding as each other as well so inside here we need to pass in a vertical property to specify the padding in the vertical direction which is going to be 20 and then the horizontal is going to be 50 and after we've done the padding we can then specify the child which is going to be a raised button like so and inside the raised button we need to specify a couple of things a child in itself which will be a text widget and this is going to allow us to say what we want the button to say and it's going to say sign in and nod for signing in anonymously because ultimately when we click this I want to trigger this sign in anonymously function in our old service class and then we also need an on pressed property which is going to be a function that happens when this thing is pressed this button so this is going to be a function which is asynchronous and it's asynchronous because ultimately in here we're going to perform an asynchronous task to log in so before we actually do that let me just save this and now let me go to the wrapper over here so that by default we don't return home we return the authenticate widget so if I press tab now it's going to automatically import that for me and we need to do our parenthesis on the end if I press save we can see authenticate inside the authenticate widget instead of just having the text widget display we want the sign-in widget to display so let's say sign in and if we tab now then it's going to Auto put that at the top and now if we save then we should see this signing screen over here with this button now at the minute when I click that nothing actually happens but it's looking okay and nothing happens because in here we don't actually say we want anything to happen well what do we want to happen in here what we want to do is now access this function right here inside the auth service class so first of all we need an instance of this class inside this widget so that we can access that function so we're going to define that up here inside the state object now this is going to be a final variable meaning we're not going to change it in the future and it's going to be of type auth service that was the name of the class now if I press tab it's going to auto import that for me and I'm going to call this underscore off you can call it what you want it doesn't have to be the same as this thing over here just make sense that we're interacting with authentication inside this widget to call it off and it's underscore to make it private meaning only in this file can I access this so this is going to be equal to an off service instance and we get an instance by invoking that like so so now we have an instance of the auth service class this thing over here available to us via this variable name inside this widget so if I want to use this method right here I just need to say auth dot sine in and none okay so I can now access that down here and remember this is asynchronous this function returns a future right because it takes some time to do so what I can do is await the result and I can say a weight off which is this thing right here the instance of Earth service dots sign in and none okay so now that is going to await this and it's going to return to was one of two things either the user if it was successful or no if it was not successful so let us now store that in a variable and I'm gonna say that this variable is dynamic because it could be null or it could be firebase user and we'll call it result but you can call it what you want and set that equal to a weight off the sign-in and not okay so this now when we click on this is going to perform this action so it's going to try to sign in its gonna wait for that to resolve and pass back as a no if it didn't work or the firebase user if it did work okay now if it returns null it means we couldn't log in or sign it in that case for now we're just going to print some kind of error so that we can see it if we get a user back if we don't get null it means that we have logged in so we can print to the console for now user signed in or something like that so let's do anything let's say if and then inside here result is double equal to null meaning this hasn't worked then we're going to print error signing in okay so we couldn't sign in if that's not the case in the else Clause then we can say that the user has signed it if we don't receive not it means we've got something else but like a user object so we'll say print and it's going to be signed in and we'll also print the result that we get back so prints results like so now before we start this I'm actually going to stop over here and then I'm going to press f5 again to rebuild this just so that we catch all of the changes and all of the packages we might have installed into this project so that there's no errors first of all then I'm going to open up the terminal and I'm going to go to the debug console so we can see anything down here that we try to print out and I'm gonna try to sign in by clicking this button and hopefully we can see now signed in and the firebase user which is this result that we get back right here this result okay so this looks like it's all working and now we're signing in and anonymous let's see the application now inside this firebase user you can see some different properties we have this UID and this is a unique character string which represents the user that has signed in okay now at the minute this firebase user object with all of these different properties is a bit overkill it's more than we need inside this app but we can convert this object into our own custom user object and just add what properties we need to it for example like the UID or something else and then just use that user object in our app instead of this firebase user object so we're going to do that in the next lesson