Flutter Firebase Auth - The Cleanest & Fastest Way - IOS & Android

in this video you will learn how to use firebase authentication with your flutter project at the end you will be able to authenticate a user with ios and android the first thing you will need to do is go inside the pubspec.yam and you will add two dependencies the first one is the firebase core and the firebase but after you will click on get packages the next step is to go on firebase.com and you will create a brand new project i will call this one firebase art and click on continue then i will press again continue i will select an account and i will click on create a project a few moments later after the loading screen you can click on continue the next step is to activate the email sign-in authentication so you will click on build authentication then you will press on get started and you will click on email and password and you will enable the email and password and save now let's go back inside the project overview and we will need to add the android application first for this i will click on the android icon and we will need to have the android package name for this you can go inside your code and you will go inside android folder app and bill gradle if you go down you will be able to find the application id so you will copy paste this information inside your firebase project android package name next you can click on register app and since we are already there you will need to change the minimum sdk version for 19. otherwise your application will never work it's now time to download the google services and i will save this one inside my desktop you will need to put this file inside your application folder so i will move this on the side and i will drag and drop this inside the application folder this is how it should look now i will put side by side firebase and the code in this way it's easy for you to follow so you will click on next and on this step you will need to add a couple line of code inside your project for this we will go on the project and build gradle so you are already inside the android project and you will click on this build gradle not the one inside the application you can see that this line is already inside my code if you don't have it please add it next we need to add this line of code so i will copy this and i will put it just before the class path you can see also that i have the google already inside so we don't need to add this line if you don't have it again please add it now we need to go inside the app folder build gradle so we will click on the application folder and go inside this build gradle i will copy this line of code and i will find the apply plugin inside my code you can see it is right there so i will add this next inside the dependencies you will need to add the implementation platform i will copy this line of code i will go inside the dependencies and i will add it the last line of code is for the firebase analytics so i will copy this one and i will put it inside the dependencies also alright now we can click on next and we can click on continue to console the android device connection is already done now let's do the connection for ios click on add an app and select ios for the app bundle you will go back in your code right click on the ios folder and click open in xcode just to be clear you will need a mac to open xcode next you will click on runner targets runner and find the bundle identifier copy and paste this one inside firebase and then you can click on register app now you can download the config file i will save it inside my desktop inside xcode you will expand this runner folder and drag and drop the google services info file inside this folder now click on next next and you are done with the ios part now for the code you will go inside the library folder and create a folder called pages this one will have the home page the dart and the login register page the dart file inside the library you will create the dart and the widget 3.dart we will start with the art.dart for this one you will need to import the firebase package and next we will create a class the first thing is to create the final firebase ut which we will call firebase ut and this one is the instance next you will create a get current user which will use the firebaseot.currentuser after we need a stream user that get the uh state changes you can access this one with firebaseot.org state changes it's now time to create the sign in with email and password you can see that we use the firebase dot sign in with email and password and we give the email and password we do the same thing for create a user with email and password this one will use the firebase.createuser with email and password with the required information inside the last one we need is the future sign out this one is firebaseot.sign out or the home page we will import the flutter material.dart and create a stateless widget we will also import the firebase at package and the ut.class we just created just before the override we will create a user is equal to auth.currentuser and a future sign out which will use the uh dot sign out this is the class we just created we now need to create three different widgets the first one will be a title text firebase art the second one is a user id which is a text using the user.email and the third one is a sign out button it's just an elevated button with the text sign out which will trigger the sign out function inside the scaffold now we can add the app bar with the title and the widget inside the body will have a container with a column and the children will be the user id and the sign out button for the login register page.dart we will start with a simple stateful widget you will also import the firebase package and the odd class that we created just before the override you will create a string error message and a boolean is login we need also two text editing controller one is the controller email and the other one is the controller password after we can create a future sign in with email and password this one will have a try and on firebase exception catch inside the try you will await the uh class the sign in with email and password and you will give the controller email the text and the controller password.txt if there is a firebase exception then you will set state and set the error message with the information cached the next feature we will create is the create user with email and password we will still use the try and uncatch firebase autoexception inside the try we will await the class.createuser with email and password we give the controller email.txt and controllerpassword.text if there is a not firebase exception then we will set state and set the error message to the information cached now it's time to create our widgets so we will create a title widget this one is just a text firebase art we will also create a widget text field this one will have two arguments the string title and the text editing controller controller you will see later why we need this in the text field we will have the controller given by the arguments and the decoration will be the input decoration with the title inside the label text the next widget is the error message and if there is an error then we will have the information otherwise it will say nothing after we need to create a widget submit button and when we press on it if it's currently the login page then we will sign in with email and password otherwise if it's the register page then we will create a user with email and password the text of the button will also change if it's currently login or register page the last widget we need is the login or registration button this will be a text button and when we press on it this will set state and change the boolean of is login if it's true it will be false if it's false it will be through the text will either be register instead or log in instead for the scaffold we will create a navbar with the widget title we just created the body will be a container with a column and in the children we will add first the entry field the argument will be the email and the controller email the other entry field will be the argument password and controller password this will create two different text fields after we add the error message widget the submit button we jet and the login or register button for the widget 3.dart we'll import four things the odd class we created the homepage.dart the login register page.dart and the material.dart next you will create a stateful widget and inside the build you will have a stream builder the stream will be the uh class that we created dot state changes and the builder will have the context snapchat and will either return the home page or the login page if there is a user then you will have data inside the snapshot which means you will go inside the home page if there is no user connected then it will go straight inside the login page we will wrap this up by going inside the main dart and you will import the widget 3.dart and the firebase core dependency we will change the main by a future void main with the async and just before running the app you will have the widget folder binding that ensure initialized and the await firebase that initialized app you need to have this if you want your application to work in the material app the home will redirect to the widget 3 page and now you can start your application if you have any question you can comment down below all the steps are in the description thank you for watching see you in the next one bye

Channel: Flutter Mapp

Views: 56,951

Keywords: Flutter, flutter firebase auth, firebase auth flutter, flutter firebase authentication, flutter firebase authentication - email and password, flutter firebase auth email password, flutter auth firebase 10 minutes, flutter firebase auth the clean way, flutter tutorial, flutter tutorial for beginners

Id: rWamixHIKmQ

Length: 9min 57sec (597 seconds)

Published: Tue Jul 26 2022