Você já percebeu que, depois de fazer login em um site, basta atualizar a página e sua conta continua conectada?

Ou que mesmo fechando uma aba e abrindo outra você ainda permanece autenticado?

Isso não acontece por acaso.

Existe toda uma comunicação entre o navegador e o servidor utilizando Sessions e Cookies, permitindo que o sistema reconheça quem é você em cada nova requisição.

Neste projeto vamos construir o Front-end completo de um sistema de login, conectando uma aplicação HTML, CSS e JavaScript a uma API desenvolvida em Node.js.

Ao final você terá um sistema de autenticação totalmente funcional, utilizando exatamente os mesmos conceitos presentes em aplicações profissionais.

---

Como funciona um sistema de login?

Quando o usuário informa seu login e senha, essas informações são enviadas para o servidor.

O servidor verifica se as credenciais estão corretas.

Caso estejam, ele cria uma Session para aquele usuário e envia um Cookie para o navegador.

Nas próximas requisições, o navegador envia automaticamente esse Cookie ao servidor.

Assim, o servidor consegue identificar quem fez a requisição sem precisar solicitar usuário e senha novamente.

É exatamente esse processo que faz com que você continue logado mesmo depois de atualizar a página.

---

Construindo a interface de Login

O primeiro passo foi desenvolver toda a interface utilizando HTML e CSS.

Criamos um formulário contendo:

• Campo de usuário
• Campo de senha
• Botão de login
• Estrutura organizada para futuras expansões

Embora seja uma interface simples, ela representa exatamente o ponto de entrada da autenticação.

Toda a lógica acontece a partir do envio desses dados para o servidor.

---

Consumindo a API com Fetch

Depois da interface pronta, chegou o momento de conectar o Front-end ao Backend.

Para isso utilizamos a Fetch API, responsável por realizar requisições HTTP utilizando JavaScript.

Quando o usuário clica no botão de login, o navegador envia uma requisição para a API contendo:

• Usuário
• Senha

O servidor recebe essas informações, realiza a validação e devolve a resposta informando se o acesso foi autorizado.

Essa comunicação entre Front-end e Backend é um dos conceitos mais importantes do desenvolvimento web moderno.

---

Sessions e Cookies na prática

Muitos iniciantes acreditam que o Cookie guarda todas as informações do usuário.

Na realidade, normalmente ele armazena apenas um identificador da sessão.

Quem realmente guarda os dados é o servidor.

O fluxo acontece assim:

1. O usuário realiza o login.
2. O servidor cria uma Session.
3. Um Cookie é enviado ao navegador.
4. O navegador envia esse Cookie automaticamente nas próximas requisições.
5. O servidor identifica a Session correspondente e autoriza o acesso.

Esse mecanismo torna a autenticação muito mais segura e organizada.

---

Protegendo páginas privadas

Depois do login, nem todas as páginas da aplicação podem ficar disponíveis para qualquer pessoa.

Por isso implementamos uma área protegida.

Sempre que uma página privada é acessada, o sistema verifica se existe uma sessão válida.

Caso exista, o acesso é liberado.

Caso contrário, o usuário é redirecionado novamente para a tela de login.

Esse processo impede que alguém simplesmente digite a URL da página protegida tentando acessar informações restritas.

---

Redirecionamento após autenticação

Outro recurso importante implementado foi o redirecionamento automático.

Depois que o login é realizado com sucesso, o usuário é enviado diretamente para a Dashboard da aplicação.

Esse comportamento melhora bastante a experiência de uso e faz parte do funcionamento esperado em praticamente qualquer sistema web.

---

Implementando o Logout

Tão importante quanto entrar no sistema é conseguir sair dele corretamente.

Durante o projeto implementamos o processo completo de Logout.

Ao clicar no botão de sair:

• A Session é destruída no servidor.
• O Cookie deixa de ser válido.
• O usuário perde a autenticação.
• Novos acessos às páginas protegidas são bloqueados.

Esse processo garante que outras pessoas não consigam utilizar a mesma sessão posteriormente.

---

Utilizando o DevTools para entender Sessions e Cookies

Um dos momentos mais interessantes do projeto acontece quando analisamos o funcionamento utilizando as ferramentas do navegador.

Com o DevTools é possível observar:

• Os Cookies sendo armazenados.
• As requisições HTTP.
• Os Headers enviados.
• As respostas da API.
• O comportamento da sessão durante Login e Logout.

Visualizar essas informações ajuda muito a compreender o que realmente acontece por trás das aplicações web.

---

Tecnologias utilizadas

Durante o desenvolvimento utilizamos:

• HTML5
• CSS3
• JavaScript
• Fetch API
• Node.js
• Express
• express-session
• Sessions
• Cookies

Essas tecnologias formam uma excelente base para quem deseja aprender autenticação em aplicações web.

---

O que você aprende neste projeto

Ao concluir esta aula você terá praticado:

• Construção de interface de Login
• Comunicação Front-end e Backend
• Fetch API
• Requisições HTTP
• Sessions
• Cookies
• Autenticação de usuários
• Proteção de páginas privadas
• Logout
• Organização de projetos
• Boas práticas de desenvolvimento

Mais importante do que copiar um sistema pronto é entender por que cada etapa existe e como todas trabalham juntas.

---

Aulas completas

Este sistema de autenticação foi desenvolvido em duas etapas para que você compreenda todo o fluxo de funcionamento, desde a criação da API até a construção da interface utilizada pelo usuário.

Parte 1 — Backend (Node.js, Express, Session e Cookies)

Na primeira aula desenvolvemos toda a infraestrutura responsável pela autenticação.

Você aprenderá a criar uma API completa utilizando Node.js, configurar o express-session, criar Sessions, trabalhar com Cookies, proteger rotas e controlar o acesso dos usuários.

Assista à aula do Backend:

---

Parte 2 — Front-end (HTML, CSS e JavaScript)

Nesta segunda aula conectamos o Front-end à API criada anteriormente e desenvolvemos toda a interface do sistema de login.

Durante o projeto você aprenderá a:

• Criar a tela de Login
• Consumir a API utilizando Fetch
• Enviar usuário e senha para o servidor
• Trabalhar com Sessions e Cookies
• Redirecionar usuários autenticados
• Proteger páginas privadas
• Implementar o Logout
• Visualizar o funcionamento da autenticação através do DevTools

Assista à aula do Front-end:

As duas aulas juntas mostram exatamente como funciona um sistema de autenticação utilizado em aplicações reais, desde o Backend até a interface acessada pelo usuário.

---

Por que entender Sessions e Cookies é tão importante?

Muitos desenvolvedores conseguem implementar um login copiando código da internet, mas poucos realmente entendem o que acontece quando o usuário clica no botão Entrar.

Quando você compreende como o navegador envia Cookies, como o servidor mantém uma Session ativa e como as páginas protegidas validam essa autenticação, passa a enxergar o funcionamento interno de praticamente qualquer sistema web.

Esse conhecimento será útil em frameworks como React, Angular, Vue, Next.js ou qualquer outra tecnologia utilizada para desenvolver aplicações modernas.

---

Conclusão

Criar um sistema de login vai muito além de verificar usuário e senha.

O verdadeiro desafio está em manter a autenticação entre diferentes páginas e requisições de forma segura.

Quando entendemos como Sessions, Cookies e a comunicação entre Front-end e Backend funcionam, deixamos de apenas utilizar bibliotecas prontas e passamos a compreender como aplicações reais mantêm milhões de usuários conectados todos os dias.

Essa é a filosofia do Desvendando o Código: aprender programação entendendo o que acontece por trás da tecnologia.

Quando você entende os conceitos, deixa de decorar código e passa a construir soluções com segurança, sabendo exatamente por que cada parte do sistema existe e como todas trabalham juntas.