Introduction

The app logic described in this part is based on the app built in Part 1.

🚧

Important pre-condition

Please complete the Ionic Two-factor Authentication. Part 1 tutorial first, then continue with this part.

👍

Important notice

Be informed that when creating an app with Cordova plugins it is important that the needed plug-in be imported before you proceed with the app UI.

Importing cordova-plugin-sms-retriever-manager Plug-in

1. Log in to your Appery.io account and go to the Resources > Cordova plugins tab.
2. Click Import Cordova plugin and select the From Git tab.
3. Enter https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git in Repository URL field and master in the Repository branch field:

4. Click the Import plugin button. You will see the plug-in on the list of imported plug-ins:

Adding Cordova Dependencies

1. Go to the Appery.io dashboard and open Ionic twoFactorAuth App, the app created in the first part of the tutorial. Then, go to the Project > App settings > Cordova plugins tab.
2. Here, select the Imported Cordova plugins tab and check Device - Cordova SMS Retriever Plugin:

Adding Ionic Native Dependencies

1. In the Appery.io editor, go to Project > App Settings > Npm modules.
2. In the Dependency section, click Add. Type @ionic-native/sms-retriever for the Module name and ^5.23.0 for its Version:

Adding App Module Dependencies

1. Now, navigate to Pages > app and go to its MODULE panel.
2. In the Imports section, enter the following line of code:

import { SmsRetriever } from '@ionic-native/sms-retriever/ngx';

3. Then, scroll down and in the NgModule Settings > Providers section, enter SmsRetriever:

Save all the project changes.

App Testing

Click the TEST button in the top menu of the editor to test the application in the browser. Enter any username and password and your phone number and click SIGN UP:

Check your mobile phone, there should be the code sent from your Twilio trial account:

🚧

Important note

Automatic code detection will not work on iOS devices. This feature is only supported on Android devices.

The app will navigate to the code confirmation page, where you can enter the verification code you received in the SMS. click SUBMIT. If the code is valid, you will see a popup informing you that registration is complete: