Android

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:

User Registration with Email Verification App

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:

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

  1. Go to your App at Back4App Website and click on Server Settings.
  2. Find the “Verification emails” block and click on Settings. The “Verification emails” block looks like this:

    Verification emails block

  3. Click on 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 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:

  1. Import into your SignUpActivity, in addition to the dependencies imported in Step 1: 
    1
2
    import com.parse.ParseException;
import com.parse.SignUpCallback;
  2. 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.

  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
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:

  1. Import into your LoginActivity, in addition to the dependencies imported in Step 1: 
    1
2
    import com.parse.LogInCallback;
import com.parse.ParseException;
  2. 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 the SignUpActivity, don’t forget to change its Intent 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 the LoginActivity and SignUpActivity, don’t forget to change its Intent arguments though.

Step 6 - Test your app

  1. 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.
  2. Login at Back4App Website.
  3. 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!