🚀 OAuth2 & OpenID Connect - Apresentação Interativa

🎭 O que é isso?

Uma apresentação SUPER ANIMADA sobre OAuth2 e OpenID Connect criada para o meu chapter backend! Porque segurança também pode ser divertida! 🔐✨

Por que os desenvolvedores confundem OAuth com um restaurante?
Porque ambos têm muitos fluxos e você sempre acaba esperando por um token! 😂

✨ Características

• 🎬 Slides animados e interativos
• 🧩 Diagramas visuais dos fluxos de autenticação
• 📱 Design totalmente responsivo
• ⌨️ Navegação por teclado (use as setas!)
• 🎨 Interface moderna e elegante
• 🧠 Conteúdo técnico explicado de forma simples

🛠️ Tecnologias Utilizadas

• Next.js 14 - Framework React com App Router
• React - Biblioteca para construção de interfaces
• TypeScript - Porque tipos são amigos, não inimigos!
• Tailwind CSS - Para estilização rápida e responsiva
• Lucide React - Ícones bonitos e escaláveis
• Framer Motion - Para animações suaves como manteiga
• shadcn/ui - Componentes de UI reutilizáveis

🚀 Como Instalar e Executar

Pré-requisitos

• Node.js 18+ (porque vivemos no futuro!)
• Um navegador moderno (não o IE, por favor 🙏)
• Vontade de aprender sobre autenticação! 🧠

Instalação

bash

Clone o repositório (ou baixe o ZIP se preferir)

git clone git@github.com:joaoffnascimento/oauth-presentation-react.git

Entre na pasta do projeto

cd oauth-oidc-presentation

Instale as dependências (e vá pegar um café ☕, vai demorar um pouquinho)

npm install

ou se você é do time yarn

yarn

ou se você é moderno

pnpm install

Executando o Projeto

bash

Inicie o servidor de desenvolvimento

npm run dev

ou

yarn dev

ou

pnpm dev

Agora abra http://localhost:3000 no seu navegador e... 🎉 VOILÀ! 🎉

📂 Estrutura do Projeto

/
├── app/ # Diretório principal do Next.js App Router
│ ├── slides/ # Cada slide da apresentação
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout principal
│ └── page.tsx # Página inicial
├── components/ # Componentes reutilizáveis
│ ├── animated-appear.tsx # Componente para animações de entrada
│ ├── flow-diagram.tsx # Diagramas de fluxo interativos
│ └── slide-layout.tsx # Layout comum para todos os slides
└── public/ # Arquivos estáticos

🎮 Como Usar a Apresentação

1. Clique em "Iniciar Apresentação" na página inicial
2. Navegue entre os slides usando:
   • Botões "Anterior" e "Próximo"
   • Setas do teclado ← →
   • Menu dropdown no canto superior direito
3. Aproveite as animações e diagramas interativos!

🔍 Conteúdo da Apresentação

1. Introdução - Da autenticação básica aos desafios modernos
2. Fundamentos do OAuth2 - Atores, fluxos e tokens
3. OpenID Connect - Extensão do OAuth2 para autenticação
4. Modelos de Aplicação - Web, Mobile e SPAs
5. Tokens e Validação - Tipos, armazenamento e segurança
6. Casos Práticos - Implementação real com código
7. Conclusão - Recapitulação e recursos adicionais

🤓 Dicas para Apresentadores

• Pratique a apresentação antes do grande dia
• Tenha exemplos reais prontos para mostrar
• Prepare-se para perguntas sobre JWT vs. tokens opacos
• Lembre-se: ninguém entende OAuth2 completamente na primeira vez!

Piada bônus: Como você sabe que um desenvolvedor está trabalhando com OAuth?
Ele tem 37 abas abertas com a documentação e ainda assim está confuso! 🤣

📜 Licença

Este projeto está licenciado sob a licença MIT - veja o arquivo LICENSE para detalhes.

---

Feito com ❤️ e muitos ☕ por você!

P.S.: Se esta apresentação lhe ajudou a entender mais sobre OAuth2, considere dar uma estrela no GitHub!