Integration of Ionic and Phonegap enables the incorporation of an offline database system with secure authorization

Question

Integration of Ionic and Phonegap enables the incorporation of an offline database system with secure authorization

After creating a simple app using the ionic framework and integrating Firebase for database storage, I realized that offline capabilities were limited. While Firebase worked well for user authentication and data access rules, it didn't provide full offline storage in javascript. A recommendation to use CouchDB/PouchDB for offline storage and sync with a remote server seemed promising, but then I encountered an issue with user authorization.

I needed a solution that would offer offline database capabilities, authorization with Google, remote database syncing after authorization, and hassle-free hosting on a reliable server. The goal was to have guest users store data locally, while authenticated users had their data accessible on both local and remote databases for cross-device usage.

With the aim of finding a hosting service compatible with Ionic/AngularJS/Cordova that supported a remote and local database with synchronization, I began my search.

javascript angularjs database cordova ionic-framework

Answer 1

Answer №1

Why avoid MongoDB when it easily integrates with Express/Node.js through the npm mongoose? It's a popular and efficient way to store data, similar to firebase. For instance:

const Express = require('express'),
app = Express.router();
app.route('/api/auth/signup').post(users.signup);

An Example Schema:

const mongoose = require('mongoose'),
  Schema = mongoose.Schema

const UserSchema = new Schema({
  firstName: {
    type: String,
    trim: true,
    default: '',
    required: 'Please fill in your first name'//message given if you fail to provide the required field.
  },
  lastName: {
    type: String,
    trim: true,
    default: '',
    required: 'Please fill in your last name'
  },
  displayName: {
    type: String,
    trim: true
  },
  email: {
    type: String,
    unique: 'Email already exists. Sign In?',
    lowercase: true,
    trim: true,
    default: '',
    validate: [validateLocalStrategyEmail, 'Please fill a valid email address'],//create a custom Email Validation strategy
    required: 'Please enter a valid business Email'
  },
});

A Sample Controller:

exports.signup = function (req, res) {
  // For security reasons, we remove the roles from the req.body object
  delete req.body.roles;

  // Initialize user and add missing fields
  const user = new User(req.body);
  user.provider = 'local';
  user.displayName = user.firstName + ' ' + user.lastName;

  // Save the user details
  user.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      // Remove sensitive data before login
      user.password = undefined;
      user.salt = undefined;

      const jwtToken = authentication.signToken(user);
      res.json({ user: user, token: jwtToken });
    }
  });
};

You can find similar examples on MEAN.js Github. However, make sure to utilize LocalStorage and JSON web tokens for your ionic app to ensure compatibility with iPad/iPhone devices.

Answer 2

Why avoid MongoDB when it easily integrates with Express/Node.js through the npm mongoose? It's a popular and efficient way to store data, similar to firebase. For instance:

const Express = require('express'),
app = Express.router();
app.route('/api/auth/signup').post(users.signup);

An Example Schema:

const mongoose = require('mongoose'),
  Schema = mongoose.Schema

const UserSchema = new Schema({
  firstName: {
    type: String,
    trim: true,
    default: '',
    required: 'Please fill in your first name'//message given if you fail to provide the required field.
  },
  lastName: {
    type: String,
    trim: true,
    default: '',
    required: 'Please fill in your last name'
  },
  displayName: {
    type: String,
    trim: true
  },
  email: {
    type: String,
    unique: 'Email already exists. Sign In?',
    lowercase: true,
    trim: true,
    default: '',
    validate: [validateLocalStrategyEmail, 'Please fill a valid email address'],//create a custom Email Validation strategy
    required: 'Please enter a valid business Email'
  },
});

A Sample Controller:

exports.signup = function (req, res) {
  // For security reasons, we remove the roles from the req.body object
  delete req.body.roles;

  // Initialize user and add missing fields
  const user = new User(req.body);
  user.provider = 'local';
  user.displayName = user.firstName + ' ' + user.lastName;

  // Save the user details
  user.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      // Remove sensitive data before login
      user.password = undefined;
      user.salt = undefined;

      const jwtToken = authentication.signToken(user);
      res.json({ user: user, token: jwtToken });
    }
  });
};

You can find similar examples on MEAN.js Github. However, make sure to utilize LocalStorage and JSON web tokens for your ionic app to ensure compatibility with iPad/iPhone devices.

Answer 3

Answer №2

A great solution is to utilize PouchDB, a tool that seamlessly integrates with local storage systems (perfect for ionic/cordova) and can easily synchronize data with a remote couchdb server using just a few lines of code:

var localDB = new PouchDB('mylocaldb');
var remoteDB = new PouchDB('http://localhost:5984/myremotedb');
localDB.sync(remoteDB);

The challenge comes when dealing with the remote server authentication. CouchDB supports oauth by default, but on a per-database basis, requiring the creation of a separate database for each user, which can be quite complex. Explore npmjs.com for more resources on CouchDB.

Alternatively, you can protect your CouchDB using a node server like Express, implementing authentication in Express before filtering requests through.

This task is not straightforward, and services like Firebase come at a cost once usage increases. If server-side development isn't your forte, consider simpler solutions like meteor or hoodie.

Answer 4

A great solution is to utilize PouchDB, a tool that seamlessly integrates with local storage systems (perfect for ionic/cordova) and can easily synchronize data with a remote couchdb server using just a few lines of code:

var localDB = new PouchDB('mylocaldb');
var remoteDB = new PouchDB('http://localhost:5984/myremotedb');
localDB.sync(remoteDB);

The challenge comes when dealing with the remote server authentication. CouchDB supports oauth by default, but on a per-database basis, requiring the creation of a separate database for each user, which can be quite complex. Explore npmjs.com for more resources on CouchDB.

Alternatively, you can protect your CouchDB using a node server like Express, implementing authentication in Express before filtering requests through.

This task is not straightforward, and services like Firebase come at a cost once usage increases. If server-side development isn't your forte, consider simpler solutions like meteor or hoodie.

Integration of Ionic and Phonegap enables the incorporation of an offline database system with secure authorization

Answer №1

Answer №2

Similar questions

Steps to set up gapi-script authentication with next-auth in a Next.js application

Receiving the error message "Encountered SyntaxError: Unexpected token )" when using a custom directive

Can one monitor a Vuex module in real time?

Steps to making an overlapping sidebar with Bootstrap column

Importing Audio Using AJAX in HTML

The EJS template in an Express.js (Node.js) application is not updating to show recent modifications

The validity of the return statement in the ajax code is malfunctioning

What is the method for referencing an AngularJS Template within a JavaScript file that is supplied by a Grails plugin?

What is the best way to utilize ajax for uploading both a text field and a file simultaneously?

Using Angular's filter service within a controller

Instructions for sending a PNG or JPEG image in binary format from a React app to a Node.js server

Adjust the size of an event in the Angular Full Calendar with Chronofy, while utilizing constraints to control the drag and drop functionality

An array of tooltips linked to specific areas on an image using

Exploring SQL connections and their attributes across multiple Excel sheets using VBA

Unexpectedly, nextJS is facing difficulties resolving components

Can anyone explain why I am having trouble loading JavaScript files into a different HTML file?

Is there a way to verify if a user navigated to a specific route or URL using the back button?

Is there a live password verification tool available?

What is the best way to ensure that two objects collide with one another?

Tips for successfully retrieving a boolean value from an ASP.Net JavaScript AJAX request using a C# method