Email Verification

user email verification for react native introduction having a mobile app with unrestricted user registration can cause security issues and spam in your application server email verification can help you prevent this situation, requiring that any registered user on your app will have a valid email address in this guide, you will learn how to set up email verification in your back4app back4app server, which will automatically handle this verification you will also learn how to make sure in your application that the user is indeed verified at any time, you can access the complete android project built with this tutorial at our github repositories https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java goal to build a user login feature using apple sign in on parse for a react native app prerequisites to complete this tutorial, you will need a react native app created and https //www back4app com/docs/react native/parse sdk/react native sdk complete the previous guides so you can have a better understanding of https //www back4app com/docs/react native/parse sdk/working with users/react native login 1 configure email verification you will now configure your parse server on back4app to require user email verification open your https //dashboard back4app com/apps and navigate to your server settings control panel find the verification emails verification emails feature and click on settings settings go ahead and check the verify user emails verify user emails and prevent login if email is not verified prevent login if email is not verified checkboxes feel free to update and customize any settings in this screen, like the verification email message body and reply to address after setting this up, your parse parse server instance will now handle user email verification automatically note activating prevent login if email is not verified prevent login if email is not verified is not required, but it is good practice to require your new users to verify before performing any action in your app 2 update your userregistration component you need to make some changes in your userregistration userregistration component to correctly sign up users with email verification first, add a new input field for your user’s email value update the user registration function in the userregistration js userregistration js ( userregistration tsx userregistration tsx if you are using typescript) file so now you are setting the email attribute on user data userregistration js 1 const dousersignup = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 const emailvalue = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; userregistration tsx 1 const dousersignup = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 const emailvalue string = email; 6 // since the signup method returns a promise, we need to call it using await 7 // note that now you are setting the user email value as well 8 return await parse user signup(usernamevalue, passwordvalue, { 9 email emailvalue, 10 }) 11 then(async (createduser parse user) => { 12 // parse user signup returns the already created parseuser object if successful 13 alert alert( 14 'success!', 15 `user ${createduser get( 16 'username', 17 )} was successfully created! verify your email to login`, 18 ); 19 // since email verification is now required, make sure to log out 20 // the new user, so any session created is cleared and the user can 21 // safely log in again after verifying 22 await parse user logout(); 23 // go back to the login page 24 navigation dispatch(stackactions poptotop()); 25 return true; 26 }) 27 catch((error object) => { 28 // signup can fail if any parameter is blank or failed an uniqueness check on the server 29 alert alert('error!', error message); 30 return false; 31 }); 32 }; note that since your user is not supposed to login without verifying his email, you need to log him out after registration to avoid any errors in the current application session session test your application and now you should see a message like this after registering a new user after successfully registering your new user, parse will send an email containing a verification link, looking like this 3 set up your userlogin component your parse parse server is now blocking automatically login attempts that are not from verified users however, it’s also a good practice to make sure that there is no way for your unverified user to access your application, so let’s add a new condition inside your userlogin userlogin component in the userlogin js userlogin js ( userlogin tsx userlogin tsx if you are using typescript) file userlogin js 1 const douserlogin = async function () { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue = username; 4 const passwordvalue = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; userregistration tsx 1 const douserlogin = async function () promise\<boolean> { 2 // note that these values come from state variables that we've declared before 3 const usernamevalue string = username; 4 const passwordvalue string = password; 5 return await parse user login(usernamevalue, passwordvalue) 6 then(async (loggedinuser parse user) => { 7 // login will throw an error if the user is not verified yet, 8 // but it's safer to check again after login 9 if (loggedinuser get('emailverified') === true) { 10 alert alert( 11 'success!', 12 `user ${loggedinuser get('username')} has successfully signed in!`, 13 ); 14 // verify this is in fact the current user 15 const currentuser parse user = await parse user currentasync(); 16 console log(loggedinuser === currentuser); 17 // navigation navigate takes the user to the home screen 18 navigation navigate('home'); 19 return true; 20 } else { 21 await parse user logout(); 22 return false; 23 } 24 }) 25 catch((error object) => { 26 // error can be caused by wrong parameters or lack of internet connection 27 // a non verified user will also cause an error 28 alert alert('error!', error message); 29 return false; 30 }); 31 }; 4 test the email verification go ahead and test your application, trying to log in using the unauthorized user created before if you didn’t click the verification link on the email, you should get an error message like this after clicking on the verification link, you will be able to log in and be redirected to your home screen you can also verify your user by opening your users users table inside your back4app dashboard and editing the emailverified emailverified column manually conclusion at the end of this guide, you learned how to set up your parse parse server to require user email verification and also to enforce this restriction inside your react native application in the next guide, we will show you how to perform useful user queries