@trans-stat/auth-components v0.1.1

@trans-stat/auth-components

Web Components built with FAST for easy user authentication UX.

NOTE: This package is still early in development. Expect breaking API changes often until the package reaches a stable 1.0.0 release.

NOTE: This library is meant to be used in conjuction with the backend package published from tas-security. While these frontend Web Components can be used without the backend package, they will work best as a fullstack solution.

installation

Before installing, you will need to configure npm to point the @trans-stat scope to the GitHub Packages registry.

With the CLI

npm config set @trans-stat:registry https://npm.pkg.github.com

With .npmrc

@trans-stat:registry=https://npm.pkg.github.com

After configuring the registry settings, install normally

npm

npm install @trans-stat/auth-components

yarn

yarn add @trans-stat/auth-components

Usage

Configuring vscode intellisense for Web Components

Add a .vscode/settings.json file to the root of your repository and set the html and css custom data paths to point to the auth-component's custom data files.

{
  "html.customData": [
    "node_modules/@trans-stat/auth-components/dist/html-custom-data.json"
  ],
  "css.customData": [
    "node_modules/@trans-stat/auth-components/dist/css-custom-data.json"
  ]
}

<mfa-card>

NOTE: This element is intended to be used with the @trans-stat/node-mfa package in the backend. These two packages create a fullstack wrapper for iValt's multifact authentication API 1. Define the component with the platform

import '@trans-stat/auth-components/mfa-card';

2. Add the element to your markup.

<mfa-card id="mfa-card"></mfa-card>

3. hook into the element to send its data to your backend.

import type { MFACard } from '@trans-stat/auth-components';

const mfaCard = document.getElementById('mfa-card') as MFACard;

/**

• The element provides two different hooks depending on your needs.
• The first hook is a callback property that the element calls when the submit button is clicked.
• The second hook is a custom changed event that gets emitted when the submit button is clicked.
• Both methods get passed the element's form data.
• How you handle the request to your backend and the resulting response is entirely up to you and your choice of frameworks. */

// Option 1. custom callback bioCard.callback = async (formData) => { const response = await fetch( '/my-app-mfa-endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) } ); }

// Option 2. event handler bioCard.addEventListener('changed', async (event: CustomEvent<{ mobileNumber: string }>) => { const response = await fetch( '/my-app-mfa-endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(event.detail) } ); });