Olos Cognito Auth

O Olos Cognito Auth é um componente React que gerencia Tokens Cognito e gera Tokens para Aplicações Olos.

Como Instalar

Para instalar o componente, você pode utilizar o seguinte comando:

npm install @olostecnologia/olos-cognito-auth

Como Utilizar o Componente

Configuração

1. Importe o "provider" OlosCognitoAuthProvider e adicione o componente como pai da sua aplicação. A única propriedade que deve ser passada para o "provider" é um objeto de configuração.

import { OlosCognitoAuthProvider, IOlosCognitoAuth } from "@olostecnologia/olos-cognito-auth";

const config: IOlosCognitoAuth = {
  tenantId: conf.tenantId,
  access_key_id: conf.access_key_id,
  secret_access_key: conf.secret_access_key,
  appName: conf.appName,
  redirect_sign_in: conf.redirect_sign_in,
  redirect_sign_out: conf.redirect_sign_out,
  environment: conf.environment,
  locale: conf.locale,
};

<OlosCognitoAuthProvider configuration={config}>
  <App />
</OlosCognitoAuthProvider>

Como Renderizar o Formulário

Para renderizar o formulário, siga os passos abaixo:

1. Importe o componente OlosCognitoAuthForm.
2. Renderize o componente dentro do contexto de OlosCognitoAuthProvider.

import { OlosCognitoAuthForm } from '@olostecnologia/olos-cognito-auth';

<OlosCognitoAuthForm />

Como Ouvir os Eventos

1. Importe o hook useCognitoAuthEvents e aguarde os eventos de signIn, signOut e refreshToken. As informações sobre o Token Olos são retornadas nas respostas dos eventos.

import { useCognitoAuthEvents, CognitoAuthEvents } from "@olostecnologia/olos-cognito-auth";
import "@olostecnologia/olos-cognito-auth/src/Default.scss"; // Importe o SCSS aqui

useCognitoAuthEvents((response) => {
  const { event, data } = response;

  switch (event) {
    case CognitoAuthEvents.SIGN_IN:
      console.log('CognitoAuthEvents.SIGN_IN', data);
      break;

    case CognitoAuthEvents.SIGN_OUT:
      console.log('CognitoAuthEvents.SIGN_OUT', data);
      break;

    case CognitoAuthEvents.TOKEN_REFRESH:
      console.log('CognitoAuthEvents.TOKEN_REFRESH', data);
      break;
  }
});

Como Estilizar com styles.scss

Para estilizar o componente utilizando o arquivo styles.css, siga os passos abaixo:

1. Importe o arquivo styles.scss no seu projeto.

import "@olostecnologia/olos-cognito-auth/src/styles.scss";

Agora, o componente será estilizado de acordo com as definições do arquivo styles.css.

Função para Validação de Senha

A função validatePassword foi criada para avaliar a robustez de uma senha fornecida. Ela retorna um array de mensagens de validação, cada uma contendo uma string de mensagem, um booleano indicando se é uma mensagem de erro ou sucesso, um ícone representativo e um rótulo ARIA para acessibilidade.

Exemplo de Uso:

import { validatePassword } from './validation';

const senha = 'exemploSenha123';
const resultadosValidacao = validatePassword(senha);

// Exemplo de saída:
// [
//   { message: 'A senha tem pelo menos 8 caracteres', isError: false, icon: '✅', ariaLabel: 'check' },
//   { message: 'A senha contém pelo menos 1 número', isError: false, icon: '✅', ariaLabel: 'check' },
//   { message: 'A senha contém pelo menos 1 caractere especial', isError: false, icon: '✅', ariaLabel: 'check' },
//   { message: 'A senha contém pelo menos 1 letra maiúscula', isError: false, icon: '✅', ariaLabel: 'check' },
//   { message: 'A senha contém pelo menos 1 letra minúscula', isError: false, icon: '✅', ariaLabel: 'check' },
// ]

Utilizando customPasswordValidation em OlosCognitoAuthForm

O componente OlosCognitoAuthForm possui uma propriedade chamada customPasswordValidation que permite fornecer lógica personalizada de validação de senha. Essa propriedade recebe uma função que recebe a senha como parâmetro e retorna uma matriz de mensagens de validação.

Exemplo:

const myCustomValidation = (password: string): { message: string, isError: boolean, icon: string, ariaLabel: string }[] => {
  const messages = [];
  
  if (password.length < 10) {
    messages.push({ message: "A senha precisa conter 10 letras", isError: true, icon: '❌', ariaLabel: 'error' });
  } else {
    messages.push({ message: "A senha contém 10 letras", isError: false, icon: '✅', ariaLabel: 'check' });
  }
  return messages;
}

function App() {
  // ... (código existente)

  return (
    <div className="App">
      {!!cognitoAuthProviderConfig && !!eventEmitter && (
        <OlosCognitoAuthProvider configuration={cognitoAuthProviderConfig} eventEmitter={eventEmitter} >
          <OlosCognitoAuthForm  customPasswordValidation={myCustomValidation} useThirdParty={true}/>
        </OlosCognitoAuthProvider>
      )}
    </div>
  );
}

Neste exemplo, myCustomValidation é uma função que recebe uma senha como parâmetro e retorna uma matriz de mensagens de validação. Você pode personalizar esta função de acordo com os requisitos específicos de validação de senha.

Ao utilizar o componente OlosCognitoAuthForm, passe sua função de validação personalizada como valor para a propriedade customPasswordValidation. Isso permite que você implemente uma lógica de validação de senha adaptada às necessidades específicas de sua aplicação.