Email Verification in Firebase Flutter [2024] | Verify Email & Secure Your App! | Firebase Auth

welcome back to my YouTube channel previously we have implemented login and sign up with email and password using flutter and Firebase we also covered how we can keep our user loged in even after the app is being restarted this video is focused on email verification because Firebase won't automatically verify the email with which you create your user account so what we have to do we have to verify it manually because if you want to reset your password so a link is sent to your email but if it isn't verified and it is not a legitimate one so the email will be lost and won't be sent to that email so we need to verify the email for signing with Google or sign in with Facebook we won't need to do that because it is being verified by the Google and Facebook but for simple email and password authentication we need this email verification but before diving to that if you haven't subscribed my Channel please make sure to like share and subscribe my channel if you like my videos now uh for those who are newcomers to my channel and this is the first video for them so let me explain a bit of the logic that I have set up here uh let's go to the sign up screen first uh here we have these three text field and the sign up button whenever the sign up is taped this Handler is called uh in this Handler what we are doing we have created an OD service instance here and we have are calling this create user with email and password method that takes the email and password from these text fields and create a user for us and then we Navigator do popop which means that we move a screen back in order to uh move to this wrapper screen here in the wrapper screen I have used this stream which is the OD State changes whenever there's a change in the OD state so this will be triggered this Builder is called and here we check this value which is this uh user and if this user equals to null which mean the user is not logged in currently so we should see the login screen and when this uh data is not null which mean the user is logged in and we navigate to the home screen so with sign up we move a screen back so that to call this method and our UI updates if the user is logged in so he moves to the home screen and whenever we create a user so it is logged in by default so when I move back from the signup screen here it comes and the user is not null now and it goes to the home screen so that's a bit of the logic and here in the OD service we have implemented our uh Logic for uh user creation and login user here we will also add an other method for the uh email verification link I will uh create a method that returns future word and it will be send verification link or it will be send email verification link it will be an async method and here I'll put a TR catch Block in order to catch any error that may occur during the flow I will print it and I will use the e.2 string to print it to the console and here I will put my logic I'll use a wait and here I have have the Firebase Au instance created we can also get the current user that is logged in using this instance so which is with the property all do current user and with this we can use the send email verification and um we the current user can be null because if the user is logged out so it will be null so here we need to put this as well so that to make sure our user is logged in and and this is the logic for sending email verification link uh here we have the current user and we are directly sending the email verification by taking the email from this current user that is logged in that is the logic for sending email for verification and now uh let's implement this on the screens we have a verification screen here uh where we are showing a text that we have sent an email verification and we are we are providing a button if the email has not being received so that uh this uh button should be pressed in order to resend the email now uh here in the rapper whenever a new user uh signs up we need to check if the email is being verified so he should move to the home screen if not verified so he should verify it first uh so here we will add a check if the snapshot. DAT which is the user uh do has email verified equals to True which means email verification has been done so he should see the home screen which is here he should scre this home screen if verified here we need to add this as well because the user can be null if logged out and here if the email is not being verified so here we should see the verification screen to verify our email and the verification screen has been created here now let's trigger the logic from the email verification screen here whenever our this whenever the screen is built uh we need to send the email to the user so I will create an instance of O service here and uh whenever the screen is created this and it state is called once and I will use the OD instance to uh send email verification link and this link will be sent whenever we navigates to that screen but if the user has uh not received the link due to some problem so we will provide this recent email button and here when it is stabed we will also resend the email verification link but we have a problem here uh the link will be sent to the user and um the user will verify through the link but how will the app know that the email has been verified there is no automatic mechanism just like we have here in the rapper for logged in or logged out States uh it automatically triggers and the screen is updated the UI is updated according to the set change but for email verification we have to add something manually what we can do is that we can add a scheduler here that will reload the user data after every 5 seconds and fetches the newly uh Reloaded data and then we will check the email verified field if that is set to True which means email has been successfully verified so we'll be navigating back to this rapper screen uh actually there is a rapper screen on our navigation stack we will uh remove that and we will put uh a new we will push a new wrapper screen on that in order to execute this Builder manually and then with the newly data email verified will be set to true and so that to navig get to the home screen after email verification so that's all manual work because uh it is not supported by this uh a stream so now here let's create a timer I will create a late variable which will be a type timer and let's get a name of timer let's use the asnc and here uh when the email verification link is set I will use this timer uh to set a timer do periodic and I will set a duration that will be 5 seconds and here this is the call back function that will be executed after every 5 second because it is periodic and here I will put my logic so uh whenever 5 Seconds complete and it triggers uh what will happen that I will use the Firebase o do instance do Uh current user to get the current user and then I will use the reload to reload the user data and now I will fetch the user data again which will beot instance do current user and I will check for email verified flag uh let's wrap it in an if block here if and this will be a question mark here uh sorry let's put in exclamation here and here if it is equal to True which means that after reloading the data we found out that U our email has been verified so here what I will do I will use the Navigator dot push replacement to remove the previously added rapper screen and we use the material page route to navigate to the rapper screen again but this time the screen uh is a new one the previous has been removed I will use the wrapper screen here so we are doing everything manually and we are manually checking if email is been verified if verified go to rapper again in order to call this U Builder method manually so that's the logic for that uh and after our email has been verified and what we will do we also need to cancel this timer because uh if we don't cancel it it will uh execute this logic repeatedly so which will cause problem for us so I will cancel it here so verification complete cancel this timer we don't need it anymore and our UI won't be disturbed and other logic as well then we go to the rapper so when verified then we go to the rapper so this time the data fish here will contain it to true so we won't go to verification screen but home screen so let's try this logic now I will restart the app and here uh let's go to sign up here give some random name then here provide a legitimate email if you don't provide a legitimate no link will be sent then we will set a password and uh let's step on sign up let's see what happens and email has been sent let's see if I receive the email waiting for the email yes I have received an email here so let's open the email here I have been provided a link to verify my email I will tap on that link and let's see what happens it's loading your email has been verified let's see if the changes are reflected here after 5 Seconds yes we have done it we have created a user and then we have verified the email that a user provided and after the verification process we have logged the user in that was the topic and the implementation for today's video in the next video I will be covering forgot password functionality and this step is crucial for that because if you enter wrong uh email then forgot password won't work so uh it is kind of uh adding the legitimacy of user and his uh identity I would also add a note that uh here if you can see in the verification screen I have used the Firebase instance instead of creating one here at the top I have used uh these uh instances two times uh it is because that there's a bug in this uh reload function if you use it with the same instance like if you create here one instance and you use it for both uh the both the use cases for email verified flag and the reload so you won't have the updated data here if you use the same instance that's why I have created an instance here and and other instance here so this is a bug in the Firebase functionality so that is a tip and that's it for today video see you in the next video goodbye

Channel: CodeWorm

Views: 2,293

Keywords: email verification, flutter tutorial, App security, Verify email in firebase flutter, firebaseflutter, Verify email in flutter, firebase authentication, flutter, firebase, Email Verification in firebase flutter

Id: mnE9HHtxdGg

Length: 12min 53sec (773 seconds)

Published: Tue Apr 23 2024