# 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:

```env
# 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

```tsx
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):
```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