Você já se perguntou como os sites conseguem saber quem está logado?

Quando você entra no Instagram, Gmail ou qualquer outro sistema, existe uma série de processos acontecendo por trás dos bastidores.

Neste projeto vamos criar um sistema de autenticação utilizando Node.js, Express e MySQL, entendendo como ocorre a comunicação entre Front-end, Back-end e Banco de Dados.

Mais importante do que decorar código, é entender como a tecnologia funciona.

Como funciona um sistema de login?

Quando o usuário preenche:

E-mail
Senha

Essas informações são enviadas para o servidor.

O servidor consulta o banco de dados e verifica se o usuário existe.

Se os dados forem válidos, o sistema permite o acesso.

Caso contrário, uma mensagem de erro é exibida.

Esse processo acontece milhares de vezes todos os dias em aplicações reais.

Tecnologias utilizadas

Neste projeto utilizamos:

Front-end

HTML
CSS
JavaScript
Fetch API

Back-end

Node.js
Express

Banco de dados

MySQL
Procedures
Query parametrizada

Criando a rota de login

No Express criamos uma rota:

POST /login

Essa rota recebe:

email
senha

Os dados chegam através do req.body.

Depois disso, o servidor faz a consulta no banco de dados para verificar se existe um usuário correspondente.

Evitando SQL Injection

Uma prática importante é utilizar parâmetros na consulta.

Em vez de concatenar valores diretamente no SQL, utilizamos:

Interrogações (?)
Query parametrizada

Essa abordagem aumenta a segurança da aplicação e evita ataques de SQL Injection.

Conectando ao banco de dados

Após receber os dados do usuário, o Node.js realiza uma consulta no MySQL.

Caso exista um usuário cadastrado, retornamos:

{
  "sucesso": true
}

Caso contrário:

{
  "sucesso": false
}

Esse retorno será utilizado pelo Front-end.

Testando a API

Antes de integrar o HTML com o Back-end, utilizamos o Thunder Client.

Essa etapa é muito importante porque permite validar:

A rota;
O banco de dados;
A resposta do servidor;

Fazer testes por partes facilita a depuração e economiza muito tempo.

Capturando os dados do formulário

No Front-end utilizamos JavaScript para capturar:

E-mail;
Senha.

Com getElementById() conseguimos acessar os inputs e recuperar seus valores.

Depois disso, enviamos essas informações para o servidor.

Enviando dados utilizando Fetch API

A comunicação entre Front-end e Back-end foi feita utilizando:

Fetch API;
Método POST;
Headers;
Content-Type application/json;
JSON.stringify().

Essa é uma estrutura muito comum em aplicações modernas.

Tratando a resposta do servidor

Após a consulta no banco de dados, o servidor retorna uma resposta.

Se o login for válido:

✅ Usuário autenticado.

Caso contrário:

❌ Usuário ou senha inválidos.

Essa prática é mais segura do que informar exatamente qual dado está incorreto.

Navegando entre páginas

Após a autenticação, utilizamos:

window.location.href

para redirecionar o usuário para outra página.

Esse é um exemplo simples, mas ajuda a entender o fluxo completo da autenticação.

Persistência do login

Uma das partes mais importantes é manter o usuário autenticado.

Existem diversas formas de fazer isso:

LocalStorage;
Cookies;
JWT (JSON Web Token);
Session;
Arquivos JSON;
Banco de dados.

Neste projeto foi construída a base para posteriormente adicionar autenticação utilizando JWT.

Segurança em sistemas reais

Em aplicações profissionais normalmente utilizamos:

✅ JWT

✅ Hash de senha

✅ Criptografia

✅ Middleware

✅ Cookies

✅ Expiração automática

✅ Rotas protegidas

Tudo isso torna o sistema mais seguro.

O que você aprendeu

Node.js
Express
MySQL
Fetch API
HTML
JavaScript
Login
Autenticação
SQL Injection
Query parametrizada
Thunder Client
Comunicação Front-end e Back-end
Persistência de dados
Segurança

🎥 Vídeo deste projeto

Como os Sites Sabem Quem Está Logado? | Node.js + MySQL

📺 Live completa

Quer acompanhar toda a construção do projeto e ver cada etapa sendo desenvolvida ao vivo?

Conclusão

Quando você faz login em um site, existe muito mais acontecendo do que simplesmente comparar um e-mail e uma senha.

Existe comunicação entre Front-end, Back-end e Banco de Dados.

Existe validação.

Existe segurança.

Existe persistência da autenticação.

E é justamente isso que buscamos aqui no Desvendando o Código.

Eu não ensino programação.

Eu ajudo as pessoas a entenderem como a tecnologia funciona.