Email & Password Authentication in Flutter using Firebase | Flutter | Firebase

foreign welcome back to a new video in the last part we had covered how you can connect your Android iOS and flutter web with your Firebase project in this video we are going to see the simplest way of authenticating your users that is email and password authentication right so I've already written the code to save your time you can get the link in the description and in this video I'm going to explain each and each and every line of this code right so first of all go on your Firebase project and you can see that web Android and iOS also are connected go inside the authentication if you have not clicked on get started click on it and go inside the sign in method and enable both the check marks of this email and password right you can see both the uh check marks are enabled and enable it now go inside the users here you are going to see your authenticated users now go inside your Firebase database we're also going to save the name and the email of the user so you need to get start with this also and in the rules you need to make the false as true you can see I have made it true so that anyone can uh like get access to this database who has this user ID who has access but this service or this security rules will be different if you are publishing this app on play store or app store right okay we are set from the Firebase site now go inside your main.dart you can see that in the main dot dot I am having uh this stream you can see in the home I have defined a stream Builder which is going to continuously continuously listen to my authentication state if the user is logged in then I'm going to show the home screen if the user is not logged in so you can see over here let me just decrease its size and remove it you can see so stream will be on Firebase or dot instant dot auth State changes so if the user is signed in then home screen if the user is not signed in then login form so let's go inside the home screen first here I just have a app bar with an action button as log out button which is going to log me out and just an app bar with a title of home now in the main dot dot next is a next thing that I am having is a login form so let's go inside the login form so in the login form what I've done is first of all I've defined four variables first is my form key that is going to validate and save my form and next is email password full name that are going to save the things that the user has written in the text fields and a Boolean value of login so if the user is logging in then I don't want to ask his full name but if the user is signing up then I can ask some more Fields like full name contact name phone number and all that things right so this is to get that data so if the user is logging in then login will be true if the user is signing up then this login will be false so initially I want to show the sign up form that's why login is false then in the scaffold I'm having a app bar and then I'm having a form let me just bring this in front of you and let me log out yes so you can see that first of all I'm having a form with the form key then a container with some padding a child column main access alignment Dot Center children so first of all if my login is true then I want to show a container but if the user is signing up then I want to show a full name text field right it is a text form field with a key to make it unique text form field decoration is there then validator is there so if the user has not written anything it is empty then I'm going to return please enter full name you can see if I just click on sign up you can see please enter a valid email please enter full name please enter password so these are basically my validators work right but if the user has satisfied this violated condition then I don't want to return anything that's a return null on save so if my form is getting saved if the form is validated after that my form will be saved so full name will take so set State full name will take the value that the user has written in the text form field right same way email is there key will be different decoration is there validator is there in my valuator I've also written if my value does not contain add the rate sign this means it is not a valid email right onset will take my email as my value password is there obscure text will be true so that it should show star marks you can see whatever I'm going to write it will show Stars validator if the password length is less than 6 that means it is not a valid password so I'm going to say please enter password of minimum length 6 as you can see over here right rest everything is same on Saved will take the password as a value right then a container with the elevated button is there which is my sign up sign up and sign in button so what it is doing is on pressed first of all it is going to check if my form is validated so if formkey dot current state DOT validate then it will save the form after validating the form it will save the form so you can see that currently it is not validated it is having a lot of errors this form right so this is not saved after that saving the form it will check if the user is logging in then I am going to call the sign in user function but if the user is signing up then I'm going to call the sign up function user sign up user function right now let's go to this function so this is a class or Services class and it is having two static functions sign up user and it is having sign in user so let's see them one by one let me just decrease it yes okay so in the sign up function I am taking a few parameters email password and the name and a build context right try catch block because some errors can occur that's why Try catch first of all I'm going to get a user credential so it is going to run a function an inbuilt function in the Firebase auth plugin Firebase or dot instant.create user with email and password pass the email and the password and you are going to get a user credential right then I'm going to update my display name and my email in the current users field right and then I'm going to call this save user function now what is the save user function let's go now what this save user function does is it it takes the parameter name email and user ID and it goes inside a collection called users in my firestore database and it goes inside the user ID and it sets the email and the name we don't save passwords right that's why you are not saving the password now getting back it will it will also show a snack bar message as registration is successful but if there is some error like weak password the user has provided or email already in use then it will handle it will be handled by this code block and if there is any other error it will be caught by this code block sign in user it does not take name it takes email and password it signs the user with email and password and it says in the snack bar you are logged in otherwise these errors will be caught now it is a time to test our code so let's just bring the emulator let me write the email and password if you have any doubt you can reach out to me on LinkedIn or Instagram and you can ask it Akshay nadan and let me enter my email gmail.com and let's write a password and click on sign up so it takes me to the home screen you can see and this is handled by my main.dart using my stream Builder it listened to my authentication stream so now I'm logged in that's why it showed me home page but when I was not logged in it is going to show me login form so let's go over here let me go on authentication and you can see my email is there my user ID is there now let's go inside our file store database and hoping to get okay we are not having our data so what's the error okay after adding the plugins I forgot to rerun the app so let me just rerun the app so our app is now again running so let me just log out log out of this app and let's click on sign up so let's hope this time there is no error okay we are added we are inside our home and let me just refresh my cloud firestore let's see what we get hoping to get the data yes in the user's collection we are having a user ID and we are having our email and the name over here I hope this video was clear if you want to get the code you can directly jump to the link uh in the description and the launch content keep coding keep innovating and thanks a lot

Channel: Akshit Madan

Views: 18,401

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: ZOX2yD5Z3LA

Length: 8min 10sec (490 seconds)

Published: Sat Sep 17 2022