Vendaweb-portal/README_AUTH.md

Sistema de Autenticação - VendaWeb React

📋 Visão Geral

Este documento descreve o sistema de autenticação implementado no projeto React, baseado na implementação do portal Angular.

🏗️ Estrutura

vendaweb_react/
├── .env                    # Variáveis de ambiente (não versionado)
├── .env.example            # Template de variáveis de ambiente
├── src/
│   ├── config/
│   │   └── env.ts          # Configuração centralizada de variáveis
│   ├── contexts/
│   │   └── AuthContext.tsx # Contexto React de autenticação
│   ├── services/
│   │   └── auth.service.ts # Serviço de autenticação
│   └── types/
│       └── auth.ts         # Tipos TypeScript para autenticação

🔧 Configuração

1. Variáveis de Ambiente

Crie um arquivo .env na raiz do projeto com as seguintes variáveis:

# API Configuration
VITE_API_URL=http://vendaweb.jurunense.com.br/api/v1/
VITE_API_URL_PIX=http://10.1.1.205:8078/api/v1/

# Default Domain
VITE_DEFAULT_DOMAIN=@jurunense.com.br

# Firebase Configuration (opcional)
VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
# ... outras configurações do Firebase

Importante: No Vite, todas as variáveis de ambiente devem começar com VITE_ para serem expostas ao código do cliente.

2. Instalação

O projeto já inclui todas as dependências necessárias. Não são necessárias dependências adicionais para autenticação.

🔐 Funcionalidades

AuthService

O serviço de autenticação (auth.service.ts) fornece:

• login(email, password): Realiza login do usuário
• authenticate(email, password): Autentica para autorizações especiais
• saveToken(token): Salva token no localStorage
• saveUser(user): Salva usuário no localStorage
• getToken(): Obtém token do localStorage
• getUser(): Obtém usuário do localStorage
• clearAuth(): Remove dados de autenticação
• isAuthenticated(): Verifica se usuário está autenticado
• isManager(): Verifica se usuário é gerente (baseado no JWT)
• getAuthHeaders(): Retorna headers para requisições autenticadas

AuthContext

O contexto React (AuthContext.tsx) fornece:

• Estado global de autenticação
• Funções de login/logout
• Acesso a dados do usuário
• Hook useAuth() para usar em componentes

Uso do Hook useAuth

import { useAuth } from './src/contexts/AuthContext';

function MyComponent() {
  const { 
    user, 
    isAuthenticated, 
    isLoading, 
    login, 
    logout 
  } = useAuth();

  if (isLoading) return <div>Carregando...</div>;
  if (!isAuthenticated) return <div>Faça login</div>;

  return <div>Olá, {user?.username}!</div>;
}

🔄 Fluxo de Autenticação

1. Login: Usuário preenche email e senha
2. Processamento: Email e senha são convertidos para UPPERCASE e domínio é adicionado automaticamente
3. Requisição: POST para /auth/login com credenciais
4. Resposta: Recebe token JWT e dados do usuário
5. Armazenamento: Token e usuário são salvos no localStorage
6. Estado: Context atualiza estado global
7. Redirecionamento: Usuário é redirecionado para o menu principal

📝 Características Especiais

Processamento de Email

• Se o usuário digitar usuario@jurunense.com.br, o domínio é removido e readicionado
• Email é sempre convertido para UPPERCASE antes do envio
• Domínio padrão: @jurunense.com.br

Processamento de Senha

• Senha é sempre convertida para UPPERCASE antes do envio
• Validação mínima: 3 caracteres

Token JWT

• Token é armazenado no localStorage como token
• Token é usado no header Authorization: Basic {token}
• Token pode ser decodificado para verificar permissões (ex: isManager)

Dados do Usuário

Armazenados no localStorage como user (JSON):

{
  "id": 1,
  "username": "USUARIO",
  "name": "Nome do Usuário",
  "store": "Loja Jurunense",
  "seller": "Vendedor",
  "supervisorId": 123,
  "deliveryTime": "24h",
  "token": "jwt_token_here"
}

🛡️ Segurança

• Tokens são armazenados apenas no localStorage (considerar migração para httpOnly cookies em produção)
• Credenciais são sempre enviadas em UPPERCASE (conforme padrão do sistema)
• Validação de formulário no frontend
• Tratamento de erros de autenticação

🔗 Integração com API

O sistema está configurado para usar a mesma API do portal Angular:

• Base URL: http://vendaweb.jurunense.com.br/api/v1/
• Login Endpoint: POST /auth/login
• Authenticate Endpoint: POST /auth/authenticate
• Authorization Header: Basic {token}

📚 Próximos Passos

1. Implementar refresh token (se necessário)
2. Implementar interceptors para requisições HTTP
3. Adicionar tratamento de expiração de token
4. Implementar roteamento protegido
5. Adicionar testes unitários

⚠️ Notas Importantes

• O arquivo .env não deve ser versionado (já está no .gitignore)
• Use .env.example como template
• Em produção, configure as variáveis de ambiente no servidor
• O sistema mantém compatibilidade com a API existente do portal Angular