Dropbox datastores in a Cordova app

Apache Cordova lets developers build cross-platform mobile apps with HTML, CSS, and JavaScript. For teams that also use Dropbox datastores, the two can be combined with very little extra work: the JavaScript Datastores SDK runs as-is inside a Cordova project, with one required change. The library needs to be pointed at Cordova's own "auth driver," which takes a single line of code.

A minimal port of the tasks sample

To demonstrate the integration, the official tasks example that ships with the JavaScript SDK was adapted for Cordova. The final code is published in the cordova-datastores-example repository on GitHub. Aside from a <meta name="viewport"> tag and a few CSS tweaks, the UI was left untouched — this was an exercise in making the underlying code run, not redesigning the interface for mobile.

The auth driver swap

The original sample relies on the default redirect auth driver, which reloads the page after authorization completes. That flow works when authorization is checked only on page load, but it's not suited for Cordova. Switching to the Cordova driver addresses that:

client.authDriver(new Dropbox.AuthDriver.Cordova());

Refactoring the auth check

Because the Cordova driver (and other non-redirect drivers, such as pop-up auth) doesn't reload the page, the auth code had to be restructured. Instead of checking only once on page load, the new code handles authorization through a driver-agnostic flow:

function auth_callback() {
    if (client.isAuthenticated()) { ... }
    else { ... }
}
 
$('#loginButton').click(function (e) {
    e.preventDefault();
    // Start the OAuth authorization process.
    client.authenticate(auth_callback);
});
 
// Try to finish OAuth authorization.
client.authenticate({ interactive: false }, auth_callback);

This version is driver-independent, so it works with the redirect driver as well as Cordova's and any other auth driver you might plug in.

Getting the sample running

Full source is on GitHub at github.com/dropbox/cordova-datastores-example. To use it, create a new Cordova project and clone the repository into the www directory — the README in the repo contains the complete setup steps. Issues and pull requests are welcome.

Note: The Sync and Datastore SDK has been deprecated.