pouchdb-community / pouchdb-authentication

User authentication plugin for PouchDB and CouchDB.
Apache License 2.0
775 stars 118 forks source link

When using authentication, localDB.sync() results in an error (evaluating 'target.once') #241

Open jwheat opened 6 years ago

jwheat commented 6 years ago

Expected Behavior

After authenticating to a remote database, synching data to the local database should not report an error.

Current Behavior

I've copied some example authentication code and I can successfully authenticate using this module in a React Native application and dump the docs to the console. I would presume once I have a remoteDB connection, I should be able to sync data to the local database with the .sync() command. However when the following code block is present -

  this.localDB.sync(this.remoteDB, {
    live: true,
    retry: true
  });

I receive - TypeError: undefined is not an object (evaluating 'target.once')

I mixed it up a bit and tried this format as well -

  PouchDB.sync(this.remoteDB, this.localDB, {
    live: true,
    retry: true
  });

And the error changed a bit - TypeError: undefined is not an object (evaluating 'src.once')

If I connect to a non-authenticated database, the sync works, so I'm thinking it is something with this module, I could be wrong, unfortunately I don't know enough about what is happening to debug this.

Steps to Reproduce (for bugs)

The following code will reproduce the issue normal imports

import React, { Component } from "react";
import PouchDB from "pouchdb-react-native";
import PouchAuth from "pouchdb-authentication";
PouchDB.plugin(PouchAuth);

the function I call from my components constructor

function updatePouchDBFromRemote() {
  var user = { name: "server-username", password: "server-password" };
  var pouchOpts = { skipSetup: true };
  var ajaxOpts = {
    ajax: {
      headers: {
        Authorization: "Basic " + window.btoa(user.name + ":" + user.password)
      }
    }
  };

  this.remoteDb = new PouchDB("http://111.111.111.111:5984/c2017");
  this.remoteDb
    .login(user.name, user.password, ajaxOpts)
    .then(function() {
      return this.remoteDb.allDocs({ include_docs: true });
    })
    .then(function(docs) {
      console.log(docs);
    })
    .catch(function(error) {
      console.error(error);
    });

  this.localDB.sync(this.remoteDB)({
    live: true,
    retry: true
  });
}

Context

This is a react native application for conference attendees. The application connects to my management server in order to update and display the current list of sessions, with changes populating down to the app. This really only needs a one-way sync, and never pushes data back to my server. Without the ability to sync local data, nothing is displayed in the app, because those UI components are using the local database.

Your Environment