Offline-first приложение с Hoodie & React. Часть вторая: авторизация

Вот инструкция которой пользовался я. Однако, база постоянно падала пока я не удалил /etc/init.d/coucdb и не отдал её под надзор supervisord-а, вот конфиг последнего:

[program:couchdb]
user=couchdb
environment=HOME=/usr/local/var/lib/couchdb
command=/usr/local/bin/couchdb
autorestart=true
stdout_logfile=NONE
stderr_logfile=NONE

import React from 'react'
import AppBar from 'material-ui/AppBar'
import FlatButton from 'material-ui/FlatButton'
import IconButton from 'material-ui/IconButton'
import IconMenu from 'material-ui/IconMenu'
import MenuItem from 'material-ui/MenuItem'
import KeyIcon from 'material-ui/svg-icons/communication/vpn-key'
import AccountIcon from 'material-ui/svg-icons/action/account-circle'

import AuthDialog from './AuthDialog'

export default class NavBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isSignedIn: this.props.account.isSignedIn(),
      openedDialog: null
    }
  }

  signOutCallback = () => this.setState({isSignedIn: false})
  signInCallback = () => this.setState({isSignedIn: true})

  componentDidMount() {
    this.props.account.on('signout', this.signOutCallback)
    this.props.account.on('signin', this.signInCallback)
  }

  componentWillUnmount() {
    this.props.account.on('signout', this.signOutCallback)
    this.props.account.on('signin', this.signInCallback)
  }

  render () {
    let authMenu;

    if (this.state.isSignedIn) {
      authMenu = (
        <IconMenu
          iconButtonElement={<IconButton><AccountIcon /></IconButton>}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        >
          <MenuItem primaryText="Sign Out" onTouchTap={() => this.props.account.signOut()} />
        </IconMenu>
      )
    } else {
      authMenu = (
        <IconMenu
          iconButtonElement={<IconButton><KeyIcon /></IconButton>}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        >
          <MenuItem primaryText="Sign Up" onTouchTap={() => this.setState({openedDialog: 'signup'})} />
          <MenuItem primaryText="Sign In" onTouchTap={() => this.setState({openedDialog: 'signin'})} />
        </IconMenu>
      )
    }

    return (
      <div>
        <AppBar
          title="Action Loop"
          showMenuIconButton={false}
          iconElementRight={authMenu}
        />
        <AuthDialog
          account={this.props.account}
          action={this.state.openedDialog}
          handleClose={() => this.setState({openedDialog: null})}
        />
      </div>
    )
  }
}

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';

export default class AuthDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

  handleConfirm = () => {
    const account = this.props.account;
    const username = this.state.username.trim();
    const password = this.state.password.trim();

    if (!username || !password) {
      return;
    }

    if (this.props.action == 'signup') {
      account.signUp({username, password})
        .then(() => {
          return account.signIn({username, password})
        })
        .catch(console.error)
    } else {
      account.signIn({username, password})
        .catch(console.error)
    }
    this.props.handleClose();
    this.clearState();
  }

  handleCancel = () => {
    this.props.handleClose();
    this.clearState();
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.handleConfirm();
  }

  clearState = () => {
    this.setState({
      username: '',
      password: ''
    })
  }

  render () {
    const buttons = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleCancel}
      />,
      <FlatButton
        label="Submit"
        type="submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleConfirm}
      />
    ];

    return (
      <div>
        <Dialog
          title={this.props.action == 'signup' ? 'Sign Up' : 'Sign In'}
          actions={buttons}
          modal={false}
          open={this.props.action !== null}
          onRequestClose={this.handleCancel}
          contentStyle={{maxWidth: 400}}
        >
          <form onSubmit={this.handleSubmit}>
            <TextField
              name="username"
              floatingLabelText="Username"
              onChange={(e) => this.setState({username: e.target.value})}
            />
            <TextField
              name="password"
              floatingLabelText="Password"
              onChange={(e) => this.setState({password: e.target.value})}
            />
          </form>
        </Dialog>
      </div>
    );
  }
}