JavaScript

Add JavaScript user registration and login to your Parse App

Introduction

This section explains how to do a basic user registration with email verification in a JavaScript environment through Back4App.

In this tutorial, you will use Parse.User object and will learn its most important functions.

See more about Parse SDK at JavaScript SDK API Reference and Parse open source documentation for JavaScript SDK.

Prerequisites

To complete this tutorial, you will need:

Step 1 - Sign Up

The user sign up function is similar to the create function used in the JavaScript Database Operations tutorial, but it has some additional benefits:

  • Checks if the username and email are unique.
  • Securely hashes the password in the cloud. Not even the developer can see the user’s password.
  • Requires at least an username and a password. You can use the email as username if you want to.

You can open the Back4App JavaScript Sign Up Function to see the code that has already been implemented.

To make your own signUp function, you need to repeat the same steps of the create function explained in Javacript CRUD tutorial, but call the method user.signUp instead of the save method, as shown below:

signUp.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
signUp();

function signUp() {
    // Create a new instance of the user class
    var user = new Parse.User();
    user.set("username", "my name");
    user.set("password", "my pass");
    user.set("email", "[email protected]");

    // other fields can be set just like with Parse.Object
    user.set("phone", "415-392-0202");

    user.signUp(null, {
      success: function(user) {
        console.log('User created successful with name: ' + user.get("username") + ' and email: ' + user.get("email"));
      },
      error: function(user, error) {
        // Show the error message somewhere and let the user try again.
        // It is likely that the user is trying to sign with a username or email already taken.
        console.log("Error: " + error.code + " " + error.message);
      }
    });
}
  • Be aware that Error 202 or Error 203 is likely to occur if you don’t change the username or the email.
  • The Error 209 invalid season token is also likely to occur when your browser cookies conflict with your Parse’s Current Session. To bypass that, clear your browser cookies or open the incognito mode of your browser.
    To confirm that the new user is added to the database, you can access your Parse Dashboard or code the login function which will be provided ahead.

Step 2 - Email Verification

An important feature of a sign up method email verification.
Fortunately, it is easy to configure it using Back4App. To enable email verification, login to your account, find your app and click on Server Settings.
Find the “Verification Emails” box and click on SETTINGS. Here’s how the “Verification Emails” box looks like this:

Then enable the verification by checking the box below.

If you are using the cloud environment of JSBin, then there is no need for completing this step.

By enabling this, the user’s class in your database receives one additional field: verifiedEmail.
This field is set to true when the email is verified, false if the email isn’t verified and undefined if the user was created before this setting was checked.

In that page you can also customize the email, change the subject, the body and the sender’s email and name.

To see how the email looks like, just create an user, using the signUp function, with an email that you can access. You should receive an email for verification.

Step 3 - Login

The login function is very simple and just needs a password and an username to run.

You can open the Back4App JavaScript Login Function to see the code that has already been implemented.

You need to call the Parse.User.logIn method as follow:

login.js

1
2
3
4
5
6
7
8
9
10
11
12
13
login();

function login() {
    Parse.User.logIn("my name", "my pass", {
        success: function(user) {
            // Do stuff after successful login, like a redirect.
            console.log('User logged in successful with username: ' + user.get("username") + ' and email: ' + user.get("email"));
        },
        error: function(user, error) {
            console.log("The login failed with error: " + error.code + " " + error.message);
        }
    });
}

Step 4 - Reset Password

It’s very important to add the Reset Password option as users are likely to forget their password in the future.
The configuration for the email that will be sent in the reset password function is on the same page as in the Email Verification step. There you can change the body and the subject of the email.

You can open the Back4App JavaScript Reset Password Function to see the code that has already been implemented.

To send the Reset Password email, just run the following code:

resetpassword.js

1
2
3
4
5
6
7
8
9
10
11
12
resetPassword();

function resetPassword() {
    Parse.User.requestPasswordReset("[email protected]", {
        success: function() {
            console.log("Password reset request was sent successfully");
        },
        error: function(error) {
            console.log("The login failed with error: " + error.code + " " + error.message);
        }
    });
}

It’s done!

At this point, you have learned not only how to do User Registration with JavaScript apps, but also how to send email verification and password reset emails.