Verify Email in Firebase Flutter - Email Verification Flutter Firebase [2023]

welcome back to coding with t today we are going to learn how to perform email verification in the flutter using Firebase today's tutorial is going to very informative as we are going to cover bunch of other topics as well related to authentication okay as you know we are creating photo login application a quick application or a quick start for any application which requires login and sign up and we have already covered all the design portion and rest of the login portion but today we're going to perform the verification and in the next tutorial we're going to learn how to use node data inside local storage so let's get started so if you're new uh you can get the link from the description below of the whole playlist and also you can get the code from the codingwitty.com you can Again download the complete application so without wasting time let's get started let's open Android Studio our project which is the photo login application and you can see I have made some changes inside the menu Dot and I have added all the comments so just a quick recap how you can read the comments over here you can see it's written repeat and then in the brackets it's document bracket one so let's go to the readme file at the bottom you can find this repeat file and inside we are going to docs and this is the first one so if you want to read this line that what this line is doing then you can go to the readme file docs and one docs and one so this is the definition of this line and again if you want to get some updates so if I'm going to launch the update so in again in the readme in the update I will write number whatever the number of this update so you can get it over here so in the future whenever I am going to make changes you can always get the latest application from coding with t the whole project so you don't have to waste time or you have to spend time on the login but you have to focus on your on application so let's start with today's tutorial so let's head back to the authentication Repository so basically those who are new just a quick recap authentication repository is a simple glass using get text controller in which we are performing all the authentication you can see over here that we have created email and password authentication then using Federated identity which include Google Facebook phone number authentication using login and sign up and then again verify OTP and then at the end we have a logout so basically this class is handling all the things related to Firebase authentication and also along with that inside the own ready function this is handling the redirect initialize the Firebase user find the stream and whenever there is change in this user called the set initial screen so in the set initial screen basically currently we are doing users if users now we are redirecting user to the welcome screen and if user is not null then we are going to let the user to the dashboard so first of all we are going to create a function which is send email verification which is today's tutorial so let's get started just create a function and we are going to use authentication so this authentication is declared at the top so Firebase instance Firebase auth.instance authentication dot current user dot send email verification and that's it current user can be now so add a question mark over here and that's it this line is going to send the verification email to the user so current user is the user who is trying to sign up so first we will let the user to register authenticate if the user is authenticated then we will ask the user to verify its email right now let me wrap it to the try catch so I have added try catch Firebase auth exceptions are being cached over here so this is the custom exceptions we have created so if you want to throw custom messages so this is what you have to do okay as this is a cloud query so we should have to add a weight sign so this query can be executed properly now we have created our method we have to call this verification from the relevant screen now head back to features and authentication we have a folder new folder I've created which is a mail verification and this is a simple design which I am created for this mail verification and again in the controllers we have mail verification controllers so this is again a class which extends get x controller and on its on it where all it basically means that whenever this class is going to be initialized so this is the first function which automatically be executed and then we have three functions send verification email set timer for auto redirect and then we have going to check manually if the email verification status is completed or not so we have three functions over here so let's first implement the first one first one is simple we have to call authentication repository dot instance dot the function that we created send email verification and that's it again it's an async function so we have to add a weight sign over over it and make it async and return type in future so over here let me just again show you that we are throwing the message whatever of the message we receive we are again throwing that error so to show the error message we are going to again cache this error simply with a try catch and inside the cache we have created a helper class I will show you in a minute and Alpha class is going to give an error snack bar so this error snack bar receives title which is this one again all the strings are over here inside our constant structurings so this is the title and this message whatever received inside this e.2 string will be our message so let's cut it over here and paste it inside the price so that's it for the send verification so whenever we are going to call this send verification it is going to send the verification email to the user and stand notification is being called inside our on init method this means that whenever this main verification controller is initialized it will send the email so now where we are going to initialize it head back to the design part and over here when the build is ready we are going to call our controller so get output verification controller so when this is going to be created it is going to send verification email now let's test this run the application okay so our application is running head towards the sign up screen and in here let's add all the details so let's click on the sign up and also you can see the loader I have also added a loader effect okay here you can see instead of going to the mail verification you redirected towards the login because let's go to authentication and let's try to understand why it's happening because over here you can see we are saying Whenever there is change in this Firebase user now because the Firebase user has been created so there's a change in the Firebase user and inside the initial screen instead of going to any other screen is going to the dashboard so that's why when the user is logged in it has been redirected to this dashboard now over here we have two methods or the two ways to handle the first one is because we have this user if user is equal to null go to welcome screen no worries but in the amps this is the else part and as we're going to check if user Dot he even verified and a question mark means this if the user email is verified then go to dashboard if it's not very quiet we don't want to go to the dashboard but we want to go to our mail verification screen so this is the screen that I have just created over here you remember this controller so now when user is not verified it's going to redirect it towards this verification screen so Ctrl alt L to align the code much better now let's try to rerun this application again and now it should not come to the dashboard and over here you can see this is the design and user has been redirected to the verification screen and we should receive an email and email is over here at the top let's open it and we have a email link we are going to verify this user but if we press the verification button our application is not automatically redirected so email is verified let's close it let's open the application and you can see we are still over here on the email verification but if this is the case we are going to make a manual operation when the user is going to click on this continue button we will manually check that if email is verified redirect to the next tree or whatever the screen we want you know in the verification controller we successfully send the verification email but now we want to perform Auto redirect so if the verification email has been verified then screen should automatically be switched to some other screen right so for that we have this function and let me just copy and paste it next to the on init method so first it will send the verification email and second it should set the timer which will keep on check checking so to create that let's create rate timer variable and let's name a timer it's a private so to import it you should have a dart call an async package imported so once we have a timer inside our this function let's create 10 years equal to timer dot periodic so first one we have to add a duration I'm going to add duration for three seconds so after an interval of every three seconds it should check that if email is verified or not and then inside this function we're going to get the latest state of the user how are you going to get it we're going to use Firebase auth dot instance dot current user Dot reload so this reload is going to refresh the status of the current user now we can check for an user is equal to files auth dot current user so if user don't even verify it so if email is verified you have to add a sorry this sign this means that it's not going to be enough users not going to be done you can add a check over here that if user is not equal to now then you can draw this command otherwise you get right through some here okay if user dot email is verified we want to close this timer timer or cancel see this timer is over here so this is the function this is the variable we received so we want to cancel this time well not this one so we cancel the timer now the time is canceled email is verified we want to redirect the user to some other screen but over here we have a problem which I want to address otherwise you are going to get some errors the problem is that you can see we are reloading the state of the current user so whenever we are going to reload the state it's going to trigger our authentication repository function which is this function which has been detecting the change inside the Firebase user so whenever it is going to be reload it's going to again call this ever function and the saturation screen will be called it is going to again call the user user is again going to check that email is not verified and again send this verification email and on this verification email call it's going to refresh the screen and on the on it we will again receive another email and this is a loop this means that it is again and again refreshing the state and Firebase is going to block the service so to overcome this go to authentication repository and over here we are not going to use this ever function so this is a one scenario you can again you know the situation you can customize it however you want to customize so let's not make it private set initial screen on the first on the first load we are simply going to call set initial screen and inside this function we are going to pass Firebase user doc value which is again going to be a user received over here so it's only going to execute when the application launch for the first time and now we have to call the set screen where I will want to perform the redirection right so redirection is still over here so inside the login inside the sign up so for now for the verification controller let's go to verification controller reload will work as it is but now we have to call when the timer is canceled or communication costly dot instance dot set initial screen and we have to pass user inside it so we have the user which is the current user we have already received okay now let's try to rerun our application okay all the details are added let's click on sign up okay in here you can see it's loading but we forgot to add the redirect inside our sign up recall numbers manual we have to call this now we have to call this operation inside the login and sign up as well let's go to login controller and paste it over here so for the user we can again call so I have created authentication repository as an authentication and authentication Dot Login with email and password it's going to let the login and for the redirect again using this or same authentication you've got certain initial screen okay we are inside our signup controller and you can see some changes instead of calling everything on the design now I accepted it to the uh over here inside the design we're just calling controller dot create user and this function will be called here validating the home key if the validation is completed for the phone authentication you just have to call the phone authentication like this and again you have to manually call the certain initial screen and whatever here we received all the data and once the data is received using the instance we are currently creating create user so authentication dot create user pass email and password it is going to create the user and to score the user we have user repository we already learned in the previous tutorial user cost 3 will create the user which is going to store the data inside our file store and then at the end this is the line that we want to add set initial screen and it is going to redirect the user for us now let's try to rerun it again now we are inside our screen which is a verifier we should receive an email and it should automatically be redirected on the verification so let's open it click on to verify once verified let's close both right back and you can see after three seconds it the screen has automatically redirected to the dashboard so this is what we are going to achieve for the manual verification which is the last thing over here what we just want to do is we want to reload just copy this line paste it so this is going to reload the status and once the status has been Reloaded okay inside this manual check verification manually check we again have to reload the status of the current user and once it's reloaded we just want to check if email is verified then we want to set the initial screen which will be redirected to the dashboard again so where all these functions are being called in the design so this is the method which is the quantity method quantity button sorry continue button on it I am calling the manual check email verification and inside the next button which is to resend the email I am calling controller Dot send verification email and also at the end on the back to login button I am calling the logout status which will log out the user and redirect the application to the previous screen so to log out now we have to call the login screen also we can call the redirect method but we know when the user will be log out we should have two redirect related to the login or in our case to the welcome script so that's it for today's tutorial I hope you learned something new if you learn something new please like the video and if you're new this Channel Please Subscribe and thank you for watching take

Channel: Coding With T

Views: 18,254

Keywords: email verification flutter firebase, email verification flutter, email validation flutter, email authentication flutter, email verification in flutter, email verification in flutter firebase, email verification in firebase auth, firebase flutter email verification, flutter firebase email authentication, flutter firebase email link authentication, email link authentication firebase flutter, email link authentication firebase, email authentication firebase flutter, coding with tea

Id: xUwSYHXJ5XE

Length: 15min 38sec (938 seconds)

Published: Tue May 16 2023