Flutter & Firebase Auth | Implementing Cloud Firestore & Catching Errors (Flutter 2.2) | Part 2

so in part one of our flutter and firebase authentication we have designed our login and registration screen and now today it's time to add firebase to our project let me give you a brief intro upon what we'll be learning today so we'll be doing form validation check sending and receiving data using our cloud file store and also catching various authentication errors excited now so without any further ado let's get straight to our visual studio code and start coding our application hello everyone and welcome to part two of our flutter and firebase authentication in part one of the series we have built this awesome ui design in which we have this login screen then we have our sign up screen and if we can go back to a login screen with this button and also if i click on login we will be redirected to our welcome page so this was everything that we've done till now now the main thing is we have to integrate firebase to our project so for integrating firebase we will go to our web browser and here i will go to filebase.google.com [Music] we can click on go to console and now we will add a new project i can write email path word authent auth [Music] okay we'll do we will disable google analytics we don't need this we just wait for a while for this to create the project for us okay so we got our project created now we'll click on continue and here we can see this firebase project is created and now the next step is we can integrate our application to firebase so how you can do that for this tutorial i'm going with an android version now in this register app section here you can see first thing that it that it is asking is our android package name so how you can get that android package name first of all you can go to a project and here in your project you have to go to this android app section and in source there will be a main and in this here we have our android manifest file if you have been an android developer then you might be knowing this file now here you can see we have the package name here so i'll just copy and paste it here and you can provide a name for our application we will write email password authentication auth and now it is asking for a sha key so how you can generate that you can see is this question mark and if i click on this link for see this page section here we are provided with this authenticate your client section and in which we will have our command to generate our sha key for mac and linux you can copy and paste this command to your cmd for your in your terminal and if you are on a windows then you can copy and paste this command in your cmd so let's copy and paste this command to our terminal will open up a new terminal window because in the previous terminal window we have our flutter app running so i'll just copy and paste it this and paste here so it will ask for an android keystore password all the android key store password generally is an android and this is will be the android password okay now here you can see we have this shaky so i'll just copy and i'll just paste it paste this here okay so this will register the app for us we'll just wait for a while okay we got our app registered now the next step is we have to download the config file so just click on download google services.json file let's click on allow and here we will go to our we have to place this google.json file inside our app folder so we can go to visual studio code and here we can just place it here okay we have our google services.json files file also placed here now we'll click on next and the next step is we have to add firebase sdk to our project so how you can do that so if first you can see we have to add the add these command in this project level so project level would be our android okay and here you can see we have this build.gradle and the thing that we need to add our first is the class path so you can go and search for this section class path okay so actually we are in android app and then build.gradle we have to go to the build.grader of our project directory so this will be the build gradle of our project directory and here we can just copy and paste it and the next step is we need to go to the app level build.gradle we'll just go to app and i'll go to build.gradle and we'll copy this command apply plugin paste it here and the next thing is we have to copy this also okay we'll paste it here now we can just click on save you can save everything okay now you can click on next and we got our app added to us firebase i don't have xcode in my mac for now but i will also show you how you can integrate export to your firebase and click on this ios section so we'll click on this ios section and here it is asking for our ios bundle id you can go to your ios folder and here you can see we have this runner.xcode you can click on this project and here we will search for bundle id you can just remove all this and you can see project bundle identifier so this is form dot example dot email password login will copy and paste it here like email password auth register app will download google services file where we have to place this in below the info.plist file we'll go here runner and just paste it in this section okay now we'll click on next we don't need to all integrate this as we don't have our ios simulator so we will not be running the app application on ios but rather we'll be focusing more on android okay so we got everything set up we got our firebase setup with our project now the next step is we need to enable authentication for us so here in our email password authentication we'll click on this get started button you can close this thing and now here you can see we have this email and password so we'll click on enable and you click on save okay so this got enabled and in authentication in users we don't have any user for this project yet so we'll be creating more we'll be creating that right now we are we are in our visual studio code now we can start coding our application okay so we are in our login screen in our login screen in part 1 we have created this email field then our password field then we have a login button then our scaffold which will which will contain the design for our field so now next most important thing is we have to add all the packages to our project how you can do that you can go to your web browser again and here in your web browser you have to go to this website and here we have to search for different packages first package would be cloud firestore okay we'll just open this in a new terminal in a new tab and also the next strategies and firebase authentication will open this also and the next is a firebase core we will open this also and other thing is we have to open we have to add this flutter toast also for showing any error that occurs while authenticating authenticating the user okay now let me show you one quick tip here you can see in our visuals before we have this extension section where where i have added this puff spec assist extension and now what this perspective do for us is let's say i'm in my login screen let me just close this now in now let's say i'm in my login screen and i wanted to add a package to my project how you can do that i can just press command shift and p and this is control shift and p in windows so let me just type add dependencies so here you can see it will ask for adding a dependency will click on yes let's say i write cloud file store so i'll click on enter and this will add that cloud firestore to our suspect file let me just go to my perspex yaml file and here as you can see we got this cloud firestore added with the latest version so this will help you how with for not searching the whole internet and then going to the installing tab and copying the copying the dependency and then pasting so this is just a quick tip and now let's add other packages also i'll just speed forward the video for you okay so we got this working and everything is fine now one more important thing is we can go to our why is it showing error don't know why is this showing error to me we can also delete our web folder we don't need this now what is this this is for this is for our web we will delete this also generated plugin now we have everything okay just one more important thing is we can go to our app and here build.gradle and we can change the minimum sdk version to be 21 so that it don't cause any issue to us okay we are fine now now let us go here to our login screen and here we will call our firebase or you can write that in nice final authentication this we can write firebase auth dot instance we'll just remove this okay here we have called our variable now the most important thing is we have to write this validator thing for our email field so we will write validator this will be of this will return a value this will have a value as we did in this unsaved thing now what we can do is let's say if the value is empty if if there is no value in this email field then we will return please enter your email okay and here i have to write return and here i have to close this thing this can be okay also i am writing a lex expression for email validation okay so i'll be just copying it and i'll be just copying it from my project and i'll just paste it here so that because it this is something i cannot type here for you i will be providing this into the description or also you can see this from our source code so just copy this and here you will write hash match this will be the value if this matches with this expression then we will return please enter a valid email or is it showing me an error okay so this is our uh email field and if there is nothing we will return on null okay and here we got our email field then we will also do the validator in our password field also you can just write validator this will be value [Applause] and here we can just write a comma here and now we also need to provide another expression we like reg regex expression new rejects as you seen in showcase of the tutorial there will be a validation for entering the number of characters minimum six characters are required for firebase to create a account with email and password so we'll be provide creating an edge expression in which we will show in which we will ask for our user to enter minimum value of let's say 6. how you can do that we'll go here we will type this we will type this thing now let's say if value is empty if the value is empty we will write we will return rather we will return please enter your [Applause] password and or rather we can return if password is required for login [Applause] okay and else if there is a match for this expression then we can do is if this expression has a match then we can write value and we will return please enter password please enter valid password minimum six characters okay so this is our validator for our password field we also have here we have a login button we have a scaffold now the next thing is we have to create this login function how you can do that is login function now you like void sign in and the sign in function will have an string email and a string password this will be an async function and here if our form key dot current state dot validate if the validation is okay only then we will execute this command okay i guess this is current state try getting current state okay now as if this is an async function so we will write await and here we will write auth what is the value that we created below our text editing controller so here we can write r dot we will have to sign another user so we will like sign in with email and password and here in this email we will write email and in password business password is ok now we will write then if you if the login is successful then you will pass this value uid user id and here we can write this and here what we need to do is and here what we have to do is we will call our flutter toast here we will call our flutter toast and show this toast as and show the toast as login successful [Applause] okay login successful now we can go i think this we have to import the library and just click here why is it not showing me that button okay we'll import the package now when our login is successful what we have to do is we will call our navigator and here we will write off context and this will be push replacement and we will push the replacement we will write material page root and here we will have our builder with builder we will provide the context and we will redirect our user to our home screen cell like home screen we'll click here now this is something when our login is successful what if we catch some error how you can catch error we'll write catch error here let's say we have our error name as e so we will be displaying that error in our toast here we like flutter toast dot show show toast and in message we will have our message as our error we have to write this also exclamation because of null null safety and this will be our message so this was everything for a login screen i guess we have some issue here let me just see why is it showing me this error okay now this is our function we have to assign the function to our login button in part one of this tutorial we have implemented the on click on press function for this button to go to our home screen because we wanted to show the user the design for our own screen but now we will just remove that and what we have to do is with on press we will write sign in and we have to pass our email controller dot text and now here we will write our password controller dot text and we'll press create and we'll write a comma here okay okay now when we click on save so everything is okay here now let me just go to my terminal we can close this thing because we have already generated our key now this is the application that we are running so i'll click on hot restart for this app or rather i will just restart the application again because we have also integrate we have also changed the minimum sdk version so for everything to work properly okay so it is showing me and no firebase app has no firebase app has been created why is this issue how you can solve this now for solving this issue what we can do is you need to go to your main.dart file let me go to my main dot dot file and here in our main dot dot file what we have to do is we will create here we can write a future void main and and async function and in this we will write widgets flutterbinding dot ensure initialize now we have to initialize our firebase so i like firebase firebase dot initialize app and this will be run app okay now you can click on save and we'll just quit our application once and we will run the app again so i'll just speed forward the video for you okay so we run our application and now here you can see we have our login screen this is email password and the login button so if i click on login button for now as these two fields are empty so it will display us please enter your email and password is required for login so let's say i write any account let's say i write me address gmail one two three so it will ask for a minimum of six characters so we can just change [Music] this because it is not this is a pretty lengthy text so we can write enter valid password and this will be minimum minimum 6 character so let me just save this thing and let me hot result application because here is my mail minimum 6 character okay and now let's say i just click on login that will display as there is no user record corresponding to this email now let me go to my firebase as we have added the login to our application but we don't have any user for now let's say i create a new user and let's say i write text edit gmail.com and the password will be one two three four five six so i'll add this user and now let me go to my application [Music] in here let's say i enter test added gmail.com and one two three four five six let's say enter this the password is invalid for the user so what are files firebase data was it detected that there is a user with this email but the password that we are entering is not correct so let's say i enter correct password one two three four five six so this will login to the app okay so our login is done now it's time to integrate registration for our application you can just close everything from here this is working now if i click on sign up and this is our registration screen now on the registration screen what we will be doing is we will be taking the data from user and saving that data in our cloud file store so that we can access that data in our home screen remember our home screen where we have to refresh the data from our database so for doing that we will be creating model we will have to create some user model which which would help us to integrate this thing so now let's say i'm here on my registration screen now we will go to this library and here we will create a new folder and we will write this as model and here we have to create our user model we will write user model dot dot so we have to start coding our user model what our user model would be it will be a class user model this will have some values like string of user id string of email string of our first name [Applause] and a string of our second name okay now let me show you before before coding this thing let me just show you one another thing you can see we have this firestore database you just wait for a while okay now what we have to do is we have to create database and we will start in production mode and click on enable so this will enable the cloud firestore for this project so just wait for a while okay so here we got our cloud file store created now what we'll be doing is we will be creating a collection which and we will write the name of this collection as user in this collection what we will have is we will have in document id let's say i have this user id and there will be some field like first field would be our email let's say enter email address gmail.com i am doing this just to show you the structure of this and here it would be next thing we have we need is and first name we like first name this would be name this will be rather first name and we will get second name we write second name and we all also getting this value user id so we'll write our user id also so now let us click on save so what i have firestore will do is for every user which is getting added to our authentication section let's say here you can see we have this user let me just open this thing here you can see we have this user and test address gmail.com and this generate this will automatically generate a user id for this so whenever we store some data in our cloud firestore this will create a new entry here with that user id and it will have all this value like email of that person first name second name and the user id and from where that values would be fetched these values would be fetched from our registration screen let's say enter first name so it will go to our cloud file store it will create a new registry it will create a new entry for that user id and in that user id it will have these value email first name second name and the user id alright we can fetch them later in our home screen now let me go to my visual studio code and here we have to create this model because this model will help us to send and pass data to our registration screen so how you can do that you will like user model so this would be this word user id and here it could be this dot email and here it would be this dot first name and the last thing would be this dot second name we'll close this up okay now we'll be taking from and now we'll be taking our data from the server so how so we have to create a map with that data like user model dot from map we create a new map and we will return user model with these value like first value would be user id [Applause] we will write map and we will write a user id then the second value we will need is an email so like map and then it will be emailed and the third would be a first name so it will like first name this will be our first name okay i'm just making an issue error here this will be first name and the last would be second name so i'd like second name this will have a new second name okay okay i have to write map here i'm writing this first name and second name here okay so these are the data that we will be taking from server that means we are going to access these data and now next thing we have to do is we have to send some data to our server sending data to our server now we will write map this will be of spring and dynamic type and here we will write true map okay and we will return some values like user id this will be user id then we will have our email this will be email then we will have our first name this will be first name and we will have our second name this will be second name okay now you can see we have our user model created with these value user id email first name second name and now so we can receive the data from our server and we can also send the data from our to our server but now let's but now let me just do one thing as now you can see we are sending and receiving our data to the data to the server we also need to add this rule to our cloud file store that we have to access the that we have to accept the data and also provide the data so you so here you just have to make one change let me show you here you have to just write this we will write here if request dot auth is not equal to null only then we will be allowing our user to publish something we can just save this let publish okay so this publish the changes for us here you can see we have our cloud firestore and now we have to go to a registration screen for creating the metrics to which from which we can register the data from which we can register the user to our database so here you can see let me also open up my device now in our registration screen what we have to do is first we will be also creating a first we will be creating a function as we did in login screen so here we will write here we will write void sign up this will be string email string password this will be an async function as we did earlier and here if form key dot current state dot validate you also need to add validation to our field so we'll be doing that in just a while so we will go to our fields and we have to provide some validation here as we did in our login screen so let me just see this is our first name now we want our first name to be of minimum three characters so how you can do that we can just go to our login screen and the same method that we implemented for password would be here would be called we will call that here also we'll just copy and we will paste it in this validator section okay now here you can see we have this so for accepting minimum character 3 we will change this value from 6 to 3 and if this is an empty then we will write first name [Applause] cannot be cannot be empty okay and if this expression matches this value then we will write enter valid name minimum three characters okay now we will can just copy this thing again and we'll paste this in our second name also you like second name cannot be empty and here enter valid name minimum three character we can remove this minimum value for for three character in this because many people have their second name with of this value of minimum character this and also we will return null if nothing found okay we got our first name done we got our second name done now it's the time for email field we can just copy this from our login button we'll just copy this and paste it here okay and for our password field we can just again copy we can again just copy this thing for our password we can just copy paste this here minimum 6 character now the main thing is we have to check this validation for our confirm password how you can do that we'll just go to our confirm password thing and here we have to do a validation and light validator for a value value let's say and here a password text editing controller password text editing controller why is it not showing password controller password editing controller dot text is text dot length is greater than greater than 6 and password here we will write if confirmed password text editing controller text would is greater than 6 and confirm and password text editing controller text is not equal to value then we will return we will return password don't match don't match lc will return null and now let me just save the application and here i will restart the app okay so we got our app restarted here we have our login section we go to a lot sign up let's say enter any name it's our gmail let's enter three character but we haven't added any on press to this thing how you can do that now we will save everything up and we will go to our sign up function and here if form key is and if the validation of form k is successful then we will wait for authentication we have to add this value also auth because we haven't defined it here so how you can do that we'll write final auth is equal to firebase or dot instance so this we have to call our firebase auth also okay now you can go to away.art we will write create with the email and password and here we will add email and password then we will write then value we will just post the then we will post these value to our firestore details to firestore we'll be creating this function just in just wait for a while we'll write this here and here we can do what we can do is we will write catch error and we will write an error name as e and this will become flutter toast dot show toast and here we can write message and message will be e dot message as we did in a login screen now we can just write you can just save this here you have to also import our flutter toast i guess yes we will import this package also it is showing us showing us an error for this so we'll be creating this function post details to file store and this will be an async function so just we'll just create this in a while okay now what we need to do is we'll be creating this function for creating this function what we'll be doing is we'll be calling our file store then calling our user model and then we'll be sending these values so first of all we'll be calling our file.we like file firebase file store and we will write firebase file store and here we will write firebase file store dot instance so we called our firebase and we will write user and then user and we will authenticate we will fetch the and we will write this as our current user and then we will write this as our current user now we will also call our user model class that we created that user model this would be user okay why is it not importing the package import library user model ok now we will be writing all the values how you can do that we will let user model dot email it would be user that we have our current user and we will write email then we will write user model dot uid then user id would be user dot uid okay now also let's say you write user model dot first name this will be our first name text editing controller why is it not showing first name controller anything okay and now the next thing is our last name second name rather we like second why is it not showing yeah second name editing controller dot text and what is the issue here okay so these are all the values that will be writing to our database now the final thing is our firebase firestore firebase file store this will go to our collection which we created this will create a collection user users rather and in that it will add this document it will go to this document id it will go to this document id where it will set these value and we will call our map file and we'll call our map which we created for sending the values to map okay here we will also display a flutter toast which will show us account created [Applause] successfully we can write this now we will push and remove until this will be context and here we will write up root as material page root and this will be context and here it will have will go to our home screen home screen you can go to there and write okay so we got our cloud firestair firestore also completed and now the final thing is we have to assign this function signup to our button we can go here in a signup button and here in on press we will be writing this function sign up and it will take two values so i will write uh email text editing controller it will be email email editing controller any what's the name okay even text editing controller then this would be password editing controller dot text so this is a registration screen now let's just hop now let's hot restart our application and see to see whether everything is working or not okay here you can see we have our login screen so let me just write any random random added gmail one two three this is working let's say right one two three four five six there is no user corresponding to this identifier so we'll be creating a new user with this so i will go random user random r thread gmail let's say gmail.com now let's say i write one two three here and i click on sign up so it is asking a minimum of six characters highlight one two three four five six let's say i write one two three and press sign up i guess this confirm password is causing us an error you can just give me a just give me a minute i will be fixing this thing okay so i fixed the error for you here in our confirm perfect what we did wrong was in this validator we will be taking the value of our confirmed password field in this variable value so we instead of writing this confine password editing control we have to write password editing controller and if our password editing controller will have a length of more than six and it will be dot text if this will have a length of more than 6 and also this will have if this value is not equal to our value of confirm password then we will display password do not match and we cannot continue for our registration so let me just uh save this and click on i'll click on save and here i will already start my application now we got our app hot restarted we will create a new user we will write a user second you use a second address hotmail let's say enter a password one two three four five six and here i enter a password one two three if i click on sign up then if i click on sign up this will display the password don't match so we'll write one two three four five six now if i click on sign up here you can see we got a route account created with uh we are also displayed with this toast library now let me just go to my firebase and here in our firebase you can see we are good we'll go to this authentication section and here we have created this user at to address hotmail.com and this is the user id for that user let me just copy the user id and here if i go to firestore database then what our firestore database did was it has create it has went to this section it has went to this collection users and here in collection let me just see this it is starting with y g o so is and this is the user that we just created and here we have this field user to add hotmail.com first name would be user second name would be second and this is the user id so this is everything that we wanted to do with our cloud firestore now the last and the final step is we want to take all these first name and the second name to our home screen let me just show you so we what we want is we want our file flutter command to do is it will take this uh name it will take this first name it will take the first name and second name and then it will show this us and it will show us here and also it will show us our email and our logout button so now let me just go to my visual studio code so our registration screen is done our login screen is done now we have to go to our home screen in our home screen we can what we can do is we'll just go to our home screen and here we will write user as we have implemented this earlier so i don't i will not be explaining all this again let instance dot current user we will fetch the current user and here let me just import this let me also okay so this got imported now we will also import our user model we will write user model this will be user model if you want for reference we can change this we will write logged in user okay we will also import this package so this got these two got imported well this got this parameter got set now what we can do is we will create an init state and here in our init state we can go with this firebase firestore dot instance and here we will go to our collection and take this user and then we write doc then we will go with this user dot uid and after getting the uid we will get all the values and we will store that all those values in our map the map that we created will write 10 values we'll write here value this will become like this logged in user in here in our this will be value and here we will write this dot login logged in user and this will go to our user model and we'll call our map that we created we'll place all this value in our map and write set state why is it showing me an error let me just check this will be like this this will be value okay now this will be set state that's all so we will initialize our firebase file store when our home screen is called the first thing that we'll be doing is we will initialize our file base file store in our home screen now we can go here and we will just go to our text section and here we have written these values now we can just open this and here we have written this value for a name and then email so i will write in place of name i will write logged what was the value logged in user it will be logged in user dot first name and then we will write the second name also it will login user dot second name and then okay first then we will doing then we will be coding for our file this will be logged in user dot email okay now we got the structure done and here in our action chip we and here we will create a new function we will write this function as features log out this will be a build context context async and here we will wait for fourth dot sign out and here what we can do is we will just we will go to our firebase auth dot instant and we will write sign out okay and after that we'll pass our navigator to our login screen push replacement and here it will be context push replacement this will be push replacement and here and here it will be material page root in our builder will be context and our page will be login screen now i'll click on import so that it can import this value and this is showing me an error because i missed pronounce the spelling okay now we'll go to this on press and here in onpress we will like log out context okay fine now let me just now we just save and now we will restart our application [Music] okay so here you can see we have our login screen now let's say i will login with that user which i created i will write user one either gmail.com one two three four five six okay there is no user with this record let me see what was the username user two it was user two at the rate hotmail.com and password was one two three four five six so now let me just change this to user to address hotmail.com and here i will go i will write a password was one two three four five six i'll click on login and this will login successfully and it will show us user second the second is hotmail.com and now if i click on logout i'll be also redirected to this login page again so this was everything for this firebase and flutter authentication with email and password thanks for watching do subscribe the channel and hit that bell notification for latest videos you

Channel: Backslash Flutter

Views: 63,988

Keywords: flutter and firebase auth, implementing cloud firestore & catching errors, flutter firebase google cloudstore, error handling in flutter, flutter firebase, email and password login/signup, flutter firebase tutorial, flutter firebase login, flutter login signup, login signup flutter, firebase and flutter authentication, flutter tutorial for beginners, flutter tutorial, backslash flutter tutorial, firebase flutter tutorial for beginners, firebase, flutter app, flutter firestore

Id: DthKmtjth1k

Length: 56min 6sec (3366 seconds)

Published: Thu Sep 09 2021