Ultimate Firebase Authentication Tutorial with Flutter | SignIn and SignUp with Firebase

hello guys it is Shivam here in this video I will explain you how to integrate the email authentication implorter app by using Firebase as you can see I have just finished creating the entire UI for the login and signup page now we are going to add authentication using the power of Firebase so let's move to the Firebase and give your project name here so I'm writing auth app here now click on continue again on continue now give your default account for Firebase create project so as you can see Firebase is creating a project so wait for a few seconds so our project is ready now we need to add IOS app first so click on iOS now as you can see we need Apple bundle ID so we'll move to the xcode and copy the blender identifier from there and paste it here foreign click on Runner now signing and capabilities copy the bundle identifier from here and paste it here now click on register app now download the Google service Dash input.plist file and paste it on xcode and make sure it should be Google service Dash input.plist file if anything is written rather than this then make sure you edit them as you can see on the screen now paste the file below the info now click on finish so it is done now click on next again on next again on next now continue to the console so as you can see we have successfully added the IOS app to the Firebase now let's move to the authentication because we need to enable email or password section to get the authentication from our flutter app through Firebase so as you can see we have successfully enabled the email or password section now let's move to the perv Dev and we need to add some dependencies in our clutter app so let's write clutter so let's write Firebase code here and we need to copy this package and paste it on perspect ML file now let's move to the Firebase auth we need this package to get the authentication in our flutter app and we can connect it to a Firebase so click on that and copy the package from here and paste it on perspect ML file now use command s to run the package in our clutter app so let's move to the Pod file and we need to update the version of the iOS so I am making it to 13. now let's move to the main.dot file as we need to add the two lines of code here let's move to the sign up dot dot file and add the some lines of code to access the email authentication through the app now we will need three strings namely email password and name so we can get the data and we can save it here also we will use Touch editing controller so that we can get the data through the controller what user is typing on this text field so I will create three controller for name email and password so text editing controller name controller is equals to new text already controller so it is done now I will create the function namely registration that will executed when the user will press on sign up button so let me add the few lines of code here then I will explain you after writing the complete code [Music] thank you [Music] foreign [Music] [Music] [Music] thank you [Music] [Music] foreign [Music] foreign [Music] [Music] [Music] so if password is not equals to null I will make the user to create the ID using email and password so I have created the function name create user with email and password after creating the password I will show that the user has registered successfully so I am using the snack bar here now if the user uses the weak password then I will check that through e dot code function and so that through snack bar where it will so password provided is too weak and if the email is already in used then we'll show that account already exists now we will create the global key this will help us to gain control over the form State and can perform the validation submission Etc now wrap up the column widget with the form widget and give the key here now we need to give the controller and validation to each text field and we'll check that with the global key if the user has wrote All the Things correctly in this text field in-text form field I will give controller is equals to name controller and will give a validator here and will check the value is equals equals to null or it is empty if it is empty or null then will return please enter the name and if it is not then we'll return null and we'll use this same case in all other two text field so it is done now let's move to the gesture detector and we need to add the function for sign up button now in if condition I will write formkey dot current state DOT validate because as I told we will check the each test field with the help of global key and save each information in each string so I am writing email is equals to mail controller.txt to get the text from the mail controller now same for the name and password now at last we will call the registration function so we can register and sign up the user into the app the reason for using the search state is here because we need to update the email name and password string so I am writing the search state here to update the email name and password string so it is done now let's move to the terminal and call the flutter run command just wait for a few seconds so we have successfully launched our app now check the sign up page so I'm writing the name here Shivam Gupta and give your mail and same for password now click on sign up button wait for a few seconds you can see we have registered successfully and we move to the home page now let's move to the login.dart file and we need to add two strings namely email and password to get the information what the user have entered on the text field also we will use text editing controller so that we can get the data through the controller what user is typing on this text field so we will need two text editing controller here namely for email and password now we will write user login function so that we can add the function in the login button and can make the user to login into our app [Music] [Music] thank you [Music] thank you [Music] [Music] [Music] foreign [Music] foreign [Music] function [Music] now we will create a same Global key as we had wrote on the sign up page now we will wrap up the column widget with the form widget and give the key here we will do all those things similar what we have done on the sign up page now we will add the controller and validator to each text form field to validate what the user has entered in those text field as I said in validator we'll check a value if the value is null or empty then we will return that please enter your email and if it is not then we will return null here now let's move to the juxt editor and add the few lines of code for login button just like a sign up page we will write the same condition in if so I will write formkey dot current state DOT value date because as I told we will check the each text field with the help of global key and save the information in each string and we will use a set State here to update the email and password string now we will call user login function to make the user login into our app so it is done now will perform hot restart one thing I want to tell you that to perform hot restart we will use a capital R and for hot reload we will use small r so just press capital r and you can perform the hot restart here so let's move to the sign up page and I will create the ID here then we will use the same ID to get to login in into our app so I am writing the name and email here now password and click on the sign up button wait for a few seconds so as you can see we have registered successfully now I will use the same ID to login into the our app I will write the same email here so I'll use I use 345 at the gmail.com now same password and click on login button wait for a few seconds so as you can see we have successfully login into our app and directly come to the home page so it is done now let's move to the forgot password.dart file as we will use this case when the user enter their email and they forget their password now they will click on forgot password text and move to the forgot password screen now again we need to add the few lines of code here now we'll create the string name email and we'll create a reset password function here [Music] [Music] [Music] [Music] thank you [Music] so it is done now we'll create the global key just like save for login and sign up page now wrap up the column widget with a form widget and write the key here I think so I have forget to mention the text editing controller so let's move and mention the text editing controller here so write text editing controller mail controller is equals to new text editing controller now mention this controller on the text form field and use the same validator just like other cases in the login and sign up page so we'll check the value if it is null or empty if it is null or empty we'll tell the user to enter the email if it is not then we'll pass null so let's move to the gesture detector and add the few lines of code to execute the send email button let me explain you the process after writing the email when user clicks on the send email button then one link will go on to their email ID regarding Firebase after clicking the link they will redirect to add new password after adding the new password they can come to the login section of the app and can use the same email ID and the new password to login into the app in if case I am writing the same condition that I have used to root in sign up and login page use a hot restart function move to the login section just for example I have forgot this email ID password so I will click on the forgot password text and move to the forgot password screen now I will enter the same email here now click on the send email just wait for a few seconds as you can see password reset email has been sent so check your email so as you can see here there is a Firebase link now click on this link now enter a new password Here click on save button so as you can see you can now signing with your new password if you found value in this video I would really appreciate it if you could hit that like button and subscribe to stay updated with my future videos

Channel: Shivam Gupta

Views: 3,788

Keywords: flutter firebase tutorial, flutter firebase authentication, flutter firebase auth, flutter firebase, firebase authentication, flutter firebase authentication - email and password, flutter with firebase, firebase, flutter tutorial, flutter firebase authentication tutorial, flutter firebase auth tutorial, flutter firebase crud, firebase auth flutter, flutter firebase auth email password, flutter login and signup with firebase, flutter tutorial for beginners

Id: 8QOuXFKkf3c

Length: 23min 47sec (1427 seconds)

Published: Tue Aug 08 2023