PouchDB + Superlogin + AngularJS 2

Question

I am currently trying to write a CouchApp based on AngularJS 2. The data should obviously get stored in a CouchDB. The web app should get the data out of the DB using PouchDB. For authentication I thought about using Superlogin.

Unfortunately I cannot figure out how to use PouchDB within ng2 and employ Superlogin for authentication. Furthermore, I am not even sure if it is possible to do all that without having a node.js server.

Any help/advice will be appreciated. Thank you.

Answer 1

I've just created the stack you mentioned. Is working perfectly, I'm really impressed.

First I've followed this tutorial (It's ionic2 but the angular2 logic is exactly the same) :

Offline Syncing in Ionic 2 with PouchDB & CouchDB

Once this is working you can install superlogin following their Github repo

Superlogin has to be installed locally for development and in a cloud server for production use. My instruction assume that you have installed it locally.

Once installed and tested like in the superlogin repo, you have to add to your angular2 project the superlogin-client library.

I had some problems to plug superlogin-client library to angular2 project but I've found a way with require :

npm install typings --global

And

typings install dt~require --save --global

Then in the todos provider from Ionic2 tutorial you add this code () :

var config = {
  // The base URL for the SuperLogin routes with leading and trailing slashes (defaults to '/auth/')
  baseUrl: 'http://localhost:3000/auth/',
  // A list of API endpoints to automatically add the Authorization header to
  // By default the host the browser is pointed to will be added automatically
  endpoints: ["localhost:3000"],
  // Set this to true if you do not want the URL bar host automatically added to the list
  //noDefaultEndpoint: false,
  // Where to save your session token: localStorage ('local') or sessionStorage ('session'), default: 'local'
  storage: 'local',
  // The authentication providers that are supported by your SuperLogin host
  providers: ['facebook', 'twitter'],
  // Sets when to check if the session is expired. 'stateChange', 'startup' or nothing.
  // 'stateChange' checks every time $stateChangeStart or $routeChangeStart is fired
  // 'startup' checks just on app startup. If this is blank it will never check.
  checkExpired: 'stateChange',
  // A float that determines the percentage of a session duration, after which SuperLogin will automatically refresh the
  // token. For example if a token was issued at 1pm and expires at 2pm, and the threshold is 0.5, the token will
  // automatically refresh after 1:30pm. When authenticated, the token expiration is automatically checked on every
  // request. You can do this manually by calling superlogin.checkRefresh(). Default: 0.5
  refreshThreshold: 0.5
};

var superlogin = require('superlogin-client').default;
superlogin.configure(config)

Tada Finally you'll be able to user superlogin methods in your angular2 project. I hope I don't miss anything.

PS. One thing I've struggled with a bit is superlogin config, you have to know that username doesn't like capital letters!!! I was becoming MAD, my user was created but impossible to connect with its username...

If you need to install pouchdb plugins : Check my post

Good luck !

Answer 2

In my experiment,I put the config in the data provider. However, the data provider code is called only after login becomes successful. I have errors: "usernameField undefined"

After moving the config into the login constructor, the problem is gone.