Taking Your Cordova App Further with Onsen UI

In the first part of this tutorial, we looked at how to get started with mobile app development using Onsen UI, designing the user sign in and sign up pages. In this tutorial, we’ll make these pages functional. We’ll be utilizing Firebase as a backend for the app. In Onsen UI we can use both jQuery and AngularJS for development. In this tutorial we’ll be using AngularJS.

Source code from this tutorial is available on GitHub.

Getting started

Download or clone the first tutorials source code. Install all the required dependencies as shown:

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

Point your browser to http://localhost:8901/index.html and you should see the app we designed in first tutorial. You can also use the android emulator to run the app as we did in the first tutorial.

Implementing Sign In

Let’s start by defining a controller for our app. If you open up /OnsenUI--Part1/www/js/app.js you should see a controller already defined.

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here
    });

})();

First we’ll validate the username and password for empty values. If there are any issues with validation, we’ll show a modal window with a validation message. Otherwise we’ll authenticate against a Firebase database.

Let’s define a method called SignIn inside the controller AppController as shown below:

$scope.data = [];

$scope.SignIn = function() {
    var user = $scope.data.username;
    var pass = $scope.data.password;
    if (user && pass) {
        // success logic
    } else {
        // failure logic
    }
};

Add the ngModel directive to the username and password input text boxes in index.html as shown below:

<input ng-model="data.username" type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />
<input ng-model="data.password" type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />

Next, we’ll use the ons-modal component of Onsen UI to show a validation pop up. Add the following html code to the sign in ons-page (Should be around line 92).

<ons-modal var="modal">
    <br>
    <br>Invalid Username or Password.
    <br>
</ons-modal>

Now add the modal show code to the failure logic of SignIn, replacing the // failure logic comment:

modal.show();

Add the modal hide code to the ng-click event of the HTML we just added as shown below:

<ons-modal var="modal" ng-click="modal.hide()">
    <br>
    <br>Invalid Username or Password.
    <br>
</ons-modal>

Add the ngClick directive to the Sign in button as shown below:

<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">
    SignIn
</ons-button>

Start the server and click on the sign in button with an empty username or password. The modal validation message will appear. Click anywhere on the pop up and it will disappear.

Here is a demo of the above code in action.

Now, let’s validate the username and password against Firebase. To get started with Firebase, you’ll need to register for a free account. Once registered and logged in, you’ll get a firebase url which in my case is :

https://burning-fire-1723.firebaseio.com/

Include the following scripts in index.html:

<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>

Firstly we need to create an instance of firebase using our firebase url. Then using this firebase instance, create a FirebaseSimpleLogin instance. Place the this code after the module.controller definition in app.js:

var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');

var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error) {
        if (user) {
            // On success authentication
            console.log(user);
        }
    }
});

Inside the SignIn function we’ll authenticate the username and password as shown, replace the current function with the code below:

$scope.SignIn = function() {
    var user = $scope.data.username;
    var pass = $scope.data.password;
    if (user && pass) {
        // success logic
        auth.login('password', {
            email: user,
            password: pass
        });
    } else {
        // failure logic
        modal.show();
    }
};

We have used auth.login to authenticate the username and password against the firebase database. On a successful authentication the user will be logged in.

In order to enable the authentication process, firstly log into firebase and open the application you are currently working on. From the left side menu, click on Login & Auth. Under the Email & Password tab, check the Enable Email & Password Authentication.

Add a new user to the firebase database with a username and password. Now, run the app and try log in using the new username and password. Check the browser console which will have the user logged on successful user authentication.

Here is a demo of the above code in action. Try to sign in using username sam@sam.com and password sam.

Next on a successful user sign in, we’ll redirect the user to home.html. Create a new file called home.html with the following code.

<ons-template id="home.html">
    <ons-page>
        <ons-toolbar>

            <div class="center">Welcome</div>
            <div class="right">

                <ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon>

            </div>
        </ons-toolbar>

        <div style="text-align: center">
            <br />
            <ons-page>

                <p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p>

            </ons-page>
        </div>
    </ons-page>
</ons-template>

Add a new method called logout as shown:

$scope.logout = function() {
    auth.logout();         // logging out the firebase
    $scope.data = [];      // clearing user data
    myNavigator.popPage(); // redirecting to sign in page
};

Now modify the FirebaseSimpleLogin callback as shown:

var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error) {
        if (user) {
            $scope.username = user.email;
            myNavigator.pushPage('home.html', {
                animation: 'slide'
            });
        }
    }
});

We have used ons-navigator for page navigation. myNavigator.pushPage is used to navigate to home.html page.

Here is a demo of the above code in action.

Implementing Sign Up

We’ll be implementing sign up functionality also using firebase. In the sign up page we currently have three input fields for sign up. We’ll be using only email and password since that’s all that’s required for firebase user sign up.

Firstly add the ngModel directive to both the fields as shown:

<ons-list-item>
    <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;">
</ons-list-item>

<ons-list-item>
    <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>

Create a SignUp method in AppController which will validate the email and password for empty values. Use the auth.create method to sign up a new user as below:

$scope.reg = [];
$scope.SignUp = function() {
    var email = $scope.reg.email;
    var password = $scope.reg.pass;
    auth.createUser(email, password, function(error, user) {
        if (!error) {
            myNavigator.popPage();
        } else {
            alert('error');
        }
    });
};

Add the ngClick directive to the Sign Up button as below:

<ons-button modifier="large" ng-click="SignUp()">
    Sign Up
</ons-button>

Add a new modal to the Sign Up page which we’ll show incase the user doesn’t enter an email or password. Here is how it looks:

<ons-modal ng-click="modal.hide()" var="modal">
    <br>
    <br>Enter Email Address and Password.
    <br>
</ons-modal>

Modify the SignUp function as shown below:

$scope.SignUp = function() {
    var email = $scope.reg.email;
    var password = $scope.reg.pass;
    if (email && password) {
        auth.createUser(email, password, function(error, user) {
            if (!error) {
                myNavigator.popPage();
            } else {
                alert('error');
            }
        });
    } else {
        modal.show();   // to show validation pop up message
    }
};

Now restart the app and try signing up. On a successful sign up it will navigate to the Sign In page. Try signing in using the new credentials and you should be signed in.

Here is a demo of the above sign in and sign up functionality in action.

Conclusion

In this tutorial, we implemented the sign in and sign up functionality using the Onsen UI framework and Firebase as a back end.

Have a look at the number of other components offered by Onsen UI. For an in depth exploration of the Onsen UI framework, refer the official docs.

Do let us know your thoughts in the comments below!