---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 83
titulo: "TELA A19 — AUTENTICAÇÃO (entrar · recuperar · criar conta) · **`estável`** (2026-08-23) · **fecha a CD-P5** · tela `05-html-de-referencia/telas/tela-autenticacao.html` v0.2 · instrumento `06-validacao/suites/suite-autenticacao.mjs` (**21 PASS · 0 FAIL · 0 [n/a]**)"
sequencia: 89 de 98
bytes_do_corpo: 7542
md5_do_corpo: 02c5f8a195ef1c6e639a6ca269c18a44
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 83. TELA A19 — AUTENTICAÇÃO (entrar · recuperar · criar conta) · **`estável`** (2026-08-23) · **fecha a CD-P5** · tela `05-html-de-referencia/telas/tela-autenticacao.html` v0.2 · instrumento `06-validacao/suites/suite-autenticacao.mjs` (**21 PASS · 0 FAIL · 0 [n/a]**)

> **O que é:** a primeira tela da F7.6 (ordem aprovada no consolidado de
> 2026-08-22: A19 → A20 → A17 → A18 → A14 → A13). Promovida por gate visual do
> Rafael em 2026-08-23 com UMA correção, verbatim: *"a tela de login deve ter o
> icone da seed no lugar do botao turquesa. fazendo essa correção, está
> aprovado"* — aplicada antes da promoção (ver AU-13). A tela **não inventa
> componente**: compõe o §66 (credenciais CD1–CD16), o §2/§3.5 (form-field e
> norma de senha), o §1 (botão), o §1.13/1.13-b (live region) e o gabarito A19
> da F7.1 (`seed-composicao.md` §3: um cartão centrado, coluna única, 420px
> máx, par sombra+anel; <600px vira largura total com calha mínima).
> **Leitura de referência:** `09-pesquisa/leitura-f76-bordas.md` (2026-08-22)
> — ClickUp público (login/forgot/signup, MEDIDO) + shadcn login-01 (MEDIDO,
> a stack do ERP). Onde a norma decide, a spec mede contra a norma (precedente
> do §66.0); a leitura serviu à COMPOSIÇÃO.

### 83.1 Contratos (a suíte mede todos por comportamento, nunca por regex)

- **AU-01** — `<form>` REAL por vista (4: entrar · recuperar · código · criar)
  e **nenhum botão de submit nasce desabilitado** (§2.6; o ClickUp nasce
  desabilitado a 1,4:1 de contraste e reprova nesta régua).
- **AU-02** — e-mail: `type=email` + `autocomplete=username` +
  `inputmode=email` + `autocapitalize=none` + `spellcheck=false` (CD2/§2.6) —
  nos TRÊS formulários que pedem e-mail.
- **AU-03** — senha de entrar = `current-password`; senha de criar =
  `new-password`; **nenhuma senha tem `maxlength`** (CD4). Código de
  verificação = `one-time-code` + `inputmode=numeric` + `pattern`/`maxlength`
  legítimos (CD11 — código tem forma fechada, o oposto da senha).
- **AU-04** — revelar senha é `button[type=button]` com
  `aria-pressed`/`aria-controls` (CD6), a visibilidade é ANUNCIADA na live
  region (CD7), o SUBMIT devolve a `type=password` (CD8) e a senha NASCE
  oculta (CD9).
- **AU-05** — todo input tem `<label for>` VISÍVEL (§2) — placeholder nunca é
  rótulo (defeito do vizinho, lido e rejeitado).
- **AU-06** — erro de CREDENCIAL: o container `role=alert` **existe no DOM
  vazio e oculto ANTES do conteúdo** (1.13-b) e a mensagem fala do PAR
  ("E-mail ou senha incorretos"), **nunca de qual metade errou** (CD13). Erro
  de FORMATO diz e aponta o campo (blur, B4; `aria-invalid` sempre com valor
  explícito, §2.9).
- **AU-07** — código em **UM campo**, nunca N caixinhas (CD10).
- **AU-08** — o prazo do código é DECLARADO em texto (mono para o número) e o
  reenvio existe como ação terciária (CD12).
- **AU-09** — criar conta **sem "confirme a senha"** (CD5/SC 3.3.7); força da
  senha em texto + forma, **nunca bloqueia o envio** (CD14).
- **AU-10** — `lang=pt-BR`, um `<main>`, um `h1` por vista (o ClickUp tem
  ZERO h1/main na tela de login), uma vista visível por vez, e **a troca de
  vista move o foco ao h1** da vista nova.
- **AU-11** — live region única `role=status aria-atomic`, visualmente oculta
  e separada do nó visível (§1.13).
- **AU-12** — **o símbolo da marca é o ASSET OFICIAL, byte-idêntico**: os
  paths de `03-assets/simbolos/simbolo-principal.svg` (tema claro) e
  `simbolo-mono-negativo.svg` (tema escuro — tabela fundo×variante do
  `marca-seed.md` §5.1) foram INJETADOS POR SCRIPT na tela, nunca
  redigitados; a suíte confere o path âncora contra o arquivo do asset.
- **AU-13** *(veredito do gate)* — a identidade acima do cartão é o símbolo
  oficial + "SEED engenharia" em texto. A sigla geométrica genérica das telas
  internas NÃO serve à porta do produto.
- **AU-14** — Caps Lock ligado no campo de senha gera AVISO visível
  (`warning`, nunca `danger`) e anunciado, que morre no blur (CD15).

### 83.2 Decisões de composição (com a leitura que as sustenta)

Cartão, não canvas aberto (gabarito F7.1; shadcn confirma; o CU diverge) ·
"Esqueceu a senha?" na LINHA do rótulo da senha, à direita (shadcn) · SSO
("Continuar com o Google") DEPOIS do formulário e do divisor "ou" — o método
primário da casa é o e-mail corporativo · botão de recuperação nomeia o
EFEITO ("Enviar link de recuperação") e o de criação nomeia o MÉTODO ("Criar
conta com e-mail") — dispositivos lidos no CU e adotados · título da
recuperação é PERGUNTA ("Esqueceu a senha?") · confirmação de envio NEUTRA
("Se o e-mail existir na conta…") — não revela existência de conta · termos
como texto de continuação (redação final = produto/jurídico, LGPD) · **v0.2
sem faixa de marca**: a âncora da tela é o botão primário turquesa (PN21-05:
UMA âncora por página); o CP19 (faixa) segue PERMITIDO pelo gabarito como
variante, se um gate futuro a pedir.

### 83.3 Fronteiras (produto/Supabase — nada disto é do DS)

Sessão, redirecionamento, rate-limit, política de senha (§3.5/NIST),
"lembrar-me", MFA/2FA de produto, seleção de workspace multi-empresa (SI17-e),
redação legal dos termos e os E-MAILS do fluxo (EM15: o template canônico em
HTML puro é exatamente o que o Supabase Auth aceita — quando a decisão vier, é
colar). O deep-link `#vista=…&tema=…&estado=…` da tela é INSTRUMENTO de
avaliação (headless/suíte), não spec — em produto, vista é rota.

### 83.4 O que a produção pegou (instrumento e método)

1. **Container query não estiliza o próprio container** — a primeira versão
   punha `container-type` no `.palco` e mirava `.palco` dentro do
   `@container`: nunca disparava. Pego por MEDIÇÃO em navegador real a 390px
   (padding seguia 24px); o container subiu para o `body`. Medido depois:
   calha 12px, cartão 366px, `scrollWidth` = viewport.
2. **O screenshot do Chrome CLI a 390px inventou um overflow** (link
   "vazando" da tela) que o navegador real desmente — REINCIDÊNCIA da
   armadilha catalogada no marco v1.9: render de prova é navegador
   real/puppeteer, nunca o CLI `--screenshot`.
3. **Ambiente de suíte nesta máquina:** o `G:` (Drive File Stream) rejeita
   junction e `node_modules` dentro do stream é inviável; o jsdom vive em
   `C:\Users\seed\AppData\Local\Temp\claude\jsdom-env` e a suíte o resolve
   por caminho (env `JSDOM_DIR`). ⚠ As suítes antigas (`import 'jsdom'`
   puro) seguem sem rodar aqui — pendência de ambiente **AU-P1**.
4. Defeito pego no pré-olhar: link "Esqueceu a senha?" herdava o AZUL default
   do UA no tema escuro (seletor de cor não cobria `.linha-rotulo a`) —
   consertado e reconferido.

### 83.5 Pendências que a seção deixa

- **AU-P1** — ambiente: as ~60 suítes antigas não rodam nesta máquina (jsdom
  fora do repo; ver 83.4-3). Decidir o padrão da casa: env `JSDOM_DIR` em
  todas, ou ambiente node dedicado fora do stream.
- **AU-P2** — a variante COM faixa de marca (CP19) não foi desenhada; gatilho:
  gate futuro pedir a versão de marketing da porta.
- **AU-P3** — o fluxo multi-empresa pós-login (seleção de workspace, SI17-e)
  é tela de PRODUTO; se o ERP pedir, nasce como extensão desta seção com
  leitura própria.

---