Email verification

19 min

how to implement user registration with email verification introduction in this guide, you will learn how to set up a user email verification process to a user registration feature (sign up) you will create an app that includes user registration with email verification using parse server core features https //www back4app com/product/parse server through back4app this tutorial uses a basic app created in android studio 4 1 1 with \buildtoolsversion=30 0 3\ , \compile sdk version = 30\ and \targetsdkversion 30\ at any time, you can access the complete project via our github repositories kotlin example repository https //github com/templates back4app/android email verification kt java example repository https //github com/templates back4app/android email verification java goal setup a user verification email process on back4app on a user sign up feature prerequisites to complete this tutorial, you need android studio https //developer android com/studio/index html an android app created and connected to back4app https //www back4app com/docs/android/parse android sdk a device (or virtual device https //developer android com/studio/run/managing avds html ) running android 4 1 (jelly bean) or newer 1 import library in this step we will import the libraries which we are gonna use in our project add the following parse classes to our activities 1 import com parse parse; 2 import com parse parseexception; 3 import com parse parseuser; 2\ you need to add \java 1 8\ to our project via \build gradle(module\ app)\ because you will use lambda functions frequently in this project 1 compileoptions { 2 sourcecompatibility javaversion version 1 8 3 targetcompatibility javaversion version 1 8 4 } 2 enable email verification let’s now enable the email verification on back4app dashboard the email verification page has two properties verify user emails and prevent login if the email is not verified if you enable only the verify user emails option, the user will receive the verification email but will be able to log in and use the application normally if you also enable the “prevent login if email is not verified” option, the user will only log in after concluding the email verification process 1\ go to your app at back4app website https //www back4app com/ and click on \server settings\ 2\ find the “verification emails” card and click on \settings\ 3\ click on \verify user email\ and \prevent login if the email is not verified\ 4\ optional fill the empty fields and modify the ones that have already been filled based on your preferences 5\ click on the \save\ button 3 sign up the two fundamental attributes of \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 you used to implement the user registration but this time, instead of redirecting the user to a logged screen, you will ask the user to verify their email to log in after completing the signup process, the user will be saved on the database the user data will be available on \ parse dashboard\ with the mailverified boolean attribute set to false the verification email process consists of verifying the user’s email and setting this attribute to true so the user can entirely access all your app resources your sign up screen will look like this create a \signupactivity \ work following these steps 1\ import into your \signupactivity\ , in addition to the dependencies imported in step 1 1 import com parse parseexception ; 2 import com parse signupcallback ; 2\ implement the user registration using the following code 1 private void signup(string username, string password, string email) { 2 progressdialog show(); 3 parseuser user = new parseuser(); 4 user setusername(username); 5 user setpassword(password); 6 user setemail(email); 7 user signupinbackground(e > { 8 progressdialog dismiss(); 9 if (e == null) { 10 parseuser logout(); 11 showalert("account created successfully!", "please verify your email before login", false); 12 } else { 13 parseuser logout(); 14 showalert("error account creation failed", "account could not be created" + " " + e getmessage(), true); 15 } 16 }); 17 }1 private fun signup(username string, password string, email string) { 2 progressdialog? show() 3 val user = parseuser() 4 user username = username 5 user setpassword(password) 6 user email = email 7 user signupinbackground(signupcallback { 8 progressdialog? dismiss() 9 if (it == null) { 10 parseuser logout(); 11 showalert("account created successfully!","please verify your email before login", false) 12 } else { 13 parseuser logout(); 14 showalert("error account creation failed","account could not be created" + " " + it message,true) 15 } 16 }) 17 } in the example project, this code is available inside a \sign up\ button callback also, username, password and email are caught using edit texts you may add your own code to verify if the email address is valid before setting it in the front end finally, you may add your own code to provide feedback after conclude the sign up we will see the following message… 3\ it’s interesting to add an additional method to display alert dialogs and make the process look more professional here’s how you can do this 1 private void showalert(string title, string message, boolean error) { 2 alertdialog builder builder = new alertdialog builder(signupactivity this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok", (dialog, which) > { 6 dialog cancel(); 7 // don't forget to change the line below with the names of your activities 8 if (!error) { 9 intent intent = new intent(signupactivity this, loginactivity class); 10 intent addflags(intent flag activity clear task | intent flag activity new task); 11 startactivity(intent); 12 } 13 }); 14 alertdialog ok = builder create(); 15 ok show(); 16 }1 private fun showalert(title string, message string, error boolean) { 2 val builder = alertdialog builder(this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok") { dialog, which > 6 dialog cancel() 7 // don't forget to change the line below with the names of your activities 8 if (!error) { 9 val intent = intent(this\@signupactivity, loginactivity class java) 10 intent addflags(intent flag activity clear task or intent flag activity new task) 11 startactivity(intent) 12 } 13 } 14 val ok = builder create() 15 ok show() 16 } after signup we will receieve an email like this after verify the email the property will be set to true after verify the email the property will be set to true 4 log in to implement log in with email verification, you will use the same method which you used to implement the basic user registration https //www back4app com/docs/android/login android tutorial but this time, parse will check the emailverified boolean before granting further access to the user note the user actually logs in when the function parseuser logininbackground() is called but he can’t access the app entirely until the email verification is done, because of a session object which is created in the database so it’s important to use parseuser logout() every time the user who hasn’t verified his email tries to access the application unsuccessfully, in order to not leave \sessions \ opened if you have enabled the ‘prevent login if email is not verified’ option in step 2, you will get the following error if you try to login without verifying your email to make \loginactivity\ work, follow these steps 1\ import into your \loginactivity\ , in addition to the dependencies imported in step 1 1 import com parse logincallback ; 2 import com parse parseexception ; 2\ to implement user login function, simply use the following code 1 private void login(string username, string password) { 2 progressdialog show(); 3 parseuser logininbackground(username, password, (parseuser, e) > { 4 progressdialog dismiss(); 5 if (parseuser != null) { 6 showalert("login successful", "welcome, " + username + "!", false); 7 } else { 8 parseuser logout(); 9 showalert("login fail", e getmessage() + " please try again", true); 10 } 11 }); 12 }1 private fun login(username string, password string) { 2 progressdialog? show() 3 parseuser logininbackground(username,password) { parseuser parseuser?, e parseexception? > 4 progressdialog? dismiss() 5 if (parseuser != null) { 6 showalert("login successful", "welcome, $username!", false) 7 } else { 8 parseuser logout() 9 showalert("login fail", e? message + " please try again", true) 10 } 11 } 12 } in the example project, this code is placed available a \log in\ button callback also, username and password are caught using edit texts the method \alertdisplayer \ is the same that you added in the \signupactivity\ , don’t forget to change its \intent \ arguments though 5 log out to implement user log out, simply use the code below, in the \logoutactivity\ 1 progressdialog show(); 2 parseuser logoutinbackground(e > { 3 progressdialog dismiss(); 4 if (e == null) 5 showalert("so, you're going ", "ok bye bye then"); 6 });1 progressdialog!! show() 2 parseuser logoutinbackground { e parseexception? > 3 progressdialog!! dismiss() 4 if (e == null) 5 showalert("so, you're going ", "ok bye bye then") 6 } in the example project, this code is available inside a \log out\ button callback the method \alertdisplayer \ is the same as you added in the \loginactivity \ and \signupactivity\ , don’t forget to change its \intent \ arguments 6 test your app run your app, create a couple of users, and try logging in after registering without 1\ run your app, create a couple of users, and try logging in after registering without verifying the email to see if the error is displayed 2\ login at back4app website https //www back4app com/ 3\ find your app and click on \dashboard \ > \core \ > \browser \ > \user \ to see the users you’ve created! it’s done! at this stage, you can log in, sign up or log out of your app using email verification with parse server core features through back4app!