Ionic

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 Ionic App

At any time, you can access the complete Android Project built with this tutorial at our GitHub repository.

Prerequisites

To complete this quickstart, you need:

Step 1 - Set up

In this tutorial, we will be starting from where we left off in the previous User Registration one.

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:

    Verification emails block

  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 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 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 work, follow these steps:

Add the isSigningup and email variables to login.ts to toggle and hold the e-mail input:

login.ts

1
2
3
// Parse Dependencies
  email: string;
  isSigningup: boolean;

Make the signUp() method send the e-mail address to the parse User.signUp() function:

login.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
signUp() {
    Parse.User.signUp(this.username, this.password, {email: this.email}).then((resp) => {
        console.log('Signed up successfully', resp);

        // Clears up the form
        this.username = '';
        this.password = '';
        this.email = '';

        this.toastCtrl.create({
        message: 'Account created successfully',
        duration: 2000
        }).present();

        this.isSigningup = false;
    }, err => {
        console.log('Error signing in', err);

        this.toastCtrl.create({
        message: err.message,
        duration: 2000
        }).present();
    });
}

Now, let’s reflect those changes to the view login.html by adding *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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <ion-item *ngIf="isSigningup">
    <ion-label stacked>E-mail</ion-label>
    <ion-input type="email" [(ngModel)]="email"></ion-input>
  </ion-item>

  <div text-center margin-top *ngIf="!isSigningup">
    <button ion-button margin-right (click)="isSigningup = true">
      SIGN UP
    </button>

    <button ion-button color="secondary" (click)="signIn()">
      SIGN IN
    </button>
  </div>

  <div text-center margin-top *ngIf="isSigningup">
    <button ion-button (click)="signUp()">
      SIGN UP
    </button>
  </div>

Step 4 - Log in

Now, let’s add the emailVerified boolean verification before sending the user to the Home page.

Note: Although the user logs in when the function 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() every time a user who hasn’t verified his/her e-mail tries to access the application in order to not leave 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
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
27
28
29
30
// Parse Dependencies
signIn() {
    Parse.User.logIn(this.username, this.password).then((user) => {
        console.log('Logged in successfully', user);

        if(user.get('emailVerified')) {
            // If you app has Tabs, set root to TabsPage
            this.navCtrl.setRoot('HomePage')
        } else {
            Parse.User.logOut().then((resp) => {
                console.log('Logged out successfully', resp);
            }, err => {
                console.log('Error logging out', err);
            });

            this.alertCtrl.create({
                title: 'E-mail verification needed',
                message: 'Your e-mail address must be verified before logging in.',
                buttons: ['Ok']
            }).present();
        }
    }, err => {
        console.log('Error logging in', err);

        this.toastCtrl.create({
        message: err.message,
        duration: 2000
        }).present();
    });
}

Step 5 - Test your app

  1. Test your app by running 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.
  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!