Você faz login em um sistema, aperta F5 e continua autenticado.

Fecha uma página, abre outra e ainda permanece logado.

Mas afinal… como o navegador sabe que é você?

Essa é uma das dúvidas mais comuns entre quem está começando no desenvolvimento web e, ao mesmo tempo, um dos conceitos mais importantes para criar aplicações modernas.

Neste artigo vamos entender como funcionam Session, Cookies e a autenticação entre Front-end e Back-end utilizando JavaScript e Node.js.

---

O problema da autenticação

O protocolo HTTP é stateless, ou seja, ele não guarda informações entre uma requisição e outra.

Imagine o seguinte cenário:

1. Você acessa o site.
2. Faz login.
3. O servidor valida seu usuário.
4. Você abre outra página.

Como o servidor sabe que aquela nova requisição pertence ao mesmo usuário?

Se não existisse algum mecanismo de identificação, seria necessário fazer login novamente a cada clique.

É justamente aí que entram as Sessions e os Cookies.

---

O que é uma Session?

A Session é um espaço reservado no servidor para armazenar informações temporárias sobre um usuário autenticado.

Depois que o login é realizado com sucesso, o servidor cria uma sessão semelhante a esta:

Session:
Usuário: Marcos
ID: 123
Permissão: Admin
Login: verdadeiro

Essas informações ficam armazenadas apenas no servidor.

O navegador nunca recebe esses dados diretamente.

---

O papel do Cookie

Se os dados ficam no servidor, como o navegador encontra a sessão correta?

A resposta está em um pequeno arquivo chamado Cookie.

Após o login, o servidor envia algo parecido com:

connect.sid = x8Aj92Kd93jd82...

Esse valor representa apenas um identificador da sessão.

Sempre que o navegador faz uma nova requisição, ele envia automaticamente esse cookie.

O servidor então procura esse identificador na memória (ou banco de dados) e recupera a sessão correspondente.

---

O que acontece quando pressionamos F5?

Ao atualizar a página:

• o navegador envia novamente o cookie;
• o servidor encontra a sessão;
• identifica o usuário;
• responde normalmente.

Por isso você continua autenticado mesmo após atualizar a página.

---

Como funciona o Login na prática

Durante o projeto desenvolvido no vídeo, construímos um fluxo completo de autenticação utilizando JavaScript e Node.js.

O processo acontece da seguinte maneira:

1. O usuário preenche o formulário.
2. O JavaScript captura os dados.
3. O Fetch API envia uma requisição POST.
4. O Node.js valida usuário e senha.
5. O servidor cria uma Session.
6. O Cookie é enviado automaticamente ao navegador.
7. O Dashboard é liberado.

Todo esse fluxo acontece em poucos milissegundos.

---

O Logout

Quando clicamos em Logout, o servidor destrói a sessão.

Na próxima requisição, mesmo que o cookie ainda exista, ele deixa de apontar para uma sessão válida.

O resultado é que o usuário precisa fazer login novamente.

---

Visualizando o Cookie no navegador

Uma das partes mais interessantes do projeto é abrir o DevTools e observar exatamente onde o navegador armazena o cookie.

Basta acessar:

F12

Application

Cookies

Você verá um cookie semelhante a:

connect.sid

Esse é o identificador utilizado pelo servidor para localizar sua sessão.

Visualizar esse processo ajuda muito a entender como aplicações profissionais realizam autenticação.

---

Tecnologias utilizadas

Durante o desenvolvimento utilizamos diversos recursos importantes do JavaScript moderno:

• JavaScript
• Node.js
• Express
• Express Session
• Fetch API
• Async/Await
• JSON
• Cookies
• Session
• DevTools

Além disso, o projeto trabalha conceitos fundamentais para qualquer desenvolvedor Front-end ou Full Stack.

---

O que você aprenderá no vídeo

Durante a aula você verá na prática:

• Captura de elementos do HTML
• addEventListener
• preventDefault()
• Fetch API
• Async/Await
• Requisições POST
• JSON.stringify()
• Headers HTTP
• Integração Front-end + Node.js
• Dashboard protegido
• Logout
• Session
• Cookies
• DevTools

Tudo explicado passo a passo, sem copiar código pronto.

---

Assista ao projeto completo

Se você quer entender definitivamente como os sites mantêm usuários autenticados, acompanhe o projeto completo.

📺 Vídeo editado:

🎥 Live completa:

---

Conclusão

Entender Session e Cookies é um divisor de águas para quem deseja trabalhar com desenvolvimento web.

Depois que esses conceitos ficam claros, fica muito mais fácil compreender autenticação, áreas protegidas, APIs, sistemas administrativos e até mecanismos modernos como JWT.

Mais importante do que decorar código é entender o funcionamento das tecnologias.

Esse é justamente o objetivo do canal Desvendando o Código: mostrar o que acontece por trás das aplicações e ensinar programação através de projetos reais.

Se este conteúdo foi útil para você, acompanhe o canal para aprender JavaScript, Node.js, React, bancos de dados, APIs e muito mais, sempre colocando a teoria em prática.