Appery.io Login/Logout online/offline Step by Step

I will show you how to create secured mobile application on appery.io with login/logout features and ability to work in offline mode.

Let’s create Appery database with name LabelDB

Our database will be secured and user’s credentials will be saved in predefined collection Users.

In real application we would have registration page but for our demo app Let’s create predefined users with name

alex and password pass1

And

john with password pass2

Our database will be have only one custom collection with name Labels which will be store short messages.

Let’s create In collection Labels custom column with name label and type String

By analogy with Users collections let’s create two predefined labels

Label-1

label-2

Since we considered information in Labels collection as secured we have mark it as secured.

After that only authorized users will be able to work with it.

Since our application should be able to work offline we have to work with our database via API Express

Let’s create API Express project with name LabelProject

And In LabelProject let’s create generated service with with labels

From list of db connections let’s select predefined database connection with name [Appery.io] LabelDB

Then we need to select collection Labels

Let’s leave everything as it is.

And last step we have to mark our API Express project as secured

On Settings tab enable “Secure REST API” checkbox

Select Security type Security Provider

And select [Appery.io] LabelDB as Security Provider

Now let’s create ui of our application

Create blank ionic application

Rename Screen1 page to Login

And add new page Labels

Login screen has two input fields username and password

Property Ng-model of username field is username

And property Ng-model of password field is password

Also we need to add button with Text Login and property ng-click login()

After successful login user will be redirected on Labels page

So here we need to add variables username and password

Application should work with API Expres project for that let’s run API Express extension and select LabelsProject and generate labels generic services.

After refreshing app corresponding API Express services should be added into our application.

Drag and drop AppClientLogin service

And map our application variables on variables of Login service

After successful login user will be redirected on Labels page otherwise he will see corresponding alert message.

On second page user will be see the list of labels

For that we add list element

And specify property ng-repeat as label in labels

And update init method here we have to invoke labels_find services and map $scope.labels variable on success

Since all App Client services are invoked asynchronously we need to invoke $scope.$apply() method manually.

And also let’s add two buttons Login which will redirect us on Login page  

For that just specify navigate-to property as Login

And Logout button which also will be redirected as on Login page but before that invoke AppClientLogout method   

Don’t forget to invoke $scope.$apply() manually

Application is ready for testing

First let’s test that it works properly online

We provided correct credentials alex/pass1 and were navigated on Labels page where we see the list of our labels with two labels

Let’s press Logout button

Now we are on Login screen and let’s move our application to offline mode it is very easy to do in chrome browser just enable offline checkbox on network tab

First let’s make sure that invalid credentials will not work and provide username bob and password pass3 while everything is correct

And now we provide our previous credentials alex/pass1 and go to Labels page and can see our labels

Network tab is empty and it means that all data were taken from offline storage.

Again let’s press Logout button

And try to login with as second user john/pass2.

AppClient remembers only last user for offline mode so it is impossible to login only as alex

That is it what I wanted to show. Thanks for your attention.