> For the complete documentation index, see [llms.txt](https://ftcoders.first-tech.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ftcoders.first-tech.com/first-tech-ttp-sdk-pt/login-e-autenticacao.md).

# Login e Autenticação

**Objetivo**

Esta seção define os requisitos mínimos para o fluxo de login e autenticação de dois fatores (2FA), garantindo um acesso seguro, claro e acessível ao ambiente de vendas, baseado nas melhores práticas de UX e nos padrões de proteção de dados.

**Diretrizes**&#x20;

* A estrutura de autenticação deve ser compatível com contextos offline (por exemplo, gerenciamento de reconexão, cache seguro), quando aplicável.
* Este fluxo deve estar em conformidade com as regulamentações de segurança exigidas para pagamentos por proximidade via NFC (por exemplo, PCI MPoC).

***

<figure><img src="/files/3NlECziXaLynqx6X4BEY" alt=""><figcaption></figcaption></figure>

## **Tela de Login com Campos Vazios**

### 01 - Campos de e-mail e senha

Devem aparecer vazios, com placeholders claros (ex.: <exemplo@email.com>, Senha123@).

{% hint style="success" %}
**Obrigatório:**\
O botão “Login” deve ser habilitado somente quando ambos os campos estiverem corretamente preenchidos.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Incluir um link “Esqueceu sua senha?” para recuperação.
{% endhint %}

***

## **Tela de Login com Credenciais Preenchidas**

### 02 - Botão “Login” (habilitado)

Deve estar visualmente destacado. Ao ser pressionado, inicia o envio de um código de verificação para o e-mail registrado.

{% hint style="success" %}
**Obrigatório:**\
Fornecer um feedback visual imediato ao pressionar o botão (ex.: animação de carregamento).
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Incluir um indicativo de confirmação (visual ou sonoro) após a tentativa de login.
{% endhint %}

***

## **Código de Autenticação de Dois Fatores (2FA)**

### 03 - Mensagem de informação de segurança

Deve informar ao usuário que um código de verificação foi enviado para seu e-mail, parcialmente mascarado (ex.: us\*\*\*\*@email.com).

### 04 - Campos para entrada do código (6 dígitos)

Devem suportar avanço automático ao digitar e fornecer feedback visual para cada dígito.

{% hint style="success" %}
**Obrigatório:**\
Exibir um temporizador regressivo para reenvio do código (ex.: “Reenviar código em 00:30”).
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Validar automaticamente o código assim que todos os dígitos forem inseridos.
{% endhint %}

***

## **Código Completamente Inserido**

### 05 - Código 2FA completo

O botão “Login” deve ser habilitado automaticamente assim que todos os dígitos forem validados.

{% hint style="success" %}
**Obrigatório:**\
Após a validação do código, o usuário deve ser redirecionado para o ambiente de vendas.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Utilizar transições visuais suaves para reforçar a autenticação bem-sucedida.
{% endhint %}

***

## **Acesso ao Ambiente de Vendas**

Exibir a tela inicial de vendas. Esta tela deve apresentar:

* Nome e foto do vendedor
* Barra de busca
* Lista de produtos com nome, categoria, preço e estoque
* Barra de navegação inferior com seções visíveis: Início, Carrinho, Cobrar, Usuário

{% hint style="success" %}
**Obrigatório:**\
A navegação deve estar acessível somente após a validação completa das credenciais e do código.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Personalizar esta tela com informações relevantes baseadas no perfil do vendedor.
{% endhint %}

> Cada componente e a experiência do usuário na tela de vendas serão discutidos em detalhes na próxima sessão.

***

## **Mensagens Obrigatórias**

* Quando o código estiver incorreto:

> Código inválido. Por favor, verifique o número enviado ao seu e-mail e tente novamente.

* Quando o código expirar:Código expirado. Por favor, solicite um novo para continuar.

> Código expirado. Por favor, solicite um novo para continuar.

***

## **Comportamentos Esperados**

* O aplicativo deve fornecer feedback visual e/ou sonoro em cada etapa.
* O botão “Login” deve respeitar a lógica de validação.
* A autenticação de dois fatores é obrigatória antes do acesso ao sistema de vendas.
* Dados sensíveis (e-mail, senha) devem ser tratados com mascaramento e criptografia, em conformidade com a LGPD e os padrões PCI.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ftcoders.first-tech.com/first-tech-ttp-sdk-pt/login-e-autenticacao.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
