Hoje eu trabalho inteiramente com Back-End, mas quando comecei a trabalhar como desenvolvedor a uns 4 anos atrás, eu comecei com o Front-End, e a biblioteca que mais utilizei foi sem dúvida o React.js, eu devo ter feito dezenas de projetos utilizando uma estrutura bem pareci, que era bem comum nessa época.
Depois de quase 2 anos sem mexer em quase nada de Front-End, me bateu aquela saudade sabe? Uma vontade de fazer algo visual, de passar 2 horas tentando arrumar alguma coisa no CSS, essas coisas… Então decidi ver como estavam as coisas nesse ambiente, para minha não tão grande surpresa, muita coisa mudou!
Você não precisa ter um blog, você não precisa falar de desenvolvimento em redes sociais, você não precisa nem seguir desenvolvedores no twitter, você nem precisa estar na “bolha DEV” para ser um bom desenvolvedor! Mas então por que eu tenho um blog?
Sinceramente eu sempre gostei da ideia do que a comunidade de desenvolvimento oferece de graça na internet, quantas pessoas não aprenderam programação e conseguiram um emprego nessa área apenas com conteúdos gratuitos?
A alguns dia seu comecei o desafio de escrever um post par ao blog por 30 dias, você pode ver esses posts na tag 30daysOfPosts, mas eu não defini muito bem quais seriam as regras então acho que vou dar uma trapaceada nesse post, e não falar sobre tecnologia, mas sim sobre as nossas bolhas e a limitação do que conhecemos por verdade. Sim eu sei tema talvez ja meio batido, mas esse blog existe para compartilhar conhecimento, principalmente em tecnologia, seguindo a minha abordagem, então vamos sair um pouquinho do assunto principal para falar de algo que pode também ser útil no nosso vasto mundo da tecnologia.
Se tem uma coisa que desenvolvedor faz com frequência e requisição, independente se você esta trabalhando com Front ou como Back, eu aposto que você precisou testar pelo menos uma requisição hoje, para validar o seu trabalho, ou para ter certeza que você esta chamando a API direito. Eu vou apostar também que você não fez esse teste com o curl, provavelmente você usou algo como o Postman, ou o objeto desse post o Insomnia!
A primeira coisa que você precisa ter em mente sobre OAuth e que muito provavelmente o motivo que te levou a buscar sobre OAuth, e que te levou a esse post, é no minimo parcialmente incorreto! A grande amioria das implementações de cliente OAuth buscam um single sign on (SSO), em outras palavras compartilha a autenticação com outro sistema, arrisco dizer que a maioria das pessoas tem contato com OAuth na busca por implementar o famoso “login com o google”, talvez com o Facebook, sim esse é uma das possibilidades mas esse protocolo não é exclusivo a esse caso de uso.
Vamos começar instalando o Express e uma biblioteca para fazer a criação e validação do token JWT:
npm i express jsonwebtoken dayjs uuid Agora vamos criar o nosso serviço com um endpoint que queremos muito proteger:
// server.js const express = require("express") const app = express() app.use(express.json()) app.get("/secret", (req, res) => { return res.json({ message: "uma mensagem super secreta que deve ser protegida" }) }) app.listen(4000, () => { console.log(Listening on port 4000) }) O primeiro passo vai ser criar uma rota para o login:
Em alguns casos, pouquissimos caso podemos precisar que uma determinada rota do react seja renderizada mesmo sem estar na url correta.
Busquei pr essa solução porque em uma aplicação que estava fazendo eu tinha duas telas: uma com a aplicação em si e outra com um iframe para uma aplicação de um terceiro, dependendo do evento que ocorresse na minha tela eu redirecionava para a tela do terceiro.
Até ai tudo bem eu configurei duas rotas uma para a minha aplicação e outra para um componente que so tinha o iframe da aplicação terceira, so que a aplicação terceira demorava muito para carregar, e quando carregava se o usuário voltasse para a minha aplicação o iframe morria e seria carregar tudo novamente caso o usuário decidisse voltar.