Flutter Firebase Authentication - Email and Password

hey everybody welcome back to the channel i'm going to start a new series in this video on firebase authentication this is going to be a little similar to the series i did on the provider package where each video looked at a different provider within that package each one of these videos will take up a different aspect of firebase authentication so this one will just deal with basic email password authentication we'll hook up the firebase project and we'll leave it at that and if you want to continue with the series we're going to look at some other uh more advanced concepts such as verifying the email setting up a good state management system and architecting a good pattern for authentication we may also hook in some third-party providers such as facebook or google just to uh to bring those in as well so that's what we got on tap for today let's go ahead and get started all right so let's go ahead and get some things started with flutter create and i'll just call it login app but you can put whatever you want and once that's done i will cd into it and i'll open up visual studio code all right at this time i'll switch over to the firebase console so console.firebase.google.com and if you don't yet have a project go ahead and create one i have one here called email login and so i'm going to go into authentication and i'm just going to make sure that email password authentication is enabled and if it is not i'm going to go ahead and check enable there at this time uh click on the project overview bring it back out here uh we need to do our typical firebase setup and so let's start with android so i'm going to go into the android folder of my project i'm going into app i'm going into src i'm going into main and i'm diving into this android manifest xm which is going to have my package name and we'll grab that put that there i'm going to skip these next two steps because we don't need them right now so let's register the app and i'm going to download my google services json and once that is done drag it over to android app so it should sit down here underneath your build.gradle all right um i'm going to go to the docs here at this point we can skip out of the android and i'm gonna click go to docs and here i've got this fly down for use firebase with a framework and flutter is my option and there are chips here so i'm going to select android and we already created our app so we can skip over that coming down to step three add a firebase configuration file and so we need to do some modification to our root level uh build.gradle so that's right here actually nope it's out here highest level so it should start with this build script out here and i already have google and the repositories google's in the in down here in the all projects so really all i need to do is this copy of this in the dependencies and take this out and put it below the kotlin plugin and then in the app level which is right here next to our google services json we want to apply this plugin so we can copy this and also put it below the kotlin apply plugin you're also going to want to bump this minimum sdk version not in the docs but believe me you'll want to do that it'll save you some pain when dealing with the firebase plug-ins and then our last step is to add our flutter fire plug-ins and we're going to do that for ios as well same steps so why don't we skip tracks over here to ios and we want to first create our firebase project and register our app so let's skip back here to our firebase console we now have our android app let's add an app and let's add ios alright and for this i'm going to open it up in xcode so i am going to navigate to where my folder is and i do know where it is into the ios folder and looking for this runner.xcode.project so if you don't have a mac you won't be able to do this step or set it up for ios you'll just need to skip this but if you do have a mac then once this runs you can click on runner and be on your general tab and you will see your bundle identifier right there so go ahead and copy that and paste it in here skip these remaining fields click register app and download the google services info.plist and then take that from your folder download location drag it over here to inside runner click finish and we are all set with xcode at this point so i'm just going to go ahead and close it so let's hop over to pub.dev and get our plugins to complete our firebase setup and the one that we need uh for all firebase setup is firebase core so let's locate that go to the installing tab grab this right here copy it and we'll put it in our pubspec.yaml file right here in our dependencies under cupertino icons and since we're doing authentication of course we're going to need firebase auth so let's search that also copy that out of the dependencies and put it right here in the file all right and with that we are mostly set up with firebase this used to be enough there is an extra step if you're using firebase core 0.50 or above and that is to actually initialize the firebase project in your app and so you want to do that uh i find the best place to do that is in maine.dart there are a couple places to do it so i'm going to just shrink up this android and i'm going to visit lib and i'm going to go to main.dart and really what i want to do in here is clean this completely out so i'm going to take everything except void main run app my main and delete everything below that so the only thing that should be remaining is this main void where you run your application and i'm going to create a new app inside the lib folder so i'm going to create a folder inside lib that is my source folder so it will be src and inside src i'm going to create a new file called app.dart this is an architecture i think is is is nice and clean and i think it's even more necessary and clean when with this new initiation of firebase required so this will be a stateless app and we're just going to call it app make sure we import our stateless widget right there and we're not going to return a container like the code generator produces we want to return a material app and we'll give it a title we'll call it login app we will give it a theme so that is a let's see theme data and we'll provide an accent color which will do colors dot orange and a primary swatch which will be colors dot blue why not and i want to give this a home page as well but we're going to need a page to direct to so insider src let's create a screens folder and create the screens that we need at least shell those out so we have something to point to so this will be the screens folder and inside here i'm going to do two files so i'm going to do a login dot dart and a home dot dart and so inside home we're just going to do a stateless widget we'll call it home screen and make sure we get material imported and then for login i'm actually going to make this a stateful widget and this will be login screen get our import right there and that's good enough for now because really what i want to be able to do is come back to this app.dart and set a home screen which is going to be login screen so you'll come in you'll go to the login screen and then from there you may get to the home page depending on the results all right so then here in maine we've got my app so let's replace that with app make sure we import that uh if you get this error here in test you may just want to go in and fix that it actually is not a show stopper but you can change that to app and import it and that gets rid of that error you can get rid of this old import if you want as well all right so then just to initialize our firebase project and one main when we fire this up we want widgets flutter binding dot insure initialized we want to make sure that main is an async function because after we ensure initial initialization we want to await the result of firebase dot initialize app and with that we should be all set to start the emulator all right so there we go our app is black that is to be expected we are being directed to the login screen and if you see on the login screen uh the code generated for us is just an empty container so let's add something a little bit more exciting than that let's take the container out and let's do a scaffold we can do an app bar which will be really minimal we'll just put a title in there that with a text that says login we're not going to worry too much about styling here the point is just to get the logic set up all right and then for our body we can go ahead and do a column with children and let's do a text field that will hold our email address a text field that will hold our password uh and then let's do two buttons at the bottom so let's do a row with children and we'll do a raise button in each one of them one for sign in one for sign up and we'll just go ahead and do empty functions for now there we go all right empty function there but we will add a child which will be a text widget that says sign in and then we'll do another raised button we have the child that is text sign up and an on press which for now is a blank function let's give it each one of them a color and we'll do theme of context dot accent color and same below copy paste and just so it isn't completely hideous let's uh move our children down here and let's do a main axis alignment and a main access alignment dot space around just so we're not looking at something completely hideous um i'm going to go ahead and wrap each one of those text fields in some padding and i'm just going to use the default amount that vs code generates for me good enough all right so visiting our text field so this one's going to be our email this one's going to be our password why don't we indicate that so we can add a decoration on our text field and we can do input decoration we'll do a hint text which is going to be email that's pretty good on decoration so down here we'll do another decoration and that will be also input decoration and it'll be a hint text password so in my text field widget on email i do want to be able to have the at sign on the keyboard and so i'll just go ahead and do keyboard type is going to be text input type dot email address and i don't need a special keyboard type on password but i would like to obscure that text so inside text field obscure task text equals true um i need to store variables here so i've got a stateful widget so i'm just going to go ahead and use set state not ideal for a big project but good enough uh for this one and as we progress through this uh this series if you want to stick around we'll refactor and put in a a more uh robust state management system but for now i'm just to do a string of underscore email and underscore password we'll create those variables to use here i might as well go ahead and create an instance of off so i'll call a variable auth and we will set it equal to firestore off dot instance that's because it should be firebase off not firestore auth so then i just want to tie each one of these text fields to those variables so i can use those for creating a user account or signing in if i'm doing that and so i can do that with the onchange method of text field so we'll pass in a value and what we'll do is set state and we'll just go ahead and say on this one for some reason i started with password it's going to be equal to value and i'm going to actually do value.trim because it is awfully easy to let a space creep in there on the emulator and so i want to do the same thing up above so i'm just going to copy it and paste it inside there and instead of password that's going to be email like that so now every time we make a change it should be recording that to our variables and so when we type these we'll be able to access those variables and so really the last thing we need to do is come down here and fill in our sign in sign up button so on the sign in we can do off sign in with email and password and just pass it email and pass underscore password and then down here for sign up we can do auth dot create user with email and password so that would be email underscore password and then after we do either one of those activities sign in or create a user we're going to want to jump to our home screen so inside of the on pressed method we can do navigator dot of context and we'll do push uh replacement and so that will be a material page route with a builder and a context and that context will fat arrow over to our page which will be our home screen i don't know that we've defined that yet oh we have it's just being difficult make sure we get that imported um we want to do the same thing on sign up and that's horrible to type again so i'm just going to copy this and paste it right down here below so either one of these it should first do the the action of course there's no error trapping here whatsoever we're going to build that in later but let's just say [Music] sign up and we're taken to this blank screen which makes sense because our home just has a blank container but more importantly let's take a look at our project i'm going to go to authentication and i'm going to see that there is now a user created today with my email so that worked all right so in place of this container on home.dart let's just go ahead and build a scaffold and here we'll just build a scaffold we won't get too fancy we'll just do a body and we'll do a center widget with a child and that will be a flat button which will give us an opportunity to log out so we'll give that flat button a child with a text that says log out and on pressed we'll call our authlogic and sign out so up here inside the state list widget we'll need to do a variable called off which will be make sure i get it right this time firebase auth instance and then in our on press will be auth dot sign out and then we want to navigate back to the login screen so you know i'm going to just copy this from login and put it here and send it back to the login screen instead of the home screen all right and with that in place i should be able to click this log out and now that i have an account i should be able to sign in and i can all right so that's the basics of email sign in and sign up with firebase authentication if you want to dive a little deeper please continue with this series in the next one we're going to add a validate email option so the user will get an auto-generated email from firebase they'll need to go to their email they'll need to click on that and then they'll be allowed to proceed past the verification screen in the app so that'll be next time on this series hope you found this helpful please like and subscribe if you did thanks for watching and hopefully we'll see in a future video

Channel: Andy Julow

Views: 38,747

Keywords:

Id: lhZGf0vcG7Y

Length: 24min 31sec (1471 seconds)

Published: Fri Nov 06 2020