Forcing re-authentication after offline usage on iOS devices?

**agobert** · 17 Aug 2012, 1:01 AM

Hi everyone!

My Sencha Touch application resides on an Apache server with server-side basic authentication, i.e. upon the first connection, the user has to enter his/her credentials via the browser prompt. The application then gets cached using the cache.manifest and provided HTML5 mechanisms. If I take my iOS device offline and re-open the page, I can see and use the cached version just fine.

When taking my device online again, it is always using the cached version of my page but I'd rather like to sync the cache with the server (which, of course, requires a re-authentication with the server).

Is it possible to somehow force the user to re-authenticate his/herself on startup? Or am I doing something entirely wrong and the source of the problem is not the authentication?

[EDIT]
The interesting thing is that it works as intended when only using the Safari browser, because it seems to cache the credentials too. If I, however, install the App to my homescreen, I still only get the cached version.

I am glad for every advice!

**mitchellsimoens** · 20 Aug 2012, 5:15 AM

What happens if you do an Ajax request? Will it fail and with a status code that says you need to auth?

I personally never use basic auth as passwords are sent in plain text, it has no security really.

**agobert** · 20 Aug 2012, 11:36 PM

Hey,

thanks for your answer. I know that basic auth is not secure at all, however, I am forced to use it since the server uses the provided credentials to set several access permissions for the user, and I have no influence on its architecture. Additionally, the user in our scenario will only reach the server through a VPN.

Unfortunately I can't really see what's going on since I don't have a debug console when starting the app from the homescreen (undecorated Safari) and it works as intended when using the "normal" Safari.

It has to have to do with authentication and caching, because, if I don't use the cache.manifest, the undecorated Safari requests the credentials each time I open the app from the homescreen.

Regards!

**RoxburySoftware** · 14 Nov 2012, 12:27 PM

I am having the same issue. I use an Ajax request to post username and password to the server. I can pull it up just fine in Safari. When I bookmark to the home screen it always works the first time. But when I pull the bookmark back up it appears iOS goes into some kind of offline mode that doesn't happen in Safari. The result code for the failure is 0 and my server logs don't show any requests.

I have researched this quite a bit. Going to far as to change my cache manifest to cache.manifest from cache.appCache (I used sencha cmd 3 and touch 2.1 for the app running on iOS 6.01) as well as changing the apple-mobile-web-app-capable to no and making sure that the apple-touch-icon references all show up in my root directory. That was part of a tip for someone using a mapping application that wasn't working right.

I suspect Apple changed how these ran in iOS 6 and just hasn't told anybody. But until I find a work around I have no choice but to run the app in the browser.

**agobert** · 15 Nov 2012, 12:49 AM

Hi there,

the issue still persists and I am forced to disable the cache manifest completely. I may note that it makes no difference whether I use iOS 5 or 6.

I am looking forward to a solution.

**RoxburySoftware** · 21 Nov 2012, 6:40 AM

Originally Posted by agobert

Hi there,

the issue still persists and I am forced to disable the cache manifest completely. I may note that it makes no difference whether I use iOS 5 or 6.

I am looking forward to a solution.

I find it interesting that you have the same issue on iOS 5. I did a ton of research and it appears that Apple did in fact break something in Safari. It appears that iOS 6 cache's Ajax calls. Which in this case just doesn't submit at all. Other devs seem to indicate that early betas of 6.1 fix this issue. So I imagine if it still doesn't work in 6.1 then it's a Sencha bug instead of an Apple bug which it looks to be at this point.

**agobert** · 19 Dec 2012, 1:03 AM

I will attach a little code snippet to clarify what I'm doing. Some of the code was refactored due to copyright and other reasons.

The model is defined as follows:

Code:

Ext.define('MyApp.model.MyModel', {
    extend: 'Ext.data.Model',    
    config: { 
        fields: [        
            { name: 'name', type: 'string' }      
        ],
        identifier: 'uuid'
    }
});

There are two stores for this model, i.e. one online and one offline store. The online store requests the data per Ajax from the server which answers with a JSON file.

Code:

  Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    config: {
        model: "MyApp.model.MyModel",
        storeId: "StoreId",
        proxy: {
            type: 'ajax',
            timeout: 2000,
            url: '/some-cgi-path/loadstore.pl',
            reader: {
                type: 'json',
                rootProperty: 'groups'
            }
        },
        sorters: [{
            property: 'name',
            direction: 'ASC'
        }]
    }
});


Ext.define('MyApp.store.MyOfflineStore', {
    extend: 'Ext.data.Store',
    config: {
        model: "MyApp.model.MyModel",
        storeId: "OfflineStoreId",
        proxy: {
            type: 'localstorage',
            id: 'myappofflinestore'
        },
        sorters: [{
            property: 'name',
            direction: 'ASC'
        }]
    }
});

The code to load the data into the store is rather simple. We try to retrieve the data from the server. If the connection times out we load the data from the offline store. If no timeout occurs we synchronize the offline store with the newly retrieved entries.

Code:

  loadStore: function() {
    var store = Ext.getStore('StoreId');


    // Try to load the data from the server.
    store.load(function(records, operation, success) {
      var the_store = store;
      if (success) {
        // Load and display.
        this.showOfflineLabel(false);
        console.log(records.length + ' entries loaded from server.');
        console.log('Synchronizing offline store.');
        var offstore = Ext.getStore('OfflineStoreId');
        offstore.getProxy().clear();
        offstore.add(records);
        offstore.sync();
        console.log('Data: ');
        console.log(records);
        this.onStoreLoaded(the_store);
      } else {
        // Error. Try to load data from offline store.
        this.showOfflineLabel(true);
        console.log('Timeout, loading data from offline store.');
        the_store = Ext.getStore('OfflineStoreId');
        the_store.load(function(records, operation, success) {
          if (success) {
            console.log(records.length + ' entries loaded from offline store.');
            console.log('Data: ');
            console.log(records);
          } else {
            console.log('Could not retrieve data from offline store.');
          }
          this.onStoreLoaded(the_store);
        }, this);
      }


    }, this);
  }

I now use Sencha Touch 2.1.0 but the problem persists. Again, after caching the application via the provided cache.appcache file and taking iOS offline, the app will always load the offline store even if iOS is taken online again.

**RoxburySoftware** · 19 Dec 2012, 6:33 AM

That appears to be a bug in iOS6. And it shouldn't matter if the device goes offline or not. In my tests when I use a shortcut to the page on the desktop, executing the shortcut again iOS refuses to send the query again. It just automatically fails with an error code of 0. This has been reported on other blogs as an iOS 6 issue. I don't have a 5 device so I am not sure why you would get it with a 5 device. Developers have said it was fixed in iOS 6.1 but until Apple releases it I have no way of testing that. I would try and run it without the cache manifest and not as a shortcut.

**agobert** · 18 Jan 2013, 2:35 AM

Hey,

I can confirm the issue you were pointing out (which is also pretty annoying, but independent of the cache.manifest). The issue I am having, however, is a different one (hence I also get it using iOS 5) that only occurs when using the cache.manifest. Perhaps it's something I'm doing wrong when loading the stores, but I can't see my mistake.

**agobert** · 30 Jan 2013, 3:13 AM

You can reproduce the authentication issue with a sample app generated by Sencha Command 3.

My model:

Code:

Ext.define('HttpsBug.model.MyModel', {
    extend : 'Ext.data.Model',
    config : {
        fields : [{
            name : 'name',
            type : 'string'
        }],
        identifier : 'uuid'
    }
});

My store:

Code:

Ext.define('HttpsBug.store.MyStore', {
    extend: 'Ext.data.Store',
    config: {
        model: "HttpsBug.model.MyModel",
        storeId: "MyStore",
        proxy: {
            type: 'ajax',
            timeout: 2000,
            url: 'dummy.json',
            reader: {
                type: 'json',
                rootProperty: 'groups'
            }
        }
    }
});

My Main.js:

Code:

Ext.define('HttpsBug.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {
                title: 'Welcome',
                iconCls: 'home',


                styleHtmlContent: true,
                scrollable: true,


                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },


                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Get Started',
                iconCls: 'action',


                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

My app.js:

Code:

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'HttpsBug': 'app'
});
//</debug>


Ext.application({
    name: 'HttpsBug',


    requires: [
        'Ext.MessageBox',
    'Ext.data.identifier.Uuid'
    ],


    views: ['Main'],
    models : ['HttpsBug.model.MyModel'],
    stores : ['HttpsBug.store.MyStore'],
    
    launch: function() {
        // Initialize the main view
        Ext.Viewport.add(Ext.create('HttpsBug.view.Main'));


    var store = Ext.getStore('MyStore');
    store.load(function(records, operation, success) {
        if (success) {
            Ext.Msg.alert('Loaded', 'Store loaded');
        }
    }
    );
    }
});

My index.html:

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>HttpsBug</title>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
</head>
<body>
</body>
</html>

My app.json:

Code:

{
    "name": "HttpsBug",
    "indexHtmlPath": "index.html",
    "url": "http://127.0.0.1:8080/HttpsBug",
    "js": [
        {
            "path": "touch/sencha-touch.js"
        },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
            "update": "delta"
        }
    ],
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],
    "appCache": {
        "cache": [
            "index.html"
        ],
        "network": [
            "*"
        ],
        "fallback": []
    },
    "resources": [
    ],
    "ignore": [
        "\.svn$"
    ],
    "archivePath": "archive",
    "buildPaths": {
        "testing": "build/testing",
        "production": "build/production",
        "package": "build/package",
        "native": "build/native"
    },
    "buildOptions": {
        "product": "touch",
        "minVersion": 3,
        "debug": false,
        "logger": false
    },
    "id": "1098ac82-556f-4f1c-9363-b43ac8c10a24"
}

To reproduce, build using the production environment:

Code:

sencha app build production

Using the standard Safari browser on iOS (reproducable both, on iOS 5.x and 6.x) open the page via a https connection using basic authentication. The resulting Apache log:

Code:

<SERVER> - - [30/Jan/2013:11:45:09 +0100] "GET /<PATH> HTTP/1.1" 401 483 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:20 +0100] "GET /<PATH> HTTP/1.1" 301 311 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:20 +0100] "GET /<PATH>/ HTTP/1.1" 200 5179 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:21 +0100] "GET /<PATH>/app.json?1359542723269 HTTP/1.1" 200 290 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:21 +0100] "GET /<PATH>/cache.appcache HTTP/1.1" 200 94 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:21 +0100] "GET /<PATH>/resources/css/app.css?1359542723466 HTTP/1.1" 200 212323 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:25 +0100] "GET /<PATH>/app.js?1359542723467 HTTP/1.1" 200 452182 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:26 +0100] "GET /<PATH>/index.html HTTP/1.1" 200 5179 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:26 +0100] "GET /<PATH>/dummy.json?_dc=1359542728948&page=1&start=0&limit=25 HTTP/1.1" 200 515 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"
<SERVER> - <USER> [30/Jan/2013:11:45:26 +0100] "GET /<PATH>/app.json?1359542728959 HTTP/1.1" 200 290 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B142 Safari/8536.25"

I substituted IP addresses, usernames and servernames. Everything works as it should, GET request, authentication, and then the requests for the files, and finally the request to the json file loaded by the store.

If you add the page to the homescreen and open it the first time, you get:

Code:

<SERVER> - - [30/Jan/2013:11:46:00 +0100] "GET /<PATH>/ HTTP/1.1" 401 483 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - <USER> [30/Jan/2013:11:46:09 +0100] "GET /<PATH>/ HTTP/1.1" 200 5179 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - <USER> [30/Jan/2013:11:46:10 +0100] "GET /<PATH>/app.json?1359542772517 HTTP/1.1" 200 290 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - <USER> [30/Jan/2013:11:46:10 +0100] "GET /<PATH>/cache.appcache HTTP/1.1" 200 94 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - - [30/Jan/2013:11:46:10 +0100] "GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:11 +0100] "GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - <USER> [30/Jan/2013:11:46:11 +0100] "GET /<PATH>/resources/css/app.css?1359542772700 HTTP/1.1" 200 212323 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - - [30/Jan/2013:11:46:11 +0100] "GET /apple-touch-icon-114x114.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:12 +0100] "GET /apple-touch-icon-114x114.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:12 +0100] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - <USER> [30/Jan/2013:11:46:12 +0100] "GET /<PATH>/app.js?1359542772702 HTTP/1.1" 200 452182 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - <USER> [30/Jan/2013:11:46:13 +0100] "GET /<PATH>/index.html HTTP/1.1" 200 5179 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - - [30/Jan/2013:11:46:13 +0100] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:13 +0100] "GET /apple-touch-icon.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:14 +0100] "GET /apple-touch-icon.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - <USER> [30/Jan/2013:11:46:14 +0100] "GET /<PATH>/dummy.json?_dc=1359542776441&page=1&start=0&limit=25 HTTP/1.1" 200 515 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - <USER> [30/Jan/2013:11:46:14 +0100] "GET /<PATH>/app.json?1359542776454 HTTP/1.1" 200 290 "https://<SERVER>/<PATH>/" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_1 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B142"
<SERVER> - - [30/Jan/2013:11:46:14 +0100] "GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:15 +0100] "GET /<PATH>/undefined HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:15 +0100] "GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:16 +0100] "GET /apple-touch-icon-114x114.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:16 +0100] "GET /<PATH>/undefined HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:16 +0100] "GET /apple-touch-icon-114x114.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:16 +0100] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:16 +0100] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:17 +0100] "GET /apple-touch-icon.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"
<SERVER> - - [30/Jan/2013:11:46:17 +0100] "GET /apple-touch-icon.png HTTP/1.1" 401 483 "-" "Web/1.0 CFNetwork/609.1.4 Darwin/13.0.0"

This is almost identical to the log that results from a request using Safari but some images are also requested.

To this point, everything works as expected, however, when you open the app a second time from the homescreen the log won't show any entry, which means it tries to load a cached version and does not attempt to reconnect to the server.

Since this behaviour is reproducable in a very simple setting, should I perhaps file a bug report? Or is there anything wrong with my setup?

It would really help if this problem could be solved, since our users cannot profit from caching as it is.

Thread: Forcing re-authentication after offline usage on iOS devices?

Thread Tools

Search Thread

Display

Forcing re-authentication after offline usage on iOS devices?

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News