Flutter Firebase Authentication | Introduction to Firebase_auth

hello everyone today we're going to talk about firebase auth [Music] so today's app will be pretty simple we're just going to have two text fields one for email address and one for password and three buttons one for sign up one for sign in and one for log out now we could also do form validation error handling this is just going to be an introduction to firebase auth and then in the next video we'll dive deeper the first thing we're going to do is connect the ios portion of our app to firebase we'll go into ios here and right mouse click on this xc workspace we're going to do reveal in finder you'll double click this to open up xcode we're going to double click on this very top runner so this bundle identifier we're going to need here you'll notice it says com.example and then it has the app name that we're using if you have a domain name for your apps or your company i would suggest putting it here instead i think as long as it's unique you're okay but if you do have a domain or plan on getting a domain i would suggest using it here so i'm going to change this example here to learn flutter with me then i'm going to copy that now under deployment info you're going to see ios 9 we're going to change that to at least ios 10. okay we're done with xcode for now but minimize it because we're coming back to it now we're going to go into console.firebase.google.com once you're in there you want to add a project we're just going to call this firebase auth example hit continue we're going to skip google analytics since we're just doing a tutorial and then hit create project we'll wait for the project to be created now that the project is created we'll click continue so now that we're inside here we're going to click this ios icon here that bundle id that i copied i'm going to paste it in here and then i'm going to skip these two optional fields here and hit register app now i'm going to download this google service file now you'll want to make sure that there's no extra characters in this file name for example if you've downloaded this file before there may be a one in parentheses in it you want to make sure that the file name is exactly like this we're now going to open xcode back up take this file and drag it and drop it under the second runner folder we want to make sure that add to targets is checked and then hit finish and then we're done in xcode so you can close it over back at firebase we're going to click next we're going to skip this and click next we're going to skip this and click next and we're going to continue the console now one other thing you're going to want to do on the ios side is you're going to want to make sure cocoapods is up to date you can do that simply by entering this command here sudo gem install cocoapods okay now that we have ios installed we're going to go and install on android so we have to update two files here we're going to go under android and app and you'll see a build.gradle file here double click that the id that we're going to want for android is right here again you'll see com.example i'm going to take this and change it to learn flutter with me and then i'm going to copy that [Music] we'll go back over here to firebase and click this add app and now we're going to do the android icon very similarly the id we just copied we're going to paste in here and we're going to skip at these two fields that are optional and hit register app we're going to download the google services json file and again you want to make sure the file name is exactly like this if it has any parentheses or numbers in it you want to remove those it needs to look exactly like this we'll go back into vs code and we're going to copy it here into app now while we're in this build.gradle file we're going to go down here where these apply plugins are and we're going to add a line and then to enable multi-decks we're going to go into android and default config and add a line here and for multi-decks we also need to add a line into dependencies now we can save and close that file but we're going to open up the build.gradle file that's in the android folder directly up here in build script and dependencies are going to add a line you can save that and close that file now we'll go back to the firebase site we're going to click the next button here we're going to skip all of this and hit the next button and then we're going to continue to console so now you should see both ios and android at the top the next step we need to do is we need to click on this authentication here we're going to click get started [Music] right here where it says email password we're going to click this pencil to edit it and we just want to enable this top one we're not worried about this bottom one go ahead and hit save and then what we're going to do next is just click on this users down here and minimize the page because we're going to come back to this so now we're ready to install the firebase plugins we're going to open up the terminal and we're going to type in flutter pub add firebase core after that's done we're going to type in flutter pub add firebase off [Music] and once that is done you should be able to come down here into your pub spec yaml file and you'll see those entries in here so now let's build our tutorial boilerplate i'm going to delete everything from here down i'm going to change this to auth app i'm going to do a new stateful widget by typing in stful and hitting tab i'm going to do a material app [Music] and a scaffold and an app bar we will go ahead and run that okay it's looking good so far let's go ahead and add our text fields and connect them to their controllers so we're going to create a body here there's our two text fields up here at the top of auth app state we're going to add our controllers and then we'll connect them to these text fields now you could also add obscure text here if you want to i'm going to leave it off for the tutorial though so we can see the contents of the text field [Music] okay we've got our text fields there i'm going to add the three buttons [Music] on this one we're going to add a main access alignment we're going to do space around there we go that's going to be our basic layout for this tutorial so now we're ready to start tying firebase to the app up here at the top we're going to add firebase core and then we're going to add firebase off right here in maine we're going to ensure that the widget's flutter binding is initialized we're going to add async to this and a weight and we're going to make sure that firebase is initialized so now we're ready to do the sign up process so down here in the sign up button we're going to make sure this has async and we're going to create the user with email and password and then below this we're going to call set state just so it'll rebuild the app for us [Music] so go ahead and give it a try we're going to type in test1 at test1.com and testing one and then i'm going to click the sign up button here now you're not going to see anything happen here but if you go back to firebase and hit the reload button you'll see the record there so let's make it to where you can tell when somebody's logged in from the app we're going to go to this build right here at the top of auth app state and we're going to type this in and we have the question mark here by user because this can be null if no one is logged in so down here in the app bar we're going to add this and i'm going to do what's called a ternary operator or a simplified if-then statement to where if user is null it's going to say out otherwise it's going to say in so this says logged out if user is null otherwise it says logged in we'll save that and you'll see that the user is logged in so we'll work on the logout button now we'll go down here we add async again and we're going to again add set state here we'll save that and come over here and click the log out button and now as you see it says logged out so one last thing to add we'll add the process to sign in [Music] we're going to once again add set state here save those changes and now we're going to click sign in here and now you'll see that they're logged in so we'll do one more test i'm going to log this person out i'm going to change this to test to at test2.com and testing2 i'm going to sign this person up we'll see that they're logged in if we go to firebase and hit the reload button we'll see the new user there we will log the person out they're logged out and we will sign the person back in and they're logged in okay as i mentioned this doesn't have form validation or error handling or anything like that this was just an introduction to firebase auth in the next video we'll dive more into it so you might also like this video here and if you're enjoying my videos and would like to see more please consider subscribing thanks and i hope to see you in the next one [Music] you

Channel: Learn Flutter with Me

Views: 7,012

Keywords: flutter firebase auth, firebase authentication, flutter firebase tutorial, firebase auth, firebase auth flutter, firebase authentication flutter, firebase, flutter, flutter firebase authentication, flutter firebase auth tutorial

Id: gdBQkPYKnvw

Length: 13min 22sec (802 seconds)

Published: Fri Jul 02 2021