Vault-auth-component NPM

Vault Auth Component

Vault Auth Component is a library for dealing with vault-fashioned authentication

Installation

Use a nodejs package manager to install Vault Auth Component.

# npm
npm i vault-auth-component

# yarn
yarn add vault-auth-component

# pnpm
pnpm add vault-auth-component

Usage

as a React component

/** @jsxImportSource theme-ui */
// my-component.tsx|jsx

import {
  VaultAuthComponent,
  theme
  } from "vault-auth-component";
import { ThemeUIProvider } from "theme-ui";

export default function MyComponent() {
  // handle click each case
  function click(value: Case) {
    console.log(value)
  }
  // Keypad data coming from external ressource
  const shuffleArray = [
    [ 0,1,2 ],
    [ 3,4,5 ],
    [ 6,7,8 ],
  ]

  // User vault pass
  const vaultPass = [ 1,5,7,9 ]

  // Use theme-ui under the hood
  return <ThemeUIProvider theme={theme}>
  <VaultAuthComponent
    shuffleArray={shuffleArray}
    onCaseClick={click}
    vaultPass={vaultPass}
  />
  </ThemeUIProvider>
}

VaultAuthComponent

args	status	description
shuffleArray	mandatory	visual keypad
vaultPass	mandatory	user password
onCaseClick	optional	triggered when user click a Case
onDeleteClick	optional	triggered when user click the Delete Button
SubmitButton	optional	SubmitButton custom component
DeleteButton	optional	DeleteButton custom component
config	optional	additional config
config.keypadAccess	default=false	authorize keyboard events
config.submitButton	default=false	show submit button

as a library

import { lib } from 'vault-auth-component'

const {
  ShuffleArraySchema,
  ValueInputSchema,
  VaultValidate,
} = lib

/* shuffleArray data validation */
const shuffleArray = ShuffleArraySchema.safeParse(
  [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ]
)
if (!shuffleArray.success) {
  // throw error
  console.error(shuffleArray.error)
}
// shuffleArray is validated, do anything with it

/* ValueInputSchema data validation */
const valueInput = ValueInputSchema.safeParse([
  1, 2, 3, 4,
])
if (!valueInput.success) {
  //throw error
  console.error(valueInput.error)
}
// valueInput is validated, do anything with it

/* Is vaultPass contained in shuffleArray */
const contained = VaultValidate({
  shuffleArray,
  vaultPass: valueInput,
})
if (!contained) {
  //throw error
  console.error(
    'vaultPass is not contained in shuffleArray'
  )
}

// everything’s fine, do anything with it