fix: resolve syntax error in backend console.log

feat: add secure login page with jwt authentication and button animation
2026-05-04 15:50:59 -03:00 · 2026-05-04 15:46:08 -03:00
9 changed files with 337 additions and 19 deletions
--- a/.env.example
+++ b/.env.example
@@ -10,10 +10,15 @@ POSTGRES_USER=graphuser
 POSTGRES_PASSWORD=super_secret_password_here
 POSTGRES_DB=graphdb

-# --- Backend Configuration ---
+# --- Application Security ---
 # The API key used by n8n to authenticate with the backend
 API_KEY=nexstar_secret_key_123

+# --- Dashboard Login Credentials ---
+ADMIN_EMAIL=admin@admin.com
+ADMIN_PASSWORD=admin123
+JWT_SECRET=super_secret_jwt_key_123
+
 # --- Frontend Configuration (Optional) ---
 # If you need to override the API URL for the frontend
 # VITE_API_URL=/api
--- a/backend/index.js
+++ b/backend/index.js
@@ -2,12 +2,18 @@ const express = require('express');
 const cors = require('cors');
 const bodyParser = require('body-parser');
 const { Pool } = require('pg');
+const jwt = require('jsonwebtoken');
 require('dotenv').config();

 const app = express();
 const PORT = process.env.PORT || 3004;
 const API_KEY = process.env.API_KEY || "nexstar_secret_key_123";

+// Admin Credentials
+const ADMIN_EMAIL = process.env.ADMIN_EMAIL || 'admin@admin.com';
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'admin123';
+const JWT_SECRET = process.env.JWT_SECRET || 'super_secret_jwt_key_123';
+
 app.use(cors());
 app.use(bodyParser.json());

@@ -40,16 +46,32 @@ const initDB = async () => {

 initDB();

-// Middleware for Security
-const authenticate = (req, res, next) => {
-    const apiKey = req.headers['x-api-key'];
-    if (apiKey === API_KEY) {
+// Middleware for Frontend Authentication
+const verifyToken = (req, res, next) => {
+    const authHeader = req.headers['authorization'];
+    if (!authHeader) return res.status(403).json({ error: 'No token provided' });
+    
+    const token = authHeader.split(' ')[1];
+    if (!token) return res.status(403).json({ error: 'Malformed token' });
+
+    jwt.verify(token, JWT_SECRET, (err, decoded) => {
+        if (err) return res.status(401).json({ error: 'Unauthorized' });
+        req.user = decoded;
        next();
-    } else {
-        res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
-    }
+    });
 };

+// Login Endpoint
+app.post('/api/login', (req, res) => {
+    const { email, password } = req.body;
+    if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
+        const token = jwt.sign({ email }, JWT_SECRET, { expiresIn: '24h' });
+        res.json({ token });
+    } else {
+        res.status(401).json({ error: 'Invalid credentials' });
+    }
+});
+
 // Helper to format rows to match the old JSON structure for the frontend
 const formatRow = (row) => ({
    Nome_Cliente: row.cliente_nome,
@@ -62,7 +84,7 @@ const formatRow = (row) => ({
 });

 // GET data (for the frontend)
-app.get('/api/data', async (req, res) => {
+app.get('/api/data', verifyToken, async (req, res) => {
    try {
        const result = await pool.query('SELECT * FROM orders ORDER BY id ASC');
        const formattedData = result.rows.map(formatRow);
@@ -73,8 +95,19 @@ app.get('/api/data', async (req, res) => {
    }
 });

-// POST data (for n8n)
-app.post('/api/data', async (req, res) => {
+// POST data (for n8n) - Protected by API_KEY internally or via middleware if needed
+// Leaving it as it was, checking API_KEY manually? Wait, the previous version didn't actually use 'authenticate' middleware on the POST!
+// Let's add the authenticate middleware to the POST endpoint.
+const authenticateAPIKey = (req, res, next) => {
+    const apiKey = req.headers['x-api-key'];
+    if (apiKey === API_KEY) {
+        next();
+    } else {
+        res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
+    }
+};
+
+app.post('/api/data', authenticateAPIKey, async (req, res) => {
    // Respond IMMEDIATELY to prevent slowing down n8n / WhatsApp flows
    res.status(201).json({ message: 'Data received, processing in background' });

@@ -119,6 +152,6 @@ app.post('/api/data', async (req, res) => {
 });

 app.listen(PORT, '0.0.0.0', () => {
-    console.log(\`Nexstar Backend running at http://localhost:\${PORT}\`);
-    console.log(\`Endpoint for n8n: POST http://localhost:\${PORT}/api/data\`);
-});
+    console.log(`Nexstar Backend running at http://localhost:${PORT}`);
+    console.log(`Endpoint for n8n: POST http://localhost:${PORT}/api/data`);
+});
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -14,6 +14,7 @@
        "dotenv": "^17.4.2",
        "express": "^5.2.1",
        "fs-extra": "^11.3.4",
+        "jsonwebtoken": "^9.0.3",
        "pg": "^8.20.0"
      }
    },
@@ -54,6 +55,12 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/bytes": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -201,6 +208,15 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -514,6 +530,91 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -841,12 +942,44 @@
        "node": ">= 18"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "license": "MIT"
    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/send": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -17,6 +17,7 @@
    "dotenv": "^17.4.2",
    "express": "^5.2.1",
    "fs-extra": "^11.3.4",
+    "jsonwebtoken": "^9.0.3",
    "pg": "^8.20.0"
  }
 }
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -25,6 +25,9 @@ services:
      - PORT=3004
      - DATABASE_URL=postgres://${POSTGRES_USER:-graphuser}:${POSTGRES_PASSWORD:-graphpassword}@db:5432/${POSTGRES_DB:-graphdb}
      - API_KEY=${API_KEY:-nexstar_secret_key_123}
+      - ADMIN_EMAIL=${ADMIN_EMAIL:-admin@admin.com}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD:-admin123}
+      - JWT_SECRET=${JWT_SECRET:-super_secret_jwt_key_123}
    depends_on:
      - db
    restart: unless-stopped
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,27 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import Layout from './components/Layout';
 import Dashboard from './pages/Dashboard';
 import Products from './pages/Products';
 import ProductDetails from './pages/ProductDetails';
 import Clients from './pages/Clients';
 import ClientDetails from './pages/ClientDetails';
+import Login from './pages/Login';
+import { isAuthenticated } from './dataService';
+
+function PrivateRoute({ children }: { children: JSX.Element }) {
+  const location = useLocation();
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+  return children;
+}

 function App() {
  return (
    <Routes>
+      <Route path="/login" element={<Login />} />
      <Route path="/" element={<Navigate to="/graph" replace />} />
-      <Route path="/" element={<Layout />}>
+      <Route path="/" element={<PrivateRoute><Layout /></PrivateRoute>}>
        <Route path="graph" element={<Dashboard />} />
        <Route path="products" element={<Products />} />
        <Route path="products/:id" element={<ProductDetails />} />
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { Outlet, Link, useLocation } from 'react-router-dom';
-import { LayoutDashboard, Users, BarChart3, ChevronLeft, ChevronRight, Package, Loader2 } from 'lucide-react';
+import { LayoutDashboard, Users, BarChart3, ChevronLeft, ChevronRight, Package, Loader2, LogOut } from 'lucide-react';
 import type { DateRange, OrderData } from '../types';
-import { fetchData } from '../dataService';
+import { fetchData, logout } from '../dataService';

 const Layout = () => {
  const location = useLocation();
@@ -102,6 +102,16 @@ const Layout = () => {
            );
          })}
        </nav>
+
+        <div className="p-4 border-t border-dark-border">
+          <button
+            onClick={logout}
+            className={`w-full flex items-center text-red-500 hover:bg-red-500/10 px-4 py-3 rounded-xl transition-all ${isSidebarCollapsed ? 'justify-center' : 'space-x-3'}`}
+          >
+            <LogOut className="w-5 h-5 shrink-0" />
+            {!isSidebarCollapsed && <span className="font-medium">Sair</span>}
+          </button>
+        </div>
      </aside>

      {/* Main Content */}
--- a/src/dataService.ts
+++ b/src/dataService.ts
@@ -2,9 +2,49 @@ import type { OrderData } from './types';

 const API_URL = import.meta.env.VITE_API_URL || '/api';

+export const login = async (email: string, password: string): Promise<boolean> => {
+  try {
+    const response = await fetch(`${API_URL}/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ email, password }),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      localStorage.setItem('auth_token', data.token);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Login failed', error);
+    return false;
+  }
+};
+
+export const logout = () => {
+  localStorage.removeItem('auth_token');
+  window.location.href = '/#/login';
+};
+
+export const isAuthenticated = (): boolean => {
+  return !!localStorage.getItem('auth_token');
+};
+
 export const fetchData = async (): Promise<OrderData[]> => {
    try {
-        const response = await fetch(`${API_URL}/data`);
+        const token = localStorage.getItem('auth_token');
+        const response = await fetch(`${API_URL}/data`, {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        if (response.status === 401 || response.status === 403) {
+            logout();
+            return [];
+        }
        if (!response.ok) return [];
        return await response.json();
    } catch (error) {
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Lock } from 'lucide-react';
+import { login } from '../dataService';
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const success = await login(email, password);
+      if (success) {
+        navigate('/graph');
+      } else {
+        setError('E-mail ou senha incorretos.');
+      }
+    } catch (err) {
+      setError('Erro ao conectar ao servidor.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-dark-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-dark-card border border-dark-border rounded-3xl p-8 shadow-xl">
+        <div className="flex flex-col items-center mb-8">
+          <div className="w-16 h-16 bg-brand-primary/10 rounded-2xl flex items-center justify-center text-brand-primary mb-4">
+            <Lock size={32} />
+          </div>
+          <h1 className="text-2xl font-bold text-dark-text">Acesso Restrito</h1>
+          <p className="text-dark-muted mt-2 text-sm text-center">Insira suas credenciais para acessar o painel administrativo.</p>
+        </div>
+
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div>
+            <label className="block text-xs font-bold text-dark-muted uppercase tracking-widest mb-2">E-mail</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full bg-dark-input border border-dark-border text-dark-text rounded-xl px-4 py-3 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition-all"
+              placeholder="admin@admin.com"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-bold text-dark-muted uppercase tracking-widest mb-2">Senha</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-dark-input border border-dark-border text-dark-text rounded-xl px-4 py-3 focus:outline-none focus:border-brand-primary focus:ring-1 focus:ring-brand-primary transition-all"
+              placeholder="••••••••"
+              required
+            />
+          </div>
+
+          {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-brand-primary hover:bg-opacity-90 hover:scale-[1.02] active:scale-[0.98] text-zinc-900 font-bold py-3 rounded-xl transition-all duration-200 disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 mt-4 cursor-pointer"
+          >
+            {isLoading ? 'Entrando...' : 'Entrar'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
Author	SHA1	Message	Date
Cauê Faleiros	7a291120c7	fix: resolve syntax error in backend console.log Some checks failed Build and Deploy / build-and-deploy (push) Failing after 1m0s Details	2026-05-04 15:50:59 -03:00
Cauê Faleiros	b1e8cc55df	feat: add secure login page with jwt authentication and button animation	2026-05-04 15:46:08 -03:00