ANÚNCIO

Aula 11 – Vibe Coding: Implementando um sistema de Gestão de Mudancas

Aprenda a implementar autenticação JWT com Quarkus e Angular. Tutorial prático com configuração de tokens, interceptadores e proteção de rotas.

⏱ 1h 09min 👁 371 visualizações 📅 julho 19, 2025

Resumo

O que é autenticação JWT e por que importa

A autenticação baseada em JWT (JSON Web Token) é um dos padrões mais populares e seguros para proteger aplicações web modernas. Diferentemente de sessões tradicionais, os tokens JWT são stateless, o que significa que o servidor não precisa armazenar informações sobre o usuário logado. Este vídeo da série Vibe Coding apresenta uma implementação prática de um sistema completo de autenticação que conecta o backend em Quarkus (framework Java moderno e otimizado) com o frontend em Angular (framework TypeScript robusto). O objetivo é demonstrar como proteger rotas, validar identidades e manter a comunicação segura entre cliente e servidor em uma aplicação real de gestão de mudanças.

Configuração do JWT no Quarkus

O primeiro passo fundamental é configurar o JWT no backend Quarkus. Isso envolve gerar chaves pública e privada que serão utilizadas para assinar e validar tokens. O vídeo mostra passo a passo como realizar essa configuração, incluindo como definir as propriedades necessárias no arquivo de configuração do Quarkus. A geração de chaves segue padrões criptográficos robustos, garantindo que apenas tokens legítimos possam ser aceitos pelo sistema. Além disso, aborda como validar tokens recebidos nas requisições, verificando assinatura, expiração e outras claims (dados) armazenadas no token. A proteção de rotas é implementada através de anotações e filtros que garantem que apenas usuários autenticados acessem endpoints sensíveis.

Integração com Angular no frontend

No lado do cliente, o Angular precisa saber como enviar o token JWT junto com cada requisição HTTP. Para isso, o vídeo demonstra como criar um interceptor, que é um recurso poderoso do Angular que automaticamente adiciona o token ao header de autorização de todas as requisições. Além do interceptor, são implementadas guardas de rota (route guards), que impedem que usuários não autenticados acessem certas páginas da aplicação. Um formulário de login funcional também é criado, permitindo que o usuário insira suas credenciais, receba o token do backend e o armazene localmente (geralmente em localStorage ou sessionStorage).

Problemas comuns e soluções práticas

Durante a implementação, diversos erros podem surgir. O vídeo aborda os problemas mais comuns, como configurações incorretas de chaves, token expirado, validação falhando ou CORS bloqueando requisições. Cada problema é acompanhado de sua solução, permitindo que quem assiste consiga diagnosticar e corrigir erros rapidamente. A discussão inclui erros de configuração que impedem o token de ser gerado corretamente, problemas ao validar a assinatura no servidor e questões relacionadas ao armazenamento do token no cliente. O instrutor também alerta sobre a importância de usar HTTPS em produção, já que tokens em plain text trafegando via HTTP são um risco de segurança.

Dicas sobre código gerado por IA e tutoriais manuais

Um ponto interessante abordado no vídeo é a recomendação de evitar códigos gerados completamente por ferramentas de IA, especialmente em tópicos críticos como autenticação. O instrutor enfatiza quando é apropriado seguir tutoriais manuais e quando é seguro confiar em templates automatizados. Código gerado por IA pode conter vulnerabilidades sutis ou não seguir as melhores práticas da comunidade, o que é particularmente preocupante em aspectos de segurança. Aprender manualmente permite entender cada linha de código, suas implicações e como adaptá-lo para casos específicos. Essa abordagem contribui para desenvolvedores mais conscientes e preparados para decisões de arquitetura.

Repositório e projeto prático

O vídeo fornece acesso ao repositório GitHub do projeto (morpho-board), onde todo o código está disponível para consulta e estudo. Ter um projeto real como referência é extremamenté valioso, pois permite ver a implementação completa, incluindo estrutura de pastas, organização de código e como tudo se integra. O repositório serve como base para que desenvolvedores possam clonar, estudar e adaptar para seus próprios projetos.

Contexto da série Vibe Coding

Este é o episódio 11 da série Vibe Coding, que acompanha o desenvolvimento de um sistema de gestão de mudanças completo. Cada episódio adiciona funcionalidades e melhora a aplicação. A série tem uma abordagem prática e ao vivo (live coding), mostrando não apenas o código final, mas também o processo de desenvolvimento, decisões arquiteturais e como lidar com problemas que surgem durante a implementação. Este episódio específico foca na camada crítica de autenticação, que é fundamental para qualquer aplicação que éxija controle de acesso.

O que você vai aprender

  • Implementar autenticação JWT no Quarkus com geração e validação de tokens
  • Criar interceptadores e guardas de rota no Angular para proteção de endpoints
  • Construir um formulário de login funcional que se integra com backend seguro
  • Diagnosticar e resolver problemas comuns de autenticação e comunicação cliente-servidor
  • Aplicar melhores práticas de segurança em aplicações web full-stack

Conceitos abordados

Tecnologias utilizadas

Capítulos 8 marcações

  1. Introdução ao sistema de autenticação JWT
  2. Configuração inicial do Quarkus e geração de chaves
  3. Implementação do endpoint de login no backend
  4. Validação e proteção de rotas no Quarkus
  5. Criando interceptador HTTP no Angular
  6. Implementação de route guards e formulário de login
  7. Problemas comuns e soluções práticas
  8. Dicas de segurança e encerramento

Próximo vídeo sugerido

Avaliações

Avaliação dos alunos 0.0
0 avaliações
Avalie esta aula

Ajude outros alunos a entenderem se esta aula foi útil.

Ainda não há avaliações. Seja o primeiro a avaliar esta aula.