Flutter Firebase Auth With Provider - Flutter Authentication with Email and Password Tutorial

today i'm going to teach you how to implement firebase auto in your flutter apps [Music] what's up guys massimo here from zero to unicorn by the end of the video you will know how to let user register and login into your apps using firebase auth and the provider package also you will be able to create apps that understand whether the user are logged in or not and redirect the users accordingly so keep in mind that all the dependencies of this video are up today as of july 2021. okay so let's get started okay so first of all let's take a look at the boilerplate code or the simple app that we have already created we have an initial route which is a forward slash and it goes to our home screen then we have a login screen and a register screen as you see on the right our home screen is very simple and there's only a button for the logout however if you actually look at the code this is not actually logging out user at the moment but it's just pushing a different route we will change this later on then in the login screen we have two text editing controller to collect the email and the password of the user and we have two text field where the user can actually input the values then at the bottom we have two elevated button one to complete login and one to go to the register screen we go to the registration it's very similar and there are only two different text field and a button okay let's go back and let's check our user model now each user registering to our app need to have a user instance so we created this user model with uid and email very simple then our out service is a file that we will use to connect with firebase and is still empty and finally we have our wrapper which is the widget that will decide whether the user go to the home screen or to the login screen based on his authentication status okay so let's get started and let's go to console.firebase.gov you will probably need to create a new project i instead i will use the flutter odd project that i have already created okay so here we will need to register our ios app okay now first of all we need the ios bundle id to get it we need to go back to our code and into the ios folder we can click on reveal in finder for under runner xc workspace file which then we will open and as we open it with xcode we can click on runner and we will find the bundle identifier under the identity menu then in the deployment info we will need to change the version of ios to 10. ok now we can go back to firebase and add our bundle id we can move on and we will need to download the config file which once it gets downloaded we will need to drop it under the runner folder into xcode so we can click finish and we can close xcode now next step is gonna be to run all the init and body install which are two steps that we can actually skip but i'll show you what happened if you actually do it so once we create pod in it there's gonna be a new pod file into the ios folder and then once we click pod install the app will check whether we need to add some dependencies but in our case we don't need to because we have not added anything into the pubs back the yaml file now let's work on the android app so let's go into the android folder and let's open the up level build gradle file so here in row 37 we will find our application id and we will copied it into the android package name and we will move on then next step is going to be to download the googleservice.json file and we will need to drop this file into the app folder inside the android folder of our app okay once we do this we can go back and we need to add a few lines of code into the project level build gradle into the android folder so first of all we have the dependency and we check that the google maps repository is there then we need to apply a new plugin into the up level build gradle and we can go there in row 26 and copy and paste that and finally we will add the firebase bom under the dependency in the up level build gradle file ok we can save it and then we can start to add some dependency in the pulse back the yaml file in order to import firebase core and firebase auto as you can see here on flutter fire the latest version of authentication is 3.0 and core is 1.4 so we will use these two versions so we'll add firebase core equal to 1.4.0 and firebase odd we will set 3.0.1 okay we can save and we will run flutter pubget in order to download the dependencies now let me close the app and restart it again so that it will automatically run pod installed perfect it will take a few seconds but once the app run again we have the dependency installed and we can go back to our main dart file where we will add widget flutter binding dot in initialized and then we will also wait for firebase to create a new instance and initialize the app so once we do this our app will always initialize firebase when it gets started again perfect now firebase is into our app and everything seems to be working fine for now we can move on and we can start to define the odd service class where we will actually handle the connection with firebase auto so first of all here we will need to create a new variable which is going to be a firebase auth instance we will call it autodot firebase because we will rename the import then we need to create a new method in order to map data that we get from firebase out so that matches our user model so we will create this formula called user from firebase that take firebase user object and if it's null it will return just nulu but if it's not null it will return our user object as we defined it with a uid and an email okay now we can actually start to create other function into our out service so first of all we're gonna have a gather that will return a stream of user then we don't define this yet but let's write first all the function that we need then we will have sign in with email and password to register the user and this is going to return a feature of a user object then another one is going to be another feature of a user object which will be the create user with email and password which will help us in order to register new accounts and new users again this is going to be an asynchronous function too and finally we have the last one which is gonna be a feature that will basically sign up the users okay so in the user gather let's just return firebaseot.outstatechanges that will basically return a stream of the user object and we will map this in order to use our user form firebase okay now in the sign in with email and password let's create the final credential variable and here we will await so that we use firebaseot.signin with email and password which is a formula already defined in the firebase auth library and we will pass our email and password as an input then we will use this credential variable and we will take the user from it and we will map it back to our user model and we will return it then on create user email with password we will do basically the same instead in this time we will not use sign in with email and password but we will use create user with email and password that is a function already defined in the firebase out library that will let us create a new user and finally we will return as well the user that we have just created perfect and finally we can define the last one which is sign out and here we will use again the sign out function from firebase that will basically just log out the user from our app perfect so now our out service class is defined and we can add it into our main.dart file to do so we will need to wrap the material up with a multi-provider and in the list of provider we will create one new provider for the out service so once we create this new provider for for the out service you will see that there is an error and the issue is simply that we have not imported provider yet into our pubspec.yaml file for this video we will use version 5.0.0 and as we added it we can actually import that into the main. and there's not going to be an error anymore and now our odd service is available thanks to the provider in all our app now we can move on and we will define the wrapper that will check whether the user is authenticated or not so first of all we create the out service variable here and we will use the provider.of outservice so once we do this we will be able to access all the methods that are available into our out service class then we will use a stream builder in order to return a stream of user and we will check so that we will be able to check which is the latest status of the user in our app okay so we'll add stream equal to outservice dot user the getter that we have defined before into the odd service class and then we will need to import our user model into this file as well [Music] perfect there's no error anymore we can move on and define the builder so the builder will use an asynchronous snapshot essentially of a user and we'll call it snapshot and then from this snapshot we will actually check whether the connection state of the snapshot is active if it's active we can move on and check whether the user has data using snapshot.data and if the user has data you won't be null and if the user basically is not null we can return the home screen else if there's no user based on the snapshot that we are retrieving we will return the login screen then just to avoid errors we will need to have an alternative which is going to be our else parts of the statement and we will return a circular progress indicator in that case okay so everything is ready with our wrapper we can add it into the main.dart basically we need to replace the home screen with the wrapper now we cannot restart and you see that the wrapper is returning the login screen and not the home screen anymore because we don't have a user logged in so now let's go back to firebase and let's go into the authentication now here among the sign-in methods we will enable email and password and now we can go back to our app and we can start to define the login process in the login screen so first of all we will need to use the provider about service in order to create a node service variable even in the login screen so we will use provider.of and we will set out service then as we do this we will need to import the two packages that we are missing and we can go into the elevator button and we can actually start to use the function that we defined so we will use odd service dot sign in with email and password and we will pass as an input the text from the email controller and the text from the password controller and we will use this basically in order to sign in so every time the user will fill these two fields you will be able to click on login and then sign in if i fill them now with let's say maximum.gmail.com and i click login i will have an error simply because this user has not been registered yet so when the app will check there's not gonna be an account with this credential so now to fix this error let's close the app and let's restart it and let's work on the register screen so that we can actually register a user first and then we can try to login again here we will create as well the odd service variable using the provider and then we can go to the elevated button and we will use odd service dot create user with email and password in order to create a new account into firebase auto so again even here we will use email equal to email contain controller.txt and password equal to password controller.txt let's change the function to asynchronous and let's add the await keyword before the bot service now we can try to register a user and let's try to write info at zero to unicorn dot club which is the mail that we're actually using on this channel let's add the password equal to maximum let's click on register and now we get redirected to the home screen meaning that we are logged in if we click on logout so far it's not a real logout yet because we are only pushing a different screen however we can change this by going into the home screen so first of all we create the odd service variable so that we can use the odd service class and then we will use await outservice dot sign out so every time user click on the logout button it will actually be logged out from the app and it's not going to be authenticated anymore now we are on the login screen again and if we try to write info 0.unicorn.club and we add our password and we click on login then we will successfully login into our app and after that we can try to sign up sign out again and as you see we go back to the login screen if you go on a flyerbase console now you can see that we managed to register this user and everything seemed to be working fine and that's pretty much about it for this episode hopefully now you know how to manage the authentication in your app using firebase auth and the provider package so thanks for watching and stay tuned for more video

Channel: Max on Flutter

Views: 24,201

Keywords: flutter firebase auth email password, flutter firebase authentication - email and password, flutter firebase auth with provider, flutter firebase authentication tutorial, flutter firebase auth email verification, firebase authentication, firebase authentication flutter, firebase auth flutter provider, firebase auth flutter tutorial, firebase auth flutter, flutter firebase auth, flutter firebase auth tutorial, flutter firebase tutorial, flutter firebase authentication

Id: w7tt8CeMnhs

Length: 14min 4sec (844 seconds)

Published: Tue Jul 27 2021