Login automatically with stored credentials PhoneGap Onsen UI app

Question

I have this mobile application made with PhoneGap, Onsen UI and AngularJS.

I have a single index.html file, where I have the following page structure:

index.html
     - <ons-navigator var="myNavigator" page="login.html">

     - <ons-template id="login.html">
            - <ons-page ng-controller="LoginController" id="login">
     - <ons-template id="main.html">
            - <ons-page ng-controller="AppController" id="main">
                  - <ons-tabbar>
                     - <ons-tab active="true" page="upcoming.html">
                     - <ons-tab active="true" page="completed.html">
                     - <ons-tab active="true" page="settings.html">
     - <ons-template id="upcoming.html">
     - <ons-template id="completed.html">
     - <ons-template id="settings.html">

The login.html page asks for user credentials, and when the user click Login, these will be stored in the window.localStorage object.

The next time I load the page, I want the app to not navigate to the login.html page (not show it), but check for the credentials in the localStorage, and use the myNavigator to push to the main.html page, just like a succesfull login would do.

I have a main.js file that has both the controllers in it, and outside the controller definitions, I have a ons.ready function which is triggered when the Onsen framework is loaded.

ons.ready(function() {
    var storage = window.localStorage;
    if(credentials_found_in_localStorage)
        myNavigator.pushPage('main.html');
    }
});

This function is working, but before the pushPage happens, the login.html page is shown for a couple of seconds (until I get back if the login was succesfull or not)

How can I have a functional automated login, that uses the stored credentials and is skipping the login.html page?

What would be the best approach to handle this? (maybe a splash screen?)

Answer 1

You can start your navigator without a specified page (remove page="login.html" attribute), and then load the page you want on ons.ready():

ons.ready(function() {
  if(credentials_found_in_localStorage) {
    nav.resetToPage('main.html');
  } else {
    nav.resetToPage('login.html');
  }
});

Working here (change the value of isLogged): http://codepen.io/frankdiox/pen/eNmNoz

Another possible solution is to remove your ons-navigator, since I think you only use it for logging purposes, and use an ons-modal instead. For this you have to make your ons-tabbar the main element (remove the ons-template id="main.html" wrapper). Inside the modal you can include your actual login.html page and only do myModal.show() on ons.ready if the user is not logged in. When he logs in you just need to do myModal.hide(). If you don't want to load the first page in the tabbar until the user is logged in, just use myTabbar.loadPage(...) after the login check.

Hope it helps!