The Essential Guide to Flutter Email Verification with Firebase

welcome back to coding with t today we're going to learn how to perform email verification in flutter first of all let's quickly have a look what we are going to create let's run the application and we are inside our login screen and when we going to click on this create account button in here let me add all the details okay so I've added all the details make sure that agree privacy policy is checked click on create account and it's processing the information and you can see we have the account created and also the popup for email send so you can see the first close button at the top the cross button and also you can see email arrived the first cross button is going to let the user log out from the screen because currently when the user click on the register button we first let the user authenticate it now in here because user is already authenticated so using this cross button we first have to make sure that user is logged out and then we will redirect that user to the login screen on this cost and after that when user again try to log in he will be redirected back to this screen and also this continue button is going to manually check that either the user has been authenticated or not and also using this recent button we will be able to resend the email again so first before verifying the user let me close this application rerun this again and this time we should be redirected to the verify screen as you can see and again we have a popup which is the new email has been sent and you can see a new email also has been arrived over here so we have two emails so I'm going to click on the first one click on this link over here and it is going to verify the user you can see once user is verified we have to create a timer which should automatically redirect the user to the next screen when we are going to open it you can see the user automatically redirected to the next screen and we don't have to do anything manually so let's get started with today's tutorial creating flutter e-commerce application and we are in the section 4 and in this section we are going to perform the email verification and in the previous tutorial we learn how to store the data so these two tutorials are interl not dependent on each other if you don't want to follow it the previous tutorial that's up to you so today exactly we will be able to learn how to verify the users so let's head towards overview of this tutorial so first point we are going to create email verification controller in which we are going to handle all the activities related to the email verifications cross button resend email create a timer automatically send the email all the things will be in the verification controller next for filling up the controller values we have to create a function in the authentication repository that will be working to send the email every time when we are going to trigger that function it will send the email to the specific user which we want and definitely in the previous tutorial I was talking about the exception handling so this is what we're going to also talk about in today's tutorial then in the verification controller first we have to set the timer and also we have to make sure that automatically email should be sent set the timer add the manual verification function which will manually verify the email status of that user and also when application is going to be triggered first time on the app launch we are going to check in the authentication repository that if user is verified let the user to the login screen we're going to basically deals with the user state in authentication repository if user email is not verified we will open the email verification screen if user is not logged in we will open the login screen and also at the end when us going to click on that cross button we will head towards the log out function so let's get started with today's tutorial open Android Studio okay we are inside the signup controller so this was the function we created in the previous tutorial using this sign up we first have to check start the loading then check the internet connection after that we are validating the form checking the privacy policy and over here I was triggering the authentication repository to register the user in the authentication so if user is authenticated we simply pass the U ID and create a new user using the user repository inside the fir store stop the loading show a success message and over here here we were redirecting towards the verify email screen so let's start it with the verify email screen this is the design we created in the section two you can get the complete code link is in the description and also you can watch the previous videos of this playlist or related to one specific section already link is given in the description so in this design now what we want to do is we want to make sure that whenever this screen opens the screen should trigger an event which is going to send the email verification so to do that first of all because in the previous St we talked about in detail that why we are going to use separate controllers separate views so this is the design we are not going to do anything over here for the design so for that when you go to the features in the authentication feature and in the controller in the sign up I have created a new empty controller which is verify Emil inside this class when it extends with the gex controller and it has a simple getter method which has a name instance and it is going to perform the get do findind operation for the email controller we actually don't need it but for the best practices I usually have to write this line over here so don't worry about this okay next you can see the comments the first thing whenever this class will be called this on init method will be triggered and using this on init method we going to send the email and also we going to set the timer so that auto redirect can happen we will send email verification link over here add a function which has a timer and then a another function or another method to manually check the email status before that in the Authentication repository over here you can see inside this controller we going to create the email verification it is a simple function and email verification because it is going to deal with the cloud query so we have to make sure that it should be the async function so that we can wait until this operation completed then inside the tri catch we are going to use a simple query using the authentication the variable we created at the top using Firebase off. instance you can directly copy this and instead of this variable you can paste it Firebase off. instance. current user current user will automatically be fetched because in the previous tutorial using this method register with email and password we make sure that we create a user with email and password because we have currently logged in user not logged in but authenticated user so that authenticated user will be automatically retrieved using Firebase off. instance and that email will be sent using a function which is send email verification so you just have to call Firebase off. instance. print user and and send email verification make sure that user is already authenticated okay now let's first talk about these exceptions that I previously created over here and I didn't talked about so the first one is own Firebase Au exception it is going to catch exceptions related to Firebase authentication then we have Firebase Firebase exceptions format exception and platform exception and then otherwise at then we have a default exception that is going to catch anything that will be not catched at the top so first of all we catching Firebase authentication exception the reason to catch these exceptions separately is to make sure that user can see a relevant message but not a technical message let's say we are exposing our application by displaying some technical message that will be definitely an bad approach but we also want to make sure that user should know what's happening when he is going to do something wrong that should not be done so first of all Firebase Au exception is going to catch the exception and it has some codes so when you head towards the class which I have created over here in the utility in the exceptions folder I have created these four to five and default exception classes the first one is a simple class Firebase o exception just added e to make it custom class it implements the exception and it has a single variable to receive the code I was talking about because Firebase Au exception do have a code when you head toward here you can see using this e which is catching the exception so e do code is going to catch that exception and pass it over here inside this controller so code will be retrieved over here and then we have a getter method so using do message we can call this getter method what it is doing it is going to receive the code and it has multiple cases you can get all these cases from the Firebase documentation as well so I've added some over here if email in already used we going to display the email address is already registered please use a different email so this is a custom message then we have invalid email again a custom message weak password user disabled user not found wrong password and list is keep on going you can again get all this code from the link Down Below in the description okay same way when you head towards Firebase exception we have the unknown exception invalid custom token user disabled user not found some are you know copied from the Firebase authentication and some we have keychain error internal error and bunch of other options for the Firebase exception then we have format exception and at the bottom we have the platform exception so you can only create one single exception add all the cases and by default at the end when you head towards this the default error if not a single case matches default exception will be thrown which is an unexpected fire base error occurred please try again so let's close this head over here and by this way we can catch the custom exceptions and no technical message will be delivered to the user and also rest ass show you can ALS log everything over here print exceptions and you can see we are throwing everything so to catch it we have to again create a catch from where we are calling this function so let's head towards the verify email controller and in here inside this on init method we are going to create send email verification and in here to create this function send email verification we first have to make sure that we using the tri catch and we going to catch that specific exception that might occur and using simple T loader class or any popup you can display that specific error I am using a custom class which is going to display error using get. snack bar it has a different background color and text color warning has a different coloring and also success has a different coloring but these all three functions you can see they are static and they're using snack bar get. snack bar so we can send the title we can send the message and then inside this try we are going to make sure that we have to wait until this operation performs so use thewait sign and you make the function async and then use authentication repository do instance. send email verification and that's it this is going to send the email verification and if you can see whenever this class instance will be created it is going to send this verification and if you want to make sure that success message also delivered to the user you can use the same one over here instead of error snack bar you can display the success snackbar change the title and message and that's it now we want to trigger this and how we can trigger it simply head towards the verify email screen and in here when we are going to call the verify email screen in the build method we want to all the instance or create the instance of verify email controller we'll use the get.put to create a new instance because get.put will be called when we want to create instance for the first time and get. findind will be called every time that once the instance is created so get. findind is not going to trigger the on init method so we're going to use get.put verify email screen and that's it add a constant and one more thing we are displaying static email over here so we want to make sure that whatever email entered by the user should be passed to this screen so that we can display it I've created a string over here a nullable string and call it in the Constructor just copy this one and replace the manual email and if this email is null we can simply display single codes and inside the sign up where we are calling this ver screen we have to call and pass the email that we already received email. text. Crim remove this constant and now whenever we going to call this it is going to pass the email over here and that email will be displayed in the design and also this verify email screen is going to create the new instance sorry not the email screen verify email controller and it is going to remove the constant it is going to open this controller and that controller is going to trigger the onedit method me and it is going to send the email verification and we will send that using this function next to set the automatic timer again we want to trigger that timer or activate the timer in the on init method set timer for auto redirect and also create a function for the same name set timer for auto redirect and for that we have to use timer do periodic method so timer when you hover over this timer is the dot async and at the top you have to import the dot Asing to use this timer so it has two parameters when you H over this periodic method first one is duration and second one is a function which has a timer itself close this one for the duration this duration means that after how many minute seconds you want to recheck re-execute that specific function so use the duration and I'm going to call seconds one so after every first second it should re-trigger the function over here which is this one now inser this function we have to check check using a Firebase authentication we want to check that if current user is authenticated or not so for that again we are going to use fireb Au over here fire Au do instance do once again use the current user current user can be nullable so add a question mark because we know that user is not null Dot reload so after every 1 second it is going to reload the state of the current user and we have to make sure that we should make it a wait and make this timer function to Asing function Control Alt L to better see the state okay once we reload the state of the current user after every 1 second you can increase or decrease the time as you like I want to now check Final user is equal to again use Firebase off. instance. parent user and inside this user you can see we have if user. email verified again this user can be null so we have to add question mark if email verified then we want to close the timer and redirect user to success screen because this email verified can also be null so using the double question mark means that if email verified is null we want to return the false if user email it verified only in that case this will be true and it will execute this if statement so the first thing we want to cancel this timer that we started at the top so whenever this email verified is false this timer will keep on running again and again so once email verified is two we want to close this timer and we want to redirect to the next screen using get. off methods so that this previous email verification screen should be destroyed so using get off we are going to move to New screen we have already created a success screen we can pass our own image title subtitle and onpress event okay I've added images title subtitle and onpress and for the image you can see I passed the animation which is the Json animation or the loty animation which has a Json files and in the success screen the first one is the lot image then we have title subtitle and button and passing the on press over here when you head over head back to the success screen you can see we are displaying the image title subtitle and on press event is going to trigger the authentication repository. instance. screen redirect so this screen redirect is going to decide that either user should see the login screen let the user pass to the home screen or keep the user on the verify email screen so we have to perform some changes in the screen redir so that we can also check the Firebase user as well because previously in the onboarding we are only checking that and you see this we are only checking that if user is a first time user then we are letting the user to the onboarding screen otherwise we will let the user to login screen so before going that we have to complete this manually check if email verified so again I'm using the same approach Firebase o. instance. current user we don't have to reload this on checking email verification so just call the current user get the current user if current user is not n and current user is email verified we again want to use the success screen using get. off and redirect user to the success screen so using get. off call the success screen and pass all these images again we calling the redirect over here so before going to authentication screen and set up the redirect let's call these functions from the design so head towards the verify email in here for the first button where we are manually calling the sucess screen we are going to remove this and we're going to use the controller controller instance for the verify email controller and call check email verification status manually if it will be verified continue will automatically lead the user to the success screen and after that user will be able to login then for the second one which is going to resend the email and in this we are again going to use using frat Arrow call controller. send email verification this is again going to trigger this function and it is going to send another email to the user and at the top you can see we will manually redirect the user to the login screen previously when the cross button will be tapped cross icon button so over here we want to call authentication repository do instance. log out the user because we don't have currently log out so we're going to create it so first let's head towards the authentication repository and let me walk you through to the main dot in the main do first of all the first thing that is going to be created is the Firebase initialization once the Firebase is initialized we going to using then calling our authentication repos repository so this authentication repository is a simple class or any class I'm calling this repository so don't confuse it with that specific word click on this this class will be triggered and it's override the method on ready will be triggered whenever this class will be executed for the first time that will be executed whenever the application launch so this on ready was previously removing the splash screen and calling the redirect screen redirect method this screen redirect method was simply checking that if using the storage local storage share preferences it was checking that either let the user to the login screen sorry the onboarding screen and if it is not the first time of the user let the user to the login screen but now because we have authentication as well so we have to add one more check that if the Firebase user is authenticated so we have to need a user type so you see this user is a type of Firebase it is coming from the Firebase authentication package package so if this user which can be nullable this user if this user is not null we are going to redir this means that user is authenticated we want to redirect user to see the main dashboard of the application but we also have to check that if user is authenticated but either user email is verified or not so for that we going to use if user not is equal to null if user is not null we want to check again if user. email verified if user is verified using get. offall remove all the previous screens and head towards the navigation menu so navigation menu was the bottom navigation menu which is going to open by default the home screen over here if user email is verified user is not null we will let the user to see the navigation menu else if user email is not verified inside this if if it is not the case user email is not verified we have to call the verify email screen imported and as an email because we want to display the user email in the design for that you have to call authentication do current user. email because current user can be null so we have to add a question mark over here so this email will be passed to the verify email screen now we cover two scenarios if email is verified head towards the home if it is not head towards the email verification and whatever if user is null so we have to call else over here if user is null we have to Simply cut everything from here and paste it inside using the local storage we're going to check that if is first time if it is null add a True Value if user is a first time user head towards the onboarding if it is not the first time head towards the login screen if you're not using the local storage check you just have to call using this get. offall and call the login screen so if user is not null only the login screen will be appeared now as we are receiving the user over here so we have to pass the user in this let's call authentication do current user and same way when we are calling Firebase authentication instance. screen redirect on the success screen so whenever user is going to press the continue button inside this success screen we have to pass one argument which is user so to pass the user to the screen redirect instead of creating it over here let's cut it and instead of passing user again and again from all these functions because we have the user State inside the authentication repository so let's remove this we can simply get the user from authentication current user whenever this screen rir will be called it is going to check everything and redirect user accordingly now the next thing inside you can see verify email we have to call the log out function head towards authentication repository and over here you can see we have logout user so create a function a simple log out function which will be async again to make sure that until this command executed it should wait and using Firebase o. instance. signout is going to be called to sign out the user from authentication and using get out off all we will be redirected back to the login screen and again I'm using the All Authentication and over here you can see the error is gone now let's run the application okay so I have reinstalled my application so you can see the onboarding screen so when we are going to click on this next button it is going to store the user straight in the local storage that user first time appeared and now next time onwards do not let the users view the onboarding screen so let's click on this we have redirected to the login screen and in here let's create a new account so I added all the details you can see the password which is coding with the at theate one so we are using all the characters that are required make sure it's checked click on create account it's processing the information and we should receive the email you can see we redirected and the second popup we received let's wait for the email and you can see email arrived this before clicking on that verify email link let's first test the redirect method so let's close this application rerun this app again after splash screen we should be seeing the verification screen again and and you can see verify email address received and also automatically email sent let's wait for this email let's click on it click on this link to verify and you can see email has been verified now we should automatically redirect to the next screen so let's click on this and you can see automatic redirect also working and when you're going to click on this continue we should be redirected back to the home screen The Reason by redirecting to home screen is that when we going to click on this you can see in the verify Emil controller we have to check that we redirected to this success screen and when this on press will be triggered it is going to call the screen redirect method and in the screen redirect if user is not null which is not null and user is also verified we want to redirect user to the home screen so let's click on this continue and you can see we have the home screen right in front of us now every time when we are going to close this and rerun it again because user is verified this time we should see the home screen and you can see the home screen is right there so that's it for today's tutorial I hope you learned something new if you learn something new please like the video and you can also download the complete code link is in the description if you have any question you can ask me down below in the comments and once again thank you for watching take care Allah

Channel: Coding With T

Views: 8,318

Keywords: flutter email verification firebase, flutter email validation, firebase email verification, firebase email authentication, email verification in flutter, email verification flutter firebase, email verification in flutter firebase, firebase flutter email verification, flutter firebase auth email verification, flutter firebase email authentication, flutter email verification, flutter email verification getx, timer.periodic flutter, flutter timer periodic, coding with t

Id: Lvy75rlDaxg

Length: 24min 16sec (1456 seconds)

Published: Wed Nov 29 2023