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:
- A basic JavaScript app connected with Back4App or JSBin connected with our Parse API.
- Note: You can use the app created in our JavaScript Install Parse SDK tutorial
or use the same online environment JSBin with the setup done
in the JavaScript Database Operations tutorial.
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 Javascript 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
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().then(function(user) {
console.log('User created successful with name: ' + user.get("username") + ' and email: ' + user.get("email"));
}).catch(function(error){
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 yourParse Dashboard
or code thelogin
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
logIn();
function logIn() {
// Create a new instance of the user class
var user = Parse.User
.logIn("myname", "mypass").then(function(user) {
console.log('User created successful with name: ' + user.get("username") + ' and email: ' + user.get("email"));
}).catch(function(error){
console.log("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
resetPassword();
function resetPassword() {
Parse.User.requestPasswordReset("[email protected]").then(function() {
console.log("Password reset request was sent successfully");
}).catch(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.