The latest articles on DEV Community by Wanderson Chaves (@wanderson_chaves_f75c49b3). https://dev.to/wanderson_chaves_f75c49b3 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1925072%2F74b4efd7-f296-4b79-b312-92fdfc9843d2.png https://dev.to/wanderson_chaves_f75c49b3 en Wanderson Chaves Sun, 22 Jun 2025 18:33:23 +0000 https://dev.to/wanderson_chaves_f75c49b3/construindo-uma-integracao-com-o-spotify-usando-nextjs-api-rest-e-cookies-seguros-23cm https://dev.to/wanderson_chaves_f75c49b3/construindo-uma-integracao-com-o-spotify-usando-nextjs-api-rest-e-cookies-seguros-23cm <p>Nos últimos dias, venho desenvolvendo uma funcionalidade para integrar meu portfólio pessoal com a API do Spotify. A ideia é exibir músicas que estou ouvindo, meus top tracks e dispositivos conectados — tudo isso diretamente na interface do meu site, com autenticação segura e atualizações em tempo real.</p> <p>🎯 Objetivo do Projeto</p> <p>A proposta principal é integrar a experiência do usuário com minha rotina musical, tornando o site mais pessoal, interativo e tecnicamente robusto. Além disso, utilizei a integração com o Dev.to para exibir meus artigos no blog embutido do próprio portfólio — e este post é o primeiro teste da integração! 😄</p> <p>⸻</p> <p>🔧 Tecnologias Utilizadas<br> • Next.js (App Router) — framework React full-stack<br> • TypeScript — segurança de tipos e manutenibilidade<br> • Spotify Web API — para acessar dados musicais e de dispositivos<br> • Cookies HTTP-only — para armazenar tokens com segurança<br> • JWT (JSON Web Token) — para autenticação e renovação de sessão<br> • Axios — requisições à API do Spotify<br> • Dev.to API — para importar e renderizar artigos automaticamente</p> <p>⸻</p> <p>🔐 Segurança em Primeiro Lugar</p> <p>Tokens de acesso e refresh são armazenados como cookies HTTP-only, garantindo que o navegador não tenha acesso direto a essas informações sensíveis via JavaScript. Além disso, estou usando JWT para controlar a sessão com expiração automática e renovação via endpoint /api/refresh.</p> <p>⸻</p> <p>🧠 Aprendizados Técnicos<br> • Como lidar com o erro Environment variable not found em ambientes de produção como Vercel<br> • Estratégias para evitar any em APIs externas<br> • Validação de cookies para controlar exibição condicional do botão de login<br> • Boas práticas com dotenv, tipagem segura e fallback para dados ausentes</p> <p>⸻</p> <p>💡 Próximos Passos<br> • Melhorar cache e performance com SWR ou React Query<br> • Criar um painel de controle musical no admin do portfólio<br> • Incluir integração com o YouTube Music como alternativa futura<br> • Expandir o blog com mais conteúdos sobre arquitetura limpa, NestJS e automações com Docker + AWS</p> <p>⸻</p> <p>🤝 Conclusão</p> <p>Este projeto tem sido uma ótima oportunidade de aplicar conceitos modernos de frontend, backend e segurança em aplicações web. Com a API do Dev.to integrada, agora posso escrever artigos diretamente aqui — o que facilita muito manter a comunidade atualizada sobre o que venho aprendendo e criando.</p> <p>Se quiser ver isso funcionando ao vivo, visite meu site (link do seu domínio).</p> <p>⸻</p> <p>📌 Obrigado por acompanhar! Em breve, mais tutoriais práticos e insights sobre desenvolvimento web.</p> webdev programming javascript beginners