Flutter Tutorial - Verify Email | Firebase Authentication 🔥 [2022] 4/4 Email And Password

how to add firebase email verification when a user signs up with this email and password in a flutter app then this user needs to verify his email first to get full access to the app so far we have created the signup page and if we click on the sign up button then we call the sign up method and inside of it we call then this create user with email and password method on our firebase auth package and inside of it we define an email and this is the email that we want to verify right now therefore inside of the main page we have created a stream builder and every time if we have created an account then we are going to our home page however this time we also want to verify our email and therefore we create a page in between inside this widget verify email page we create a boolean flag if the email is verified or not and by default it is not verified and within the build method depending on this flag if it is verified then we show a home page otherwise we will create another page instead next within the init state method we want to get the is email verified flag so we want to update it from our current user and therefore it is important that we have created before this user already because only on this user you can get this is email verified flag now that we have this flag if our email is already verified or not we can decide what we want to do if it is not verified then we want to send a verification email so let's also create this method inside of it we get again the current user and then we call on it the send email verification method so you always need to have a user to also use this method send email verification otherwise it is not working with firebase and flutter in case something goes wrong then we also want to catch it and show it inside of the snack bar within our ui let's also try it out we put the email and password inside and then we click on sign up and then it goes first of all to the verify email page and we also get an email within our email client and inside of it you have a link with which you can verify your email before we click on this link we want to check after we have sent the email verification the status if we have verified our email therefore we check every 3 seconds a method check email verified and we also want to put this timer inside of a variable within our state and also make sure that you dispose this timer in case it is not used anymore and now we want to create the message check email verified that is executed all three seconds and inside of this method we want to get then the status if our email is verified therefore we can get the current user and here we get the status if the email is verified and the important thing is that we need to reload the user every time before we call this is email verified because the status can change and therefore we want to get from the firebase the new status after the email verification and finally we check if the email is verified then we want to cancel our timer so that this code is not executed anymore and with this we check not anymore the email because it is already verified make sure to click on hot restart so that the init state method is called again and with this we have created this timer that is now right now in the background executing every three seconds and it checks if our email is verified now we can go back to the email client and because we have hot restarted the application we also get another email and inside of this email we click on this link the browser opens up and it says your email has been verified and once the email is verified it will automatically redirect to the home page and this is because inside this check email verified method the flag is email verified is updated to true after we have verified our email and with this we can go to our build method which is rebuilt and then we display the home page instead of the verify email page at the end we also want to improve this design of the verify email page therefore here inside of it we want to display first of all a text that a verification email has been sent to this email and secondly we also want to create a button so that the user has the possibility to click on this button to resend an email therefore if we click on this button then we want to call this message send verification email that we have created before if you like you can also check within your email button first of all if you can resend the email because you don't want to allow the user to always click multiple times on this button therefore we create within our state this boolean flag if we can resend it and finally after we have sent the email verification to the user then we want to set the flag can resent email to false with this the button that we have here on the right side will be deactivated and after 5 seconds we activate this button again and lastly below the resent email button we want to create another button that is a cancel button and if we click on this button then we want to call the firebaseos sign out method and with this if we click on this cancel button then we cancel the email verification process and go automatically back to the sign in page so to sum everything up first of all we are on the sign up page and when we click on the sign up button then a new user account is created and we go to the verify email page it is important to notice that the user is then already created within the firebase authentication tab under the user section but before the user can enter our app he needs to go to his email client and he needs to click on this link to verify his email also if he clicks for example on cancel and then he tries to sign in to this account that was already created then he will also go to the verification email page and the user gets an also a new verification email and the only way how he can enter the app is by clicking on this verification link and now once he has verified his email he will be signed in to our home page and of course once he has verified his email once and we sign out again and then if the user logs in again and he has already verified his email then he will automatically go to the home page and he doesn't have to verify his email again at the end i want to emphasize again that before the user has verified his email he is already created inside of this firebase authentication user tab and this is because you can only send the verification email if you have created before a user object however inside of your flutter app you can always access on this user the property email verified and then you can check if he gets more access or not so you can use this inside of your app and within the cloud firestore security rules you can give the user read and write access in case he has for example only his email verified [Music]

Channel: HeyFlutter․com

Views: 44,569

Keywords: email verification in flutter, firebase, firebase auth flutter, firebase authentication, firebase flutter, flutter, flutter authentication, flutter email auth, flutter email password auth, flutter email verification, flutter email verification firebase, flutter firebase auth, flutter firebase auth email password, flutter firebase auth tutorial, flutter firebase email verification, flutter firebase sign up, flutter sign up, flutter sign up firebase

Id: rTr8BUlUftg

Length: 7min 16sec (436 seconds)

Published: Mon Jan 10 2022