About The Project

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

Exports

WebCredentialsState enum

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

WebCredentials interface

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

WebCredentialsContext interface

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.

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.

Usage

npm i @kineticiq/credentials-provider

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>
  )
}

Contributing

See contribution guidelines