@larva.io/webcomponents-cognito-login

v5.0.2

Published

a month ago

Fentrica Login WebComponents

0High
0Medium
0Low

Larva.io Cognito Login Web Components

A complete authentication UI component library for AWS Cognito, built with StencilJS. Provides ready-to-use login, password recovery, and user management components with support for vanilla JavaScript, React, and Vue.

Features

Full AWS Cognito Integration - Complete support for Cognito authentication flows (SRP, password auth, custom auth)
Multiple Authentication Types - Support for username, email, phone number, or flexible "any" input
Password Recovery - Built-in forgot password and password reset flows
Two-Factor Authentication - SMS and TOTP verification support
Remember Me - Persistent login sessions with configurable storage
Framework Support - Works with vanilla JavaScript, React, and Vue
Customizable - Extensive theming through CSS variables and configurable text labels
Responsive - Mobile-friendly UI components
TypeScript - Full TypeScript support with type definitions
Passwordless Auth - Support for custom passwordless authentication flows

Installation

NPM

npm install @larva.io/webcomponents-cognito-login

CDN (Vanilla JavaScript)

<script type="module" src="https://unpkg.com/@larva.io/webcomponents-cognito-login/dist/larva/larva.esm.js"></script>

Usage

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/@larva.io/webcomponents-cognito-login/dist/larva/larva.esm.js"></script>
</head>
<body>
  <!-- Configure AWS Cognito -->
  <lar-cognito-config
    cognito-region="us-east-1"
    cognito-pool-id="us-east-1_XXXXXXXXX"
    cognito-client-id="XXXXXXXXXXXXXXXXXXXXXXXXXX"
    storage-type="local"
  ></lar-cognito-config>

  <!-- Login Component -->
  <lar-cognito-login
    cognito-username-attribute="email"
    show-remember-me="true"
  ></lar-cognito-login>

  <script>
    const loginComponent = document.querySelector('lar-cognito-login');
    const configComponent = document.querySelector('lar-cognito-config');

    // Listen for login events
    loginComponent.addEventListener('loginDone', (event) => {
      console.log('Login successful!', event.detail);
    });

    loginComponent.addEventListener('loginError', (event) => {
      console.error('Login failed:', event.detail);
    });

    // Get access token
    configComponent.getAccessToken().then(token => {
      console.log('Access token:', token);
    });

    // Logout
    function logout() {
      configComponent.logout().then(() => {
        console.log('Logged out');
      });
    }
  </script>
</body>
</html>

React

npm install @larva.io/webcomponents-cognito-login

import React from 'react';
import { LarCognitoConfig, LarCognitoLogin } from '@larva.io/webcomponents-cognito-login/react';

function App() {
  const configRef = React.useRef<HTMLLarCognitoConfigElement>(null);

  const handleLoginDone = (event: CustomEvent<string>) => {
    console.log('Login successful!', event.detail);
  };

  const handleLoginError = (event: CustomEvent<string>) => {
    console.error('Login failed:', event.detail);
  };

  const handleLogout = async () => {
    await configRef.current?.logout();
  };

  const getToken = async () => {
    const token = await configRef.current?.getAccessToken();
    console.log('Access token:', token);
  };

  return (
    <div>
      <LarCognitoConfig
        ref={configRef}
        cognitoRegion="us-east-1"
        cognitoPoolId="us-east-1_XXXXXXXXX"
        cognitoClientId="XXXXXXXXXXXXXXXXXXXXXXXXXX"
        storageType="local"
      />

      <LarCognitoLogin
        cognitoUsernameAttribute="email"
        showRememberMe={true}
        onLoginDone={handleLoginDone}
        onLoginError={handleLoginError}
      />

      <button onClick={handleLogout}>Logout</button>
      <button onClick={getToken}>Get Token</button>
    </div>
  );
}

export default App;

Vue

npm install @larva.io/webcomponents-cognito-login

<template>
  <div>
    <lar-cognito-config
      ref="configRef"
      cognito-region="us-east-1"
      cognito-pool-id="us-east-1_XXXXXXXXX"
      cognito-client-id="XXXXXXXXXXXXXXXXXXXXXXXXXX"
      storage-type="local"
    />

    <lar-cognito-login
      cognito-username-attribute="email"
      :show-remember-me="true"
      @loginDone="handleLoginDone"
      @loginError="handleLoginError"
    />

    <button @click="handleLogout">Logout</button>
    <button @click="getToken">Get Token</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { LarCognitoConfig, LarCognitoLogin } from '@larva.io/webcomponents-cognito-login/vue';

const configRef = ref<typeof LarCognitoConfig | null>(null);

const handleLoginDone = (event: CustomEvent<string>) => {
  console.log('Login successful!', event.detail);
};

const handleLoginError = (event: CustomEvent<string>) => {
  console.error('Login failed:', event.detail);
};

const handleLogout = async () => {
  await configRef.value?.logout();
};

const getToken = async () => {
  const token = await configRef.value?.getAccessToken();
  console.log('Access token:', token);
};
</script>

Components

Core Components

`<lar-cognito-config>`

Configuration component for AWS Cognito settings. Must be included once in your app.

Properties:

cognito-region - AWS region (e.g., "us-east-1")
cognito-pool-id - Cognito User Pool ID
cognito-client-id - Cognito App Client ID
storage-type - Storage type: "local" or "session" (default: "session")

Methods:

getAccessToken() - Get the current access token
logout(global?) - Logout the user
changePassword(oldPassword, newPassword) - Change user password
setStorage(storage) - Set custom storage implementation

Events:

logoutDone - Emitted when logout completes

`<lar-cognito-login>`

Complete login form with username/email/phone input and password.

Properties:

cognito-username-attribute - Input type: "any" | "email" | "phone" | "username" (default: "any")
auth-flow-type - Authentication flow: "USER_SRP_AUTH" | "USER_PASSWORD_AUTH" | "CUSTOM_WITH_SRP" | "CUSTOM_WITHOUT_SRP"
show-remember-me - Show remember me checkbox (default: false)
remember-me-value - Default remember me value (default: true)
show-forgot-password-link - Show forgot password link (default: true)
disable-username - Disable username field (default: false)
username - Pre-fill username
show-back - Show back button (default: false)

Customizable Text Properties:

username-text, password-text, login-text, forget-password-text, remember-me-text, etc.

Events:

loginDone - Login successful (detail: username)
loginError - Login failed (detail: error message)
loading - Loading state changed (detail: boolean)
rememberMe - Remember me changed (detail: boolean)
back - Back button clicked

`<lar-cognito-username-input>`

Smart username input that adapts to email, phone, or username input with country code selection for phone numbers.

Properties:

type - Input type: "any" | "email" | "phone" | "username" (default: "any")
value - Input value
label - Input label
disabled - Disabled state

Events:

usernameInput - Value changed (detail: username string)

`<lar-cognito-password-recovery>`

Password recovery flow component.

Properties:

cognito-username-attribute - Username attribute type
Various text customization properties

Events:

done - Recovery completed
error - Recovery error
back - Back button clicked

UI Components

`<lar-cognito-button>`

Styled button component.

Properties:

color - Button color: "primary" | "secondary" | "success" | "danger" | "warning" | "light" | "dark" | "medium" | "tertiary"
type - Button type: "button" | "submit" | "reset"
disabled - Disabled state

`<lar-cognito-input>`

Styled input field component.

Properties:

type - Input type (text, email, tel, password, etc.)
label - Input label
value - Input value
autocomplete - Autocomplete attribute
disabled - Disabled state
label-position - Label position: "stacked" | "floating" | "fixed"

`<lar-cognito-flag-icon>`

Country flag icon component (bundled SVGs).

Properties:

iso - ISO country code (ee, fi, lv, lt, dk, se, pl, ru, ch, il)
squared - Use 1:1 aspect ratio (default: false, uses 4:3)

`<lar-cognito-icon>`

Icon component (bundled SVGs).

Properties:

icon - Icon name: "at" | "globe"

Configuration

Custom Storage

You can provide custom storage implementation:

class CustomStorage {
  setItem(key, value) { /* ... */ }
  getItem(key) { /* ... */ }
  removeItem(key) { /* ... */ }
  clear() { /* ... */ }
  async sync() { /* ... */ }
}

const storage = new CustomStorage();
const config = document.querySelector('lar-cognito-config');
await config.setStorage(storage);

Theming

Customize appearance using CSS variables:

:root {
  /* Background colors */
  --lar-background-color: #FFFFFF;
  --lar-background-color-step-50: #f2f2f2;
  --lar-background-color-step-100: #e5e5e5;
  /* ... step-150 through step-1000 */

  /* Text colors */
  --lar-text-color: #000000;
  --lar-text-color-step-50: #0c0c0c;
  --lar-text-color-step-100: #191919;
  /* ... step-150 through step-1000 */

  /* Icon sizes */
  --lar-icon-size-small: 1rem;
}

Documentation

For detailed documentation, visit docs.fentrica.com

License

Attribution-NoDerivatives 4.0 International

Built With

StencilJS - Web Component Compiler
AWS Amplify - AWS Cognito Integration

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Larva.io Cognito Login Web Components

Features

Installation

NPM

CDN (Vanilla JavaScript)

Usage

Vanilla JavaScript / HTML

React

Vue

Components

Core Components

<lar-cognito-config>

<lar-cognito-login>

<lar-cognito-username-input>

<lar-cognito-password-recovery>

UI Components

<lar-cognito-button>

<lar-cognito-input>

<lar-cognito-flag-icon>

<lar-cognito-icon>

Configuration

Custom Storage

Theming

Documentation

License

Built With

`<lar-cognito-config>`

`<lar-cognito-login>`

`<lar-cognito-username-input>`

`<lar-cognito-password-recovery>`

`<lar-cognito-button>`

`<lar-cognito-input>`

`<lar-cognito-flag-icon>`

`<lar-cognito-icon>`