Flutter: Firebase Tutorial Part 1 | Auth and Sign in

having a back-end can be crucial in some apps so that's why we shake in this video how we can connect flat away firebase and creating a sign-in flow and because this video will not be covering everything we will have a three-part video where this video will be a signing flow the next video get a free full mouth for Skillshare and stream more than 18,000 online classes on subjects like design business and take after a while and you feel like this isn't for you you can always cancel a subscription and not pay anything so don't wait try it out now the link is in the description if you like this kind of videos please let me know by subscribing to the channel so you don't miss any future content and also liking and commenting what you'd like to see next so let's just dive into it so let's see here we have a started a newly created project which has a my app and I'm my home page so we will begin by creating our login page so I already given it a title here so the second thing is we will rename this this class so let's just call this login page and also rename this to login page states like that so what actually what I actually will do now is control X's so cut it out and then go to the project let's go to the library create a directory let's set this to to setup so this folder will have a new dart file called sign in so the sign-in page will list paste this in and import the material package so let's just rerun this oh actually we have to import that now we can run it so what I actually would go ahead and do is really remove all these new keywords because we don't need them anymore dribble this also excuse me for this so there we go now I have a setup where we have our sign-in page so what we'll do now is actually create the body which will just be a a a form with a column and the shadow of this would be a column and I'm you're sitting to do so we know what to do so in this one we will actually implement key and up here we'll have to create the two variables that will hold it mail and password so to do that let's start with creating our variables we will just be using string and this will be called email and then password just in case you didn't know the underscore used mark them as private in the dart language so here at the top we will create our key to use for the form so we'll use the final and create a global key so what a global key will have have here is a form state and then we will just call it form key like that so now we can take this key go to the form set the key property to the form key like that so now inside this column we will have our text form fields so actually we won't have any nice formatting to display this published print them in a column maybe I will do a second tutorial on how we can style is afterwards but we'll just go with the basics for now so we need to form fields or to text for fields like that and we will have a validator we will have a unsaved just remove that and let's see what we need more we need a decoration so let's start with the decoration which will be a input decoration and for the input decoration we can set the label text to email on this one for the validator unsaved they will be about the same so we have a input and for the input we open the brackets and if the input will list check if it's if it's empty or not and here really you will actually check if it's contains like an @ sign or something for email to validate if it's an actual email or not and we will return please type some text please type and email is better so if the user press the button later and haven't provided an email we'll just print this to the trophy so now unsaved we provide an input we'll take the element and set it to the input so there we go there we have our form field for the email so if you save that we can see that we have an emailer so we'll just take this and copy it down so here we can have please provide a password and we will actually set input dot length is less than six your password six characters like that we change this to password which is one two password and a two input and that should be fine and we will also have one more thing called obscure texts which really is obscure that takes we type into the field so if we try to us we can see that the displaced dots instead there we go so for the third thing we need is to actually have a button so we will just provide a raised button which a which has a on pressed and we will is two like this for now and a child for the text so we will actually do a couple of things we will we will actually only do this sign in our to be honest I will do the sign up in the next tutorial like that so if we save this again we can see that we have a button and we will create our sign-in method so if you go down to the bottom of this class we can create a method called avoid sign-in which is small lettering beginning so sign in and here we will validate fills and then login to firebase so what we can do now is do the validate and we leave the firebase after so to do the validation we check for a if and we can actually to make it a bit easier we can create a final field called form or something and that will be form K dot the current state and we can actually have a form state so now a key is called form state of validate in the if so if this is true we can login to firebase so now to begin with connecting with firebase I have a couple of links to do that so if I just do this if I create so here up I have a a page to the code labs and we will use that while we go over and I will only go over Android but you can see the configure for iOS here so to begin we have let's just close this down there we go so we create a new project and for the name of this project we will have testing - it's an example and this product will not exist when this tutorial is happiest ad hits up so we have this test testing - we accept where we approve the Google Terms of Service and we create project so while this is creating the project we can shake here what they actually do afterwards so it says that we have to go in and create an app and we haven't actually gotten that far even so let's go back here now there we go so if we continue we go to there we go that's actually a bit Oh weird and never mind click on the Android icon and we get to this page so this page we have to provide our Android package so to bra to provide this under package we can go to the project go to Android let's see if I remember this and I think it's this one right it's actually not that one maybe it's in this one let's see compiled version there we go so the application idea here so we cover this so this was in the android folder and then go to the app and then build of Gradle we copy this application ID we go back again we pasted this in here and we will not give it a nickname so where is registering app you can give it a nickname if you want our just not do it so we will have this Google services and you just hit download so now we have this Google services so I will copy that one we go into the application we can close this bill Gradle for now and if we shake this this code labs we can scroll down and see why we need to paste this and we let's see move the JSON file to the Android / app folder so if we go back to the project we can go to Android and app so inside here we can paste it in today we have our JSON file and I said before this won't be up when the video is up so I will have this project remove them and so let's check for the next step so finally you need to delete the Google a some file it's with the nffa base bla bla we take this file or this text right here and we can see that open app billet Gradle and following line to the last line of the file so if you go back go to be a lot greater scroll all the way to the bottom and we can paste this apply it to the plug-in we go back again we can see that they want to put this into the build script in the billet Gradle in and or folder and I only want this this class path right here so we take this we can actually copy the whole thing we'll go back and they only wanted to go to the other folder and then build of Gradle we go to the class build script and on dependencies yeah and we can used for firebase like that and that should be enough for that so the next step is actually to import a package so you swim into this series better firebase so what we actually need is to make the the connection with the designing so we can just go ahead and skip all the steps and go to authentication you can set up a sign-in method and we will take the email and password and enable that you can save it so right now we can see that we don't have any user and as we are going to do the signup um in the next tutorial we just add a user left after me take a simple password like that keep still testing there go that we have a user so now we can take this firebase off package go to the install copy their dependency go down go to pubs Victor diamo we can paste it down below the SDK or flutter we can package dot yet and I will close this I'll go to the sign in page and we scroll down we can see the import we will get the dependency and in put this at the top like that there were no errors can close this and we can open the application so now we should be connected with the application we will actually see that later so for this if statement in the field we will a to create a try-catch but I will show you why so when you're doing this we will have a a new class called firebase auth so with this we can get instance and we have a method called sign in with email and password and I don't know if you saw that I will show it again it has a future and returns a firebase user so right here on the email we will actually have to do one more thing so as you saw before with the fields we created these these two strings the email and password and unsaved on these two form fields we'll set this so we have to actually call a call the forum state and not save and that will call these functions inside this we can save the variables into our variables so then we can cover a sign in with our email and our password so as I said before as this requires a as this is a future we can set this method to async we will do a future void and we import the data sync we can do await on this and as I said before this actually returns a firebase users we can do that too please call it user unless this line is pretty big we can actually know let's have it like that there we go so we have this sign-in flow so as we are using a wait we have to have a try and catch in case something is wrong so now we can take this and put it in the try so here we want to navigate to home because if we get here that means that this is working and here we can use to print the error and the error for firebase has a message so we can get that directly from from the error and to navigate to new screen we will actually have to create a new class where in you home widget inside the setup will actually create a new folder again which is a soft life pages so inside these pages we will create a dart file called home and we can create this snippet called stateful and we'll just call this hole and import this the material and not use a container will use a scaffold with a apper like that and then have a title to oh right so if we save that we can close the pub Sugiyama we can close this one so what's actually happening now is that we can let's actually call the navigation right now so we can call the navigator dot push you can take the rotate the context and for the route we create a material page route which takes a builder and then here we can call our home page and we have to import our home page like that so let's see if this is working so as I showed before I had created a user with testing at gmail and then I had a password for that so let's go back here testing then for the password we can see if that actually works and we actually had fun we didn't actually set the own press to the before the button so therefore the button for the unpressed we can just call the signing like that and we can rerun this page so let's see now it should be working there we go for the email okay it's not working fine I've had to restart the project so the the hot restart didn't actually work I had to press the stop button and then play again so here we can see we have our sign-in page and if I go back to our authentication we try to sign in now with chasing at gmail.com and if I press sign in we actually get into the home page so used to try that we're getting the right user we can provide our user in here and go to the home page and create a final firebase user we import by which user and we import or create a constructor so then we can take this user because it's stateful we did we take the widget out user and we can't take the let's display the MA you can actually do this as required now I have a small box I just need to close this and play I'll fix this in the next tutorial so if we run this now and wait for that to begin we should see that we are able to sign in with the Amanda password we provided in the page right here and when we do that we are going to navigate to our home screen and when we do that we are going to provide the user that we signed in with and then display the home widget with our user email so if we try that we write in testing at gmail.com we provide our password and we can see that we have home and then our email so for the next tutorial I will see if I can get some things working depending on that the the next video will be about our signup page and if not we'll probably have some kind of challenge we'll see what will happen so if you like this kind of video leave a like comment and subscribe and also check in the description for my patreon if you would like to support me there and if not I was in your next tutorial bye [Music]

Channel: Robert Brunhage

Views: 150,833

Keywords: Flutter, Flutter firebase, Flutter firebase auth, flutter firebase authentication, Flutter firebase tutorial, flutter firebase database tutorial, flutter firebase auth tutorial, flutter firebase login, flutter firebase login exmaple, flutter firebase login screen, Flutter firebase part 1, flutter firebase auth ui, flutter firebase auth email, flutter firebase sign in, Robert Brunhage

Id: 13-jNF984C0

Length: 23min 27sec (1407 seconds)

Published: Mon Oct 08 2018