How to implement 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 Android Project built with this tutorial at our GitHub repository.
Prerequisites
To complete this tutorial, you need:
- Android Studio.
- An app created on Back4App.
- Note: Follow the New Parse App tutorial to learn how to create a Parse App on Back4App.
- An android app connected to Back4app.
- Note: Follow the Install Parse SDK tutorial to create an Android Studio Project connected to Back4App.
- A device (or virtual device) running Android 4.0 (Ice Cream Sandwich) or newer.
Step 1 - Set up
At the beginning of each Parse activity, import the following:
1
2
3
4
5
6
7
8
9
10
11
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import com.parse.Parse;
import com.parse.ParseUser;
Step 2 - Enable Email Verification
- Go to your App at Back4App Website and click on
Server Settings
. - Find the “Verification emails” block and click on
Settings
. The “Verification emails” block looks like this: - Click on
Verify User Email
. It is right here: - Fill in the empty fields and modify the ones that have already been filled based on your preferences.
- Click on the
SAVE
button.
Step 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 which you used to implement the basic user registration. But this time, instead of making an intent to the next page, you will ask the user to verify his or her email to login.
Once the verification process is completed, the user is automatically added to Parse Dashboard
and its emailVerified Boolean attribute is set as false. Email verification is must as only you’ll be allowed to let your users access your app entirely.
To make SignUpActivity
work, follow these steps:
- Import into your
SignUpActivity
, in addition to the dependencies imported in Step 1:1 2
import com.parse.ParseException; import com.parse.SignUpCallback;
- To implement user registration, simply use the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
try { // Reset errors <Insert User Email Here>.setError(null); <Insert User Password Here>.setError(null); // Sign up with Parse ParseUser user = new ParseUser(); user.setUsername(<Insert Username Here>); user.setPassword(<Insert User Password Here>); user.setEmail(<Insert User Email Here>); user.signUpInBackground(new SignUpCallback() { @Override public void done(ParseException e) { if (e == null) { ParseUser.logOut(); alertDisplayer("Account Created Successfully!", "Please verify your email before Login", false); } else { ParseUser.logOut(); alertDisplayer("Error Account Creation failed", "Account could not be created" + " :" + e.getMessage(), true); } } }); } catch (Exception e) { e.printStackTrace(); }
In the example project, this code is placed inside a
SIGN UP
button callback.
Also, username and password 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. - 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
private void alertDisplayer(String title,String message, final boolean error){ AlertDialog.Builder builder = new AlertDialog.Builder(LoginActivity.this) .setTitle(title) .setMessage(message) .setPositiveButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.cancel(); if(!error) { Intent intent = new Intent(SignUpActivity.this, LoginActivity.class); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent); } } }); AlertDialog ok = builder.create(); ok.show(); }
Step 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. But this time, you 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.
To make LoginActivity
work, follow these steps:
- Import into your
LoginActivity
, in addition to the dependencies imported in Step 1:1 2
import com.parse.LogInCallback; import com.parse.ParseException;
- To implement user login function, simply use the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// Reset errors (<Insert User Password Here>).setError(null); // Login with Parse ParseUser.logInInBackground(<Insert Username Here>, <Insert User Password Here>, new LogInCallback() { @Override public void done(ParseUser parseUser, ParseException e) { if (parseUser != null) { if(parseUser.getBoolean("emailVerified")) { alertDisplayer("Login Sucessful", "Welcome, " + <Insert Username Here> + "!", false); } else { ParseUser.logOut(); alertDisplayer("Login Fail", "Please Verify Your Email first", true); } } else { ParseUser.logOut(); alertDisplayer("Login Fail", e.getMessage() + " Please re-try", true); } } });
In the example project, this code is placed inside a
LOG IN
button callback.
Also, username and password are caught using Edit Texts.The method
alertDisplayer
is the same that you added in theSignUpActivity
, don’t forget to change itsIntent
arguments though.
Step 5 - Log Out
To implement user log out, simply use the code below, in the LogoutActivity
:
1
2
3
// logging out of Parse
ParseUser.logOut();
alertDisplayer("So, you're going...", "Ok...Bye-bye then", false);
In the example project, this code is placed inside a
LOG OUT
button callback.
The method
alertDisplayer
is the same that you added in theLoginActivity
andSignUpActivity
, don’t forget to change itsIntent
arguments though.
Step 6 - Test your app
- Run your app and create 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.
- Find your app and click on
Dashboard
>Core
>Browser
>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!