Email Verification

user registration with email verification introduction this section explains how you can create an app with user registration and email verification using parse server core features through back4app this is how it will look like at any time, you can access the complete ionic project built with this tutorial at our github repository prerequisites to complete this quickstart, you need visual studio code (or any web ide you like) ionic framework an app created at back4app follow the new parse app tutorial to learn how to create a parse app at back4app followed the user registration tutorial to learn how to implement sign up, login and log out with back4app 1 set up in this tutorial, we will be starting from where we left off in the previous user registration https //www back4app com/docs/ionic/ionic framework login screen one 2 enable email verification go to your app at back4app website https //www back4app com/ and click on server settings server settings find the “verification emails” block and click on settings settings the “verification emails” block looks like this 3\ click on verify user email verify user email it is right here 4\ fill in the empty fields and modify the ones that have already been filled based on your preferences 5\ click on the save save button 3 sign up the two fundamental attributes of parseuser parseuser class are username and password there’s a third special attribute that you should also set, i e the email to implement sign up with email verification, you will use the same method as the basic user registration but this time, instead of sending the user to the home page, you will ask him/her to verify his/her email to login once the user creation is completed, it is automatically added to parse dashboard dashboard and its emailverified boolean attribute is set as false at this point, the user should not be allowed to log into your platform once he/she verifies his/her e mail, by clicking on the link sent to his/her mailbox, the emailverified boolean will be automatically set to true , enabling him/her to access your platform entirely to make signupactivity signupactivity work, follow these steps add the issigningup issigningup and email email variables to login ts login ts to toggle and hold the e mail input login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; make the signup() signup() method send the e mail address to the parse user signup() user signup() function login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } now, let’s reflect those changes to the view login html login html by adding ngif ngif to show/hide html elements whenever the user is signing up ( issigningup is equal to true ) or signing in ( issigningup is equal to false ) login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 log in now, let’s add the emailverified boolean verification before sending the user to the home home page note although the user logs in when the function parse user login() parse user login() is called, he/she can’t access the app until the e mail verification is done also, because of a session object is created in the database when calling login(), it’s important to call parse user logout() parse user logout() every time a user who hasn’t verified his/her e mail tries to access the application in order to not leave sessions sessions opened now, let’s implement the emailverified verification to decide whether the user logs in or get an alert saying e mail must be verified login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 test your app test your app by running ionic serve ionic serve and creating a couple of users, also try logging in after registering without verifying the email to see if the error is actually displayed login at back4app website https //www back4app com/ find your app and click on dashboard dashboard > core core > browser browser > user user to see the users that you’ve created! it’s done! at this stage, you can login, register or logout of your app using email verification with parse server core features through back4app!