npm package: @mimoo/react-auth
Description: > The simplest way to add authentication to Mimoo React apps.
Latest version: 0.1.0

# Mimoo Auth &middot; [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> The simplest way to add authentication to Mimoo React apps.

A simple React component to facilitate authentication via AWS Cognito. Handles users, login forms, redirects, sharing state between components, etc.

## Installing / Getting started

This library is available as a NPM package, so you can install it as you would any other package:

```shell
$ yarn add @mimoo/react-auth
```

## Developing

### Built With

WIP

### Prerequisites

WIP

### Setting up Dev

You need to clone the project in order to start developing the project further:

```shell
$ git clone https://github.com/mimoo-tech/auth-web.git
$ cd auth-web/
```

After that you need to make sure you have `yarn` and `webpack` installed. Otherwise, you must read the following guides:

1. [Yarn](https://yarnpkg.com/pt-BR/docs/install)
2. [Webpack](https://webpack.js.org/guides/installation/)

To run the project locally and import the component into another project (which you created) the following steps must be followed (assuming **yourapp** and **@mimoo/react-auth** are sibling folders):

1. From the **@mimoo/react-auth** folder run the following commands:

```shell
$ yarn link --global-folder ../yourapp/node_modules/react
$ yarn start
```

2. And from the **yourapp** folder run the following commands:

```shell
$ yarn link "@mimoo/react-auth-web"
$ yarn start
```

> Note: if you have a duplicate react problem using hooks, [take a look at this link](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)

### Building

WIP

### Deploying / Publishing

### Build

Run the following command:

```shell
$ yarn build
```

#### Create an npm account

In order to publish an npm package, you will need an [npm](http://npmjs.org/signup) account, which makes sense. If you do not have one, go ahead and [create an account](http://npmjs.org/signup).

#### Login to npm

Once you have created your account, login using your account credentials:

```shell
$ npm login --scope=@mimoo
```

You should get a message similar to this:

```shell
$ npm login
$ Username: <your-username>
$ Password:
$ Email: (this IS public) <your-email>
$ Logged in as <your-username> on https://registry.npmjs.org/.
```

Needless to say that `<your-username>` and `<your-email>` will be your own username and email address.

#### Package version

You shouldn't have to worry about managing the version number manually. There is an npm command for bumping those numbers up:

```shell
$ npm version patch # 0.1.0 -> 0.1.1
$ npm version minor # 0.2.6 -> 0.3.0
$ npm version major # 2.1.4 -> 3.0.0
```

Check [Versioning](#versioning) and [npm version](https://docs.npmjs.com/cli/version.html) for more information.

#### Publish Now

Run the following command to publish this package:

```shell
$ npm publish --access public
```

## Versioning

We can maybe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [link to tags on this repository](/tags).

## Configuration

WIP

## Tests

WIP

## Style guide

WIP

## Api Reference

### Auth

| Props        | Type     | Default value | Description                                               |
| ------------ | -------- | ------------- | --------------------------------------------------------- |
| **onSubmit** | Function | `undefined`   | A callback that returns an object with status and values. |

### SignUp

| Props      | Type    | Default value | Description                                          |
| ---------- | ------- | ------------- | ---------------------------------------------------- |
| **show**   | Boolean | `false`       | When `true` the form will show the `sign up` button. |
| **fields** | Object  | `undefined`   | An object with all fields properties.                |

#### Field

| Props     | Type   | Description             |
| --------- | ------ | ----------------------- |
| **name**  | String | Field name.             |
| **label** | String | A label for this field. |
| **type**  | String | A type for this input.  |

A simple `sign up` process:

```javascript
import { SignUp } from '@mimoo/react-auth-web';

...

const fields = [{
    name: 'name',
    label: 'Seu nome',
    type: 'text'
}]

<SignUp fields={fields} />

...
```

WIP

## Examples

### Full form

A example with all fields and validation.

[![Edit Mimoo Auth Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/full-form-mj07m)

## Licensing

WIP