Ways on how to integrate "Remember me" or "Keep me Signed in"

Hi Ionic Developers,

I want the user of my application to be always logged in even when offline, just like Facebook. How can I achieve this?

I found ways on the internet already, but maybe there’s some more ideas out there? :smile:

Thanks in advance!

i use satellizer and they implemented ready functionality isAuthenticated() for this. You can check the state saved in the local Storage to check if user previously logged in.

2 Likes

My app uses basic token authentication, so basically once a user is logged in, unless they log out somewhere else they are still authenticated from that device.

I turn my auto hide splash screen setting to off in the config.xml and then when I load the app the login screen (hidden by the splash) checks to see if they are still authenticated by making a call using that token as their authentication.

If the user fails auth for example if their session timed out, or they logged in somewhere else maybe (If you track web/mobile tokens separately they could be logged in on both places) then it hides the splash screen and lets them log in.

If they pass authentication i hide the splash screen about 500ms after the state has changed to the home screen.

This makes for a really smooth and nice auto login set up. Then in my settings I’ve got a toggle they can hit if they prefer to log in each time.

2 Likes

Hi @m2m,

Will this work on Mobile?

Thanks.

Yes they also posted an example for ionic.

I am not sure why this happen. I successfully integrated the satellizer on my project. When running it on emulator or by “ionic serve”, the app loads. But when I try running it on an actual device (iPhone), it did not load. What do you think the problem is? Thanks!

can you post a log to your app.

Here’s the log:

2015-07-07 13:09:57.583 eBayanihan Mobile[4145:1196399] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/A54E05FC-308C-4BB1-9D4B-D86F75B17D60/Library/Cookies/Cookies.binarycookies
2015-07-07 13:09:57.896 eBayanihan Mobile[4145:1196399] Apache Cordova native platform version 3.8.0 is starting.
2015-07-07 13:09:57.899 eBayanihan Mobile[4145:1196399] Multi-tasking -> Device: YES, App: YES
2015-07-07 13:09:57.909 eBayanihan Mobile[4145:1196399] Unlimited access to network resources
2015-07-07 13:09:58.108 eBayanihan Mobile[4145:1196399] [CDVTimer][keyboard] 0.331044ms
2015-07-07 13:09:58.109 eBayanihan Mobile[4145:1196399] [CDVTimer][TotalPluginStartup] 0.934005ms
2015-07-07 13:09:58.583 eBayanihan Mobile[4145:1196399] Resetting plugins due to page load.
2015-07-07 13:09:58.795 eBayanihan Mobile[4145:1196399] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/FCC663EE-64B6-48C1-984D-28BF1C136FE9/eBayanihan%20Mobile.app/www/index.html
2015-07-07 13:09:58.801 eBayanihan Mobile[4145:1196399] Resetting plugins due to page load.
2015-07-07 13:10:05.022 eBayanihan Mobile[4145:1196399] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/FCC663EE-64B6-48C1-984D-28BF1C136FE9/eBayanihan%20Mobile.app/www/main.html

looks interesting… this is is a local library? no need for additional server code other than the

other than the… ? hehe :slight_smile:

Hi,

My solution is persist user certification in the localstorage like what @m2m do.

To define an User object to store certification and an UserService to handle User object, here is an example(do not use this in production):

var User = function (username, token, authenticated) {
  this.username = username;
  this.token = token;
  this.authenticated = false;
};

// Notice: I use `angular-local-storage` here
angular.module('YOUR_APP', [ 'LocalStorageModule', ... ])
  .service('UserService', function ($http, localStorageService) {
    var user = new User(null, null, false);

    var userService = {
      init: function () {
        // Retrieve information from local storage
        var credential = localStorageService.get(CACHE_KEY, credential);

        // Reload user
        this.reload().then(function (user) {
          user.username = user.username;
          user.token = credential;
          user.isAuthentiated = true;
        });
      },
      persist: function () {
        localStorageService.set(CACHE_KEY, credential);
      },
      reload: function () {
        // To authenticate user from server and fetch user data,
        // do not forget to handle error from server.
        // @return {Promise}
        return $http.post(YOUR_SERVER_URL_FOR_AUTHENTICATE_USER);
      },
      clear: function () {
        user.username = null;
        user.token = null;
        user.isAuthentiated = false;
      },
      isAuthenticated: function () {
        return user.isAuthenticated;
      },
      // ...
    };
    
    return userService;
  });

Create a UserService depending on your requirement(like auth, store credential, a http interceptor etc) to maintain User object will make things easy.


Check this website (http://caniuse.com/#search=localstorage), :smile:

Do you have any code that you could share of this being done?

In particular, code for hiding the splash screen after the home view has been loaded:

If they pass authentication i hide the splash screen about 500ms after the state has changed to the home screen.

When I’m doing it, the login screen is briefly visible before the home screen loads.

Hi North,
I am trying to do similar stuff as a remember me feature for an ionic enterprise app.I am using Session cookies/Jsession Id for session management.
But once the app is killed the cookie is destroyed.So I was trying to intercept the session cookie
after login but I am unable to do that mobile browser.

Need help as its an urgent requirement.

Regards and Thanks
Chaitali

Hey, Have you tried saving a “value” on a local storage? Coz’ as far as I know it won’t get destroyed even if you killed the App. You can save the “cookie” on a Local Storage and create a function that will determine if such key exist. From there you can determine the state of the App.

Thanks …I am trying to do the same thing but unable to catch the cookie from device browser,
though it works fine for desktop browser when I am running Ionic serve…

Regards
Chaitali

Have you tried using this one? http://learn.ionicframework.com/formulas/localstorage/

I don’t work with cookies very often, what you’re trying to do is what I would recommend. Enterprise systems get really touchy sometimes. Have you tried looking for a cookie library with cordova? Maybe there is an API that exposes those

Hi North,
If not cookies what is the best approach to do this for Ionic apps…
Regards
Chaitali

Local Storage is the best option for something like this. Local storage isn’t permanent, but it is a lot easier to work with in Javascript. ngStorage is an angularjs module for managing the local storage, it’s a great option.