npm package: @kineticiq/credentials-provider
Description: Context provider and hook for accessing web credentials.
Author: yondav
Latest version: 1.0.6

<a id="readme-top"></a>

[![License](./kinetic-badge.svg)](https://kineticiq.com)

  <div align="center">
  <h1 align="center">@kineticiq/credentials-provider  <a href="./CHANGELOG.md"><span id="version" style="font-size: 12px; color: grey;">1.0.6</span></a></h1>

  </div>
  <br />

  <!-- TABLE OF CONTENTS -->
  <details>
    <summary style="font-size: 18px;">Table of Contents</summary>
    <ol>
      <li>
        <a href="#about-the-project">About The Project</a>
      </li>
      <li>
        <a href="#exports">Exports</a>
      </li>
      <li>
        <a href="#usage">Usage</a>
      </li>
      <li>
        <a href="#contributing">Contributing</a>
      </li>
    </ol>
  </details>
  <br/>

  <!-- ABOUT THE PROJECT -->

## About The Project
The credentials provider offers a `React Context` object set to manage the web credentials for a given application.


## Exports

#### WebCredentialsState `enum`
``` typescript
enum WebCredentialsState {
  LOADING = 'loading',
  SUCCESS = 'success',
  FAIL = 'fail'
}
```

#### WebCredentials `interface`
```typescript
interface WebCredentials {
  application: string;
  api: {
    uri: string;
    key: string;
  };
  bi?: {
    uri: string;
    key: Nullable<string>;
  };
}
```

#### WebCredentialsContext `interface`
```typescript
interface WebCredentialsContext {
  data: Nullable<WebCredentials>;
  error: Nullable<Error>;
  state: WebCredentialsState;
}
```

#### CredentialsContext
The context object that carries an applications web credentials. The context object takes on the shape of `WebCredentialsContext`

#### CredentialsProvider
The context provider set to wrap the portion of the application that needs access to `CredentialsContext`.

```typescript
function CredentialsProvider({ children }: {
  children: ReactNode;
}): JSX.Element
```

#### useCredentials

The package exports a `provider` and a `hook` for consuming credentials in a consistent way throughout the Hive 6 ecosystem.
​
Additionally, the package offers a `bin` script which runs a questionnaire in the terminal to assemble a json file, name it properly and write it to the public directory of a given application.

  <p align="right">(<a href="#readme-top">back to top</a>)</p>

  <!-- USAGE EXAMPLES -->

## Usage

```bash
npm i @kineticiq/credentials-provider
```

```typescript
import CredentialsProvider, { useCredentials } from '@kineticiq/credentials-provider';
import { useEffect } from 'react';

function ConsumingComponent() {
  const { data, error, state } = useCredentials();

  useEffect( () => {
    // use credentials from data variable to make api call if the state is successful.
  }, [ data ] )

  return (
    <div>
      <h1>Status: {state}</h1>
      {error && (
        <div>
          <h2>Name: {error.name}</h2>
          <p>{error.message}</p>
        </div>
      )}
      {data && (
        <div>
          <h1>Application: {data.application}</h1>
        </div>
      )}
    </div>
  )
}

function App() {
  return (
    <CredentialsProvider>
      <ConsumingComponent/>
    </CredentialsProvider>
  )
}
```

  <p align="right">(<a href="#readme-top">back to top</a>)</p>

  <!-- CONTRIBUTING -->

## Contributing

See [contribution guidelines](./.github/CONTRIBUTING.md)

---

<div align="center">
  <p id="copyright" style="color: grey;">&#169; kineticiq 2023</p>
</div>