Authenticating Guest Users for Firebase using Dart's Flutter Framework

Key Takeaways

hi guys welcome to another flutter tutorial video my name is tensor today we're going to be talking about how you can authenticate a user into firebase specifically we're going to be talking about how you can authenticate a user as an anonymous user into firebase in a way that they can manipulate the firebase data if you've set up the actual database to be locked so that only specific users can access the data now keep in mind there are other ways you can log in a user you have the ability to log in users using a Google account using a Facebook account a Twitter account you can have them log in using passwords and usernames that you create inside of your firebase account and these are things that we may look at later in other tutorials it may seem a little weird that we're only going over how we can log in users anonymously however this is a pretty useful feature because it gives us the ability to authenticate a user and then track how they use our database in firebase so what we can do is have local authentication inside of our firebase application and then we can put the users and password hashes into a firebase store and then we can make it so that when the user logs in quote-unquote anonymously it lines up with their user username inside of the firebase store and then of course when they are logged into our firebase store we can have them do read and writes on specific tables alright so let's set up our firebase project here we are with a fresh firebase project if you guys want to know how to actually set this up so that it works with flutter you should go check out my firebase flutter tutorial for more detail on that in this tutorial we're just going to modify one little thing in our firebase application so that we can allow for authentication so we go to this authentication page and you'll see something that looks a bit like what you see on my screen and then you can click this setup sign-in method and this will open up to a page that will give you all of the different providers that you can choose from you can use email past phone Google Play games Facebook Twitter github and anonymous in this tutorial we're going to be focusing specifically on anonymous so let's click on anonymous and let's click this slider to enable it and then we'll click Save and this will enable the anonymous sign in in our application now we can jump back into our code specifically into our pub spec yamo and we want to add firebase off and at the time of this recording the version is 0.5 point 3 I've got some boilerplate set up already inside of our application we have a simple root widget that creates a material application this points to a stateful widget called login page and then the login page has login state the build function only creating a empty scaffold and then we also have a stateless widget called home page which creates an empty scaffold the idea behind this application is that we want to be able to have the user go to the login page click a button to sign in and then that will take them to the home page we want to make two imports we need the firebase authentication plugin and we also need the dart async library now because we want to use routes in this application we can add these static final strings called route to both of our main pages so one for our login page and one for our home page and we'll give each of the routes a different name so our login page will just be login - page and then our home page will be home - page and this will make it very easy for us to associate these widgets with their respective routes we can then create a route map up here and the map for the routes property is typically a string key and then a widget builder value so we say login page route which is the login - page string and we associate that with a function that takes in the build context and then inflates our login Paige widget we can do the same for our homepage now down inside of our material application we can add our route variable to our routes property so this is something that we haven't really done before but you can have both a home page and have routes in your application alright so now let's build out our login page so we want to get an instance of our firebase auth object this is the object that's going to allow us to login a user as well as log out the user and of course we need this to be singleton so we just take out a single instance of this object now let's create a function called sign in and on and this will be the function that we use to actually sign our user in this will pass back a future with a firebase user inside of it and of course because it's passing back a future we need it to be asynchronous first we'll create our firebase user by setting this equal to or wait firebase off dot sign-in anonymously this method sign in anonymously will then create an anonymous user and authenticate him versus our firebase store and then we can use that user in other parts of our application so I'm going to print out signed in and then we'll take the user and we'll get the unique user ID for this user and print it out and then we'll return our user from this function let's create a function that will sign us out and this function is fairly basic we just call our firebase auth instance and then we call the method sign out on it and this will sign out our anonymous user and I'll just have this print out signed out so that we know that we've signed out the user before we build out the user interface for our login page let's come down to our home page and make it so that we can actually pass a firebase user into this home page so when we get back the firebase user after they've logged in we want to then push to the home page but we also want to keep all of the data that we're getting from the login of the user and then be able to display it on the home page so what we'll do is we'll create a final firebase user and then we'll take our home page constructor and pass that user in as an optional property now for our user interface we want to have an app bar and the app bar will just say login page then the body will have a center with a ListView inside of it we'll set shrink-wrap equal to true because we want our ListView to expand across the entire page but we don't want it to scroll then we'll give it some padding so we'll just say edge in sets not all 10.0 and then the children inside of this ListView will be the buttons that we create to allow us to log in and log out just so that we don't have a lot of nesting will create our buttons above where we have our return statement so the log in button will be a container and the logout button will also be a container or our a log in button our container will have some padding and then the child for this container will be a material widget a material widget is quite literally a piece of material in other words it's like a container except it has properties that allow us to manipulate it in a way that follows the material design specifications for our piece of material we want to set up the border radius will have this be border Li radius circular so that it's still a rectangle but it has circular edges so it'll be 30 point-0 then we'll have a shadow color which will be colors deep orange then we'll have an elevation which will make it so that this is slightly elevated off the background and we'll give this ten point zero and then the child of this material will be a material button we want our material button to have a specific width which will be 150 point zero and then a height which will be fifty point zero so our material button will be at least 150 by 50 and then the color of this button will be colors orange and there will be some text on it which will say login as guest the unpressed event for this button will call our sign-in anon function and on our sign-in a non function we can call the then method which allows us to unwrap the future that's being passed back from our function and then take the object that's inside of the future and then put it into an anonymous callback function so here's our callback function we're taking our firebase user from our signed in a non function and then inside of this callback function we're calling the navigator object and then we're calling the of method on that and then we're pushing in a new material route so that we can then go to the home page inside of the push method we can then create a new material page route and then for the Builder property we pass in a function that takes in our build context and outputs our home page and in here we can then pass in the user that we got from our sign-in a non function so this will then pass it to the home page and then open up the home page we can also add some error checking if we want to so we just call catch error on our callback function and then we take the error and we put it into a print statement down inside of our ListView we can now put our login button into the children property now let's build out our logout button we want this to be consistent with our login button so we'll give it the same padding and then the child for this will not be a material button or a piece of material or rather just a flat button our flat button will have colors colors white because our theme is the theme data dark which means the background will be black and then we want to have text on it that says sign out and the style for this text will be colors black so we'll have a white button with black text and then our on pressed function we'll call our sign out function which will then sign out the user from this application and like with our login button we can now add our logout button to our list view now let's build out our homepage in the scaffold we'll just give it an app bar that just says homepage then for the body we'll have a center with a column in it and the column will have main axis alignment of main axis alignment out Center so that everything is centered and then inside of our column we'll have a bunch of text fields and each one will have a property of our user so the first one will be our user data UID then we'll have our user display name and then we'll check to see if the user is anonymous which is just a boolean so this will pass back true or false based on whether or not the user is anonymous all right so now we can build out this application and take a look at what it looks like here we have our two buttons and you can see this one has a bit of a material design look to it and it has a nice little shadow on it as well and a little bit of elevation if we click in login as guest this will then log us in and you can see here is the user unique user ID and then the display name will pass back as null because there is no display name and then of course the user is anonymous so this passes back as true if we come in to our firebase console you can see now that the user actually was created and they logged into our firebase application so here we have that user ID that's appearing inside of our flutter' application and then we have dates for when they were created and when they signed in as well as the provider which in this case is that person which means that it's anonymous and then the identifier which again is anonymous now if we go back into our application and we head back we can sign out let me just click the sign out button and this will sign out the user so now when I click login again it should give us a new and if we reload this page you'll see now there is a second user as well anyway guys I hope you enjoyed this tutorial if you did feel free to like and subscribe if you have any questions or comments feel free to leave them in the box below and if you dislike this video then by all means download it as much as you like have a good day