npm package: @sun-asterisk/tech-standard-reactjs-auth
Description: The module auth for Reactjs.
Author: ha.hao.minh@sun-asterisk.com
Latest version: 1.0.0

# React.js Auth Module

> The module auth for React.js.

[![NPM](https://img.shields.io/npm/v/tech-standard-reactjs-auth.svg)](https://www.npmjs.com/package/tech-standard-reactjs-auth) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## What is React.js Auth module ?

Authentication is an important aspect of any web application that involves user accounts and sensitive data. In ReactJS, there are several libraries and modules available that help you implement authentication in your application.

One such module is `React.js Auth Module` for ReactJS. This module provides a simple way to add user authentication to your React application. It follows industry-standard security practices like using JSON Web Tokens (JWTs), HTTPS, and cookies to ensure secure and reliable user authentication.

The authentication module for ReactJS provides a set of components and utilities that handle authentication-related tasks like `sign in`, `sign out`, `sign up`, and `refresh token`. With this module, you can easily integrate authentication into your React application and ensure that your users' data and privacy are protected.

## Documentation

Please read the [Wiki Documentation](https://github.com/sun-asterisk/tech-standard-reactjs-auth/wiki).

## Installation

Add the package `@sun-asterisk/tech-standard-reactjs-auth` dependency to your project:

- With `npm`:

```bash
npm install --save @sun-asterisk/tech-standard-reactjs-auth
```

- With `yarn`:

```bash
yarn add @sun-asterisk/tech-standard-reactjs-auth
```

## Usage

Here is example code for `loginFn`, `registerFn` and `logoutFn`

### `loginFn`

```jsx
import { useState } from 'react';
import { loginFn } from 'tech-standard-reactjs-auth';

export const SignInPage = () => {
  const [username, setUsername] = useState('');
  const [passwd, setPasswd] = useState('');

  return (
    <>
      Not signed in <br />
      <button onClick={() => loginFn({ username, passwd })}>Login</button>
    </>
  )
}
```

### `registerFn`
```jsx
import { useState } from 'react';
import { registerFn } from 'tech-standard-reactjs-auth';

export const SignOnPage = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [passwd, setPasswd] = useState('');

  return (
    <button onClick={() => registerFn({ username, email, passwd })}>Register</button>
  )
}
```

### `logoutFn`
```jsx
import { logoutFn } from 'tech-standard-reactjs-auth';

export const HomePage = () => {
  return (
    <button onClick={() => logoutFn()}>Logout</button>
  )
}
```

## How to contribute

### Create a issue on Github

- Step 1: Go to [repository](https://github.com/sun-asterisk/tech-standard-reactjs-auth), click on **issue** tab
<img width="1270" alt="Screen Shot 2023-03-07 at 14 43 13" src="https://user-images.githubusercontent.com/49388139/223356847-d856411d-8892-46d2-9d6e-9b12622fe411.png">

- Step 2: Choose **new issue** then depend on what kind of issue you have, chose create **bug** or request a **feature**

<img width="1397" alt="Screen Shot 2023-03-07 at 14 46 19" src="https://user-images.githubusercontent.com/49388139/223357537-e698d251-8f23-4b74-b325-3321442bd722.png">
<img width="1165" alt="Screen Shot 2023-03-07 at 14 46 54" src="https://user-images.githubusercontent.com/49388139/223357555-a6f1a4bb-ca8f-4473-bc6b-8b50446974db.png">

- Step 3: Fill data into template and click **Submit new issue**
<img width="1316" alt="Screen Shot 2023-03-07 at 14 48 13" src="https://user-images.githubusercontent.com/49388139/223357823-5eb6ccc1-edd2-470b-8fdc-cf5e34c69818.png">


### Create a pull request on Github

- Step 1: Go to [repository](https://github.com/sun-asterisk/tech-standard-reactjs-auth), click on **pull request** tab
<img width="1376" alt="Screen Shot 2023-03-07 at 14 49 17" src="https://user-images.githubusercontent.com/49388139/223358108-0cdbe063-a315-44af-be41-0407aa9ab45a.png">

- Step 2: Pull repository to local using git clone or download zip file.
<img width="1400" alt="Screen Shot 2023-02-20 at 21 03 25" src="https://user-images.githubusercontent.com/49388139/220128535-95647d35-5736-4756-ba5c-b55fb8495a15.png">

- Step 3: In your local, create new branch and add code that you want to contribute
<img width="925" alt="Screen Shot 2023-03-07 at 14 55 28" src="https://user-images.githubusercontent.com/49388139/223359367-d5681a84-7da6-4b63-862a-908e8efebced.png">

- Step 4: Add commit and push to correct remote (use **git remote -v** to check list remote)

- Step 5: Go to [repository](https://github.com/sun-asterisk/tech-standard-reactjs-auth), choose **compare & pull request**
<img width="1012" alt="Screen Shot 2023-03-07 at 14 58 52" src="https://user-images.githubusercontent.com/49388139/223360387-61244f3a-51e8-4889-acec-c1f3e2b34776.png">


- Step 6: Fill data in template and choose **Create pull request**
<img width="969" alt="Screen Shot 2023-03-07 at 15 00 13" src="https://user-images.githubusercontent.com/49388139/223360471-92cb10ed-5b0a-4acd-b2ea-0f8383865f15.png">

## License

[Apache2 License](./LICENSE) - Copyright (c) 2022, Sun*