npm package: @stanlemon/react-couchdb-authentication
Description: React component for authenticating against a CouchDB user db and syncing it locally with PouchDB.
Author: Stan Lemon
Latest version: 0.10.31
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# React CouchDB Authentication Component

[![npm version](https://badge.fury.io/js/%40stanlemon%2Freact-couchdb-authentication.svg)](https://badge.fury.io/js/%40stanlemon%2Freact-couchdb-authentication)

React component for streamlining user authentication against an [Apache CouchDB](http://couchdb.apache.org) instance.
If you're building a React application and want to let the _amazing_ CouchDB be your backend, you can
take advantage of CouchDB's userdb feature, and with this component streamline using CouchDB to sign up
and login users to a secure application.  Each user's database is replicated locally to a
[PouchDB](https://pouchdb.com) instance that you can use to wrok with documents.

## Getting Started

First add the component to your application. _You should also have React and PouchDB installed._

```shell
npm install --save @stanlemon/react-couchdb-authentication pouchdb react
```

You will need an instance of CouchDB. If you don't have one, [the CouchDB install docs will take care of you](https://docs.couchdb.org/en/stable/install/index.html).
In your CouchDB config you will need to enable `couch_user.enable` and `couch_user.delete_dbs`. You can do this through Fauxton, CouchDB's excellent UI or with the following commands:

```shell
curl -X PUT localhost:5984/_node/_local/_config/couch_peruser/enable -d "\"true\""
curl -X PUT localhost:5984/_node/_local/_config/couch_peruser/delete_dbs -d "\"true\""
```

Enabling these settings ensures that once a user signs up, their dedicated database is setup (and vice versa when their user is deleted).

You will also need to ensure that the __user_ database is created and can be written to by any user. Note that the security of this database changed in CouchDB 3, so it's not open by default anymore.

It is highly recommended that you setup a proxy to your couchdb instance so that your webapp and the instance can be accessed through the same domain. That is how the example app works.

## Example

The `<Authentication/>` component is easy to use, simply wrap your `<App />` and use the provided `<Login />` and `<SignUp />` components to get going. You can customize your login and signup views later.

```jsx
<Authentication
  url="http://localhost:5984"
  login={<Login />}
  signup={<SignUp />}
>
  <h1>Authenticated!</h1>
</Authentication>
```

_Want an easier way to see this in action?_ Clone the repository, and checkout the example folder. You can run `npm start` inside of it and see a fully functioning implementation of the components.

The `<Login />` and `<SignUp />` components are actually containers that provide some simple setters that are supplied to a view via the `component` property, which you can customize to look appropriate for your application.

## Troubleshooting

Most issues are due to CouchDB being misconfigured, or cookies already being set.  If you've pulled up Fauxton in your browser you will want to clear the cookies for your CouchDB instance before using this component.

## Debug

This component has a fair amount of logging that can give you better insight into it's behavior. To see that logging you can set `debug={true}` on the `<Authentication/>` component and everything will be logged out to the console. _Do not do this in production!_

## Building & Tooling

To get started, you can build the components using Typescript by simply doing:

```shell
  npm install
  npm run build
```

You can lint the source by doing:

```shell
  npm run lint
```

You can run tests by doing:

```shell
  npm test
```

_Tests require a working CouchDB instance._

## Typescript

If you use Typescript you may run into an issue with the PouchDB types conflicting with the Node types. You can fix this by adding the following to your package.json to override `@types/pouchdb-core` where the problem exists.

```json
{
  "devDependencies": {
    "@types/pouchdb": "^6.4.2",
    "@types/debug": "^4.1.12"
  },
  "overrides": {
    "@types/pouchdb-core": "npm:@stanlemon/types-pouchdb-core@^0.0.3"
  }
}
```