What are we going to build?

In this tutorial, we’ll build an app where users can log in, register, and recover forgotten passwords via the email they specified when registering. This app uses the Appery.io database and server code, shows how to create a sign in/registration feature, and shows how to use server scripts in the app to recover password.

Before you begin

Tutorial level: advanced.

This tutorial assumes you know how to build mobile pages, add and map services, and write server code scripts.

To send an email with a secret code to restore the password, you need a SendGrid account.

Creating from the backup

You can build this app by following our step-by-step tutorial below or create it from the backup.

To create an app from the backup:

1. Click “Create new app.”
2. Type an app name.
3. Click “From backup” and select the project backup file.
4. Click “Create.”

You still have to create the database and Server Code scripts manually. If you’ve already created the database, locate the X-Appery-Database-Id and paste it to PasswordRecoveryDB_settings > database_id.

Also, specify the URLs for sendEmail_service and resetPassword_service. Find how to create them here and here.

Creating a new app

Switch to the Apps tab, and create a new app (use any name). The app builder opens. We’ll create three pages, one each for: registering, logging in, and recovering the password.

Creating pages

The loginScreen is the start screen of the app. It is used to log into the database.

1. Build the following UI:

2. The Input components are defined as placeholders. Name the Input components: loginInput and passwordInput.

3. Name the Button components: loginButton, registerButton and recoverPasswordButton.

The registerScreen is used for registering new users.

4. Build the following UI:

5. All Input components are defined as placeholders. Name the Input components: loginInput, emailInput, passwordInput, and confirmPasswordInput.

6. Name the button registerButton.

The recoverScreen is used to recover the password, with the help of a secret code sent to the user’s email.

7. Build the following UI:

8. All Input components are defined as placeholders. Name the Input components: loginInput, secretCodeInput, newPasswordInput, and confirmNewPasswordInput.

9. Name buttons: getCodeButton and changePasswordButton.

Now we’ll create a database to store users’ data.

Creating a new database

1. Go to https://appery.io/database, and create a new database. In the app, we need only the Users collection. It has two predefined columns: username and password. Add two more columns: user’s e-mail (email) and the secret code (secret_code):

2. Now, we need to create REST services for registering and signing into the database. The services should then be mapped and the events invoking them defined.

Creating & invoking database services

1. To create the signup and login services, select Create New > Database Services, select your database, and then check the Login and Signup services.

Three services are created:

2. Open the loginScreen, switch to the DATA tab, and add a login service. Rename the service instance to loginService:

3. Create the following Before send mapping:

In this tutorial, no Success mapping is needed.

4. Add the following events to see whether the login failed or succeeded:

• loginService > Success > Run JavaScript > add the following script:
  
  1	alert("You have successfully logged in");

• loginService > Error > Run JavaScript > add the following script:
  
  1 2 3 4 5

  try {     alert(JSON.parse(jqXHR.responseText).description); } catch (e) { alert('Login failed'); }

5. Switch to the DESIGN tab, and add the following events:

• loginButton > Click > Invoke service > loginService
• registerButton > Click > Navigate to page > registerScreen
• recoverPasswordButton > Click > Navigate to page > recoverScreen

The loginScreen is ready.

The database services import doesn’t include user-defined fields as email or secret_code. So they must be added manually.

6. Open Database_signup_service (it’s listed under the Services folder) and go to the Request tab. Add the email parameter:

7. Open registerScreen, switch to the DATA tab, and add the sign-up service. Rename the service instance to signupService:

8. Create the following Before send mapping:

9. Add the following events to see whether registration failed or succeeded:

• signupService > Success > Run JavaScript > add the following script:
  
  1	alert("You have successfully registered");

• signupService > Error > Run JavaScript > add the following script:
  
  1 2 3 4 5

  try {     alert(JSON.parse(jqXHR.responseText).description); } catch (e) { alert('Registration failed'); }

10. Switch to the DESIGN tab, and add the following event on button click:

• registerButton > Click > Run JavaScript > add the script; check that all values are correct and then invoke the service:
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  if ($.trim(Appery("loginInput").val()) != "") {     if (Appery("passwordInput").val() == Appery("confirmPasswordInput").val()) {         if ($.trim(Appery("emailInput").val()) != "") {             if (!document.getElementsByName("emailInput")[0].checkValidity || document.getElementsByName("emailInput")[0].checkValidity()) {                 signupService.execute({});             } else {                 alert("Please enter a valid email");             }         } else {             alert("Please specify your email");         }     } else {         alert("Passwords don't match!");     } } else {     alert("Please enter your login"); }

Before adding services to the recoverScreen, you need to create server scripts.

Creating server script to send password recovery code

1. Go to https://appery.io/servercode/, and create a new script. Name it SendEmail.

2. Add the following code (it generates the secret code and sends it to the user’s email):

In this script, you should enter the following custom data:

• Database ID – replace with your Database ID.
• Master Key – replace with your Master Key.
• Sendgrid username, Sendgrid password – replace with your SendGrid credentials.
• admin@company.com – replace with your email.

Now, you need to create one more script to recover the password in the database.

Creating server script to change password

1. Create a new script, and name it ResetPassword. Add the following code (it checks the entered secret code and updates the password):

Where:

• Database ID – your Database ID.
• Master Key – your Master Key.
• Sendgrid username, Sendgrid password – your SendGrid credentials.
• admin@company.com – your email.

Creating REST services to invoke server code scripts

sendEmail_service

1. Inside the app builder, select CREATE NEW > Service. Create a REST service, name it sendEmail_service. Define the following settings:

2. To get the URL value, go to Server Code >  SendEmail script > Script tab, and copy the Execute URL value:

3. Create only one request parameter – username:

4. There’s only one response parameter: message. The service response can be automatically created from the Test tab:

resetPassword_service

1. Select CREATE NEW > Service. Create a REST service, and name it resetPassword_service. Define the following settings:

2. To get the URL value, go to Server Code >  ResetPassword script > Script tab, and copy the Execute URL value:

3. There are three request parameters: username, secretCode, and newPassword:

4. There may be one response in this service, message, but since we’re not going to use it, disregard it.

Invoking server code on the page

1. Open the recoverScreen, switch to the DATA tab, and two services are created. Name them sendEmailService and resetPasswordService:

2. In the sendEmailService, create the following Before send mapping:

3. Click “Save and return”.

4. In the resetPasswordService, create the following Before send mapping:

In both services, no response mapping is needed.

Switch to the DESIGN tab, and add the following button click events:

• getCodeButton > Click > Invoke service > sendEmailService.
• changePasswordButton > Click > Run JavaScript and add the following script:
  
  1 2 3

  if (Appery("newPasswordInput").val() == Appery("confirmNewPasswordInput").val()) {     resetPasswordService.execute({}); }

Switch to the DATA tab, and add events for successful executing services:

• sendEmailService > Success > Run JavaScript  and add the following script:
  
  1	alert(data.message);

• resetPasswordService > Success > Run JavaScript and add the following script:
  
  1	alert(data.message);

Now the app is ready and you can test it.

Testing the app

When testing the app, you’ll first see the login page:

If you have users in your database, enter the username and password (or wrong password) to check if the app works correctly.

You can also enter the wrong username:

To sign up, click “Register”:

If you want to change the password, on the login page, click “Recover password” and enter the username:

Enter the secret code from the email you received, and the new password: