🔒📱 Email Login & Logout • Flutter Auth Tutorial ♡

yo what up welcome back to the flutter authentication tutorial in the last one we created the UI for this modern login screen so in this tutorial let's hook it up to Firebase and allow users to sign in with their email and password [Music] now the very first thing we need to do is to go to your Firebase console and make sure to sign in with your email so that we can now create a new project and for this one I'm just going to call it auth tutorial and let's hit continue and let's just disable this Google analytics just for Simplicity and let's create the project cool now once that's done we now need to add Firebase to our app and by the way I'm going to link this Firebase documentation below because this is essentially what I'm going to explain to you in this tutorial I'll link it below so you can take a closer look at it so it says here before you begin if you haven't already follow the steps in the get started guide so let's just open that in a new tab and even for this we have another prerequisite which is to connect your app to Firebase so we're going to need to install and initialize the Firebase SDK for flutter and then if you go to this one most of this you hopefully should have already done like you have an editor like vs code and you've installed flutter and just then you should have signed in to Firebase using your Gmail and the most important thing to do here is the Firebase CLI so the command line tools if you haven't already installed the Firebase CLI and so just depending on your platform right so what mission are you using let's say I'm using a Mac and there's three different ways to install it which if you actually read this recommended for if you're a new developer just use this first method just to make it easy but if you do have familiarity with node.js then you can use this npm as well so just copy this and put it in your command line and make sure to install this Firebase CLI cool so once you've done that let's just close this and we've installed the Firebase CLI now let's just make sure everything's all good we have to log in using the Firebase login so let's copy this and let's go to our code now so this is the modern login UI that we created in the last video so I'll link that below as well so make sure to check that out first because we're going to build on from this UI and so in this project in your terminal let's put in Firebase login so we're going to make sure we're logged into our Gmail as it says like that and then what's the next step then we can copy this and looks like we have a slight warning and I think this is a Mac only warning so it says you can fix by adding this bit of code let's just put that in and then if everything has been done correctly we should be able to do this flutterfire configure and there we go so it's going to fetch the Firebase projects and you can see these are the projects that I have in that Gmail so you can see the auth tutorial is the one we just created which platform should your configuration support it says use arrow keys and space to select and if you hit enter I think it will just do all of them so I just hit enter so it'll set up the Android the iOS the web this you actually have to do it manually before but thanks to the flutterfire CLI we can do this All seamlessly and it's all automated cool so it wants to update the build.gradle so just say yes and we're good so let's go back to our Firebase project and remember we had to connect our app to Firebase right so if I just refresh this real quick you can see there's three apps so the iOS the Android and the web it just got added automatically so that's good so now the rest of the work is going to require us to do some actual code so let's just copy this and let's add the package Firebase call that's done and by the way what we just did is if you go to your pubspec.yaml this is where we sort out the packages right so that terminal command automatically added the Firebase core it looks like it says here the Florida fire configure is step two which we have already done so yeah this is just going to do the same thing so we already did this and you can see step three says in your main.dart file we're going to import these packages at the top and so the Firebase options it should be a auto generated file which helps us just to deal with which platform we're on so if you go to your main function we're going to add this snippet of code so the flutter binding and also the Firebase initialize app and so for the options you can see here we can just select the current platform cool and if everything has been done good if we hit Florida run hopefully there's no issues if you do have issues then that means there's something wrong with the setting up okay sweet so now we can actually do some code so if you go to our login page remember these two text editing controllers we have the username and the password text field controllers and we also had this method which we didn't fill out which is the sign in method right so if you scroll down where's my button this one so if I tap on this then we're going to execute this sign in method which currently is blank and so this is what this tutorial is going to focus on filling out this method the first thing I'm going to do is I'm going to create a new page called auth page and so this is just going to be a stateless widget and we're going to use this to check if the user is signed in or not because if the user isn't signed in then we have to display the login page and if they are signed in then we're going to display a home page so we're going to use this auth page to decipher between the two okay so in the scaffold in the body we're going to use something called a stream Builder and we're going to check for some users and this stream that we're going to be listening to is the Firebase auth which whoops I just remembered I didn't I forgot to import the Firebase auth package so let's just do that flutter Pub add Firebase auth cool and again just to show you what we just did if you go to your PostNet Gamo it should have added this package automatically of course and now that's done we should be able to import that Library and we can start dealing with Firebase auth so you can see this stream is going to constantly be listening to the auth state changes in other words if the user is logged in or not so then we can build something and with the help of this snapshot we can say is the user logged in is the user not logged in so if the snapshot has data then we have some user so let's return our home page else let's return the login page and this homepage we obviously haven't created so let's just do that real quick and let's just keep this simple in the middle let's just say logged in cool and if you come back to the main.dart file my main function executes my app which at the very beginning goes to the login page but let's change this to the auth page okay so we're going to fire up the auth page at the beginning and then it's going to check by listening to the stream if the user is logged in or not cool if you come back to our documentation we can close this now and come to the actual Main documentation we want to use for this video so we've got everything set up and if you just scroll down signing in a user with an email and password is what I'm going to show you today cool so if you come back to our Firebase console let's hit authentication and get started and if you go to the email method just make sure to enable this and save it cool and in the users let's create a user manually so I'm just going to call it test gmail.com and the password can be test123 cool so we have our first user okay so let's come back to the login page and let's finally fill out this sign user in method so we're going to await Firebase off and if you look in the method you should be able to see a sign in with email and password and this is going to require us to provide an email and password which we have these controllers from before and just to keep it nice and consistent instead of username let's rename this to email and give the controller and the password to these fields and let's see what happens so let's fill out the email which is test gmail.com and my password was test123 and if I sign in then Suite where signed in so it works and so now when the user's logged in then they'll see this home page which let's add an app bar and actually have a button so the Visa can log out [Music] right so let's create this sign user out method and this one is also very easy you just need to say Firebase auth and sign out cool now since we made that off page they should sort out the logging in and logging out so let's give this a go of course if I hit the button we just log out and come back to the login page and so that's what this auth page dot dot is doing just to have some more information about the user let's create a user and just get the current user and let's say logged in as the user's email and let's just display the user's email like that and maybe let's make it a bit bigger so you guys can see cool all right so the basic functionality is done now for the rest of the tutorial I'm going to sort of have some good practices uh when it comes to like ux the user experience so for example like if where signing a user in it's going to take a little bit of time so let's show a loading Circle and to do that we're going to show a little dialog and by the way to show a dialogue it's actually going to be easier to use a stateful widget but I actually made this login page as a stateless widget and I was thinking surely there's a way we could just convert a stateless widget to a stateful widget easily and I looked it up and there actually is so you can hover over the stateless widget and you can hit these commands so I'm using vs code and on a Mac so it looks like it's command Dot and we can convert to stateful widget oh sick sweet so now that we can show a dialog we can have the context and we can show this loading Circle finally so in the center let's just return a circular progress indicator and let's see how this looks hey there it is but it's not going away so at the very bottom let's just pop the circle and let's try it again cool so you have the loading Circle and then once you've signed in let's pop the circle okay looking good now some other errors to take care of is what if the username is wrong like they enter a wrong email then looks like we're just stuck on this loading Circle right so with this sign in method I'm just going to copy this and we're going to try signing in and if there's an error let's catch the error and let's just see what the error is so if the error code is user not found then for now let's just print it to our console just to see what's going on and if it's the wrong password then let's also print that to our console Okay so I'm just going to show you in my terminal console right here let's put in a wrong email and you can see we can see what the error is no user found for that email and similarly if we have a wrong password so we've got the email correct but the wrong password then we can see that error so let's display this information to the user so that they know what the problem is okay and just to keep the code clean I'm just going to separate out these methods so if it's a wrong email let's just show a small alert dialog and same thing for the password and it looks like our learning circle is still persisting and that's because once we've signed in we should pop it and get rid of it at the end and if we do have an error then let's pop the circle and then display the appropriate error sweet so you can see that little alert dialog to display the error and the user can just click anywhere to exit out of it sweet so again just coming back to the documentation you can see this is the code that we actually implemented so this is how you sign a user in with an email address and password but that's essentially it so that's all I had planned for this particular video just signing in with email and password in the next one let's actually create a user through our app so remember for this one we actually created the user manually on the Firebase console and so next one let's create a register Now button and let's create a register page and be able to create a user through our app okay and in the following video let's try to do some oauth sign in like Google sign in Apple sign in and let's try to get this authentication part down in our mobile apps so I'll make sure to link all of this code below so you guys can take a closer look at it so play around with it and let me know if you have any issues I'll try to help out but other than that thanks for watching and I'll catch you guys in the next one peace [Music] thank you

Channel: Mitch Koko

Views: 105,433

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: _3W-JuIVFlg

Length: 16min 0sec (960 seconds)

Published: Thu Dec 15 2022