DEV Community: Jailson Anjos

Autenticações com JavaScript Web Tokens

Jailson Anjos — Mon, 14 Nov 2022 14:07:20 +0000

Esse artigo foi publicado originalmente em 07 de setembro de 2021, no meu perfil do Linkedin. Pouco mais de um ano depois, após realizar algumas melhorias no código, resolvi publicar uma versão atualizada. Neste texto, você vai encontrar um exemplo de implementação de controle de acesso de dados utilizando jwt, tanto pela ótica do frontend, quanto do backend, utilizando Reactjs e Nodejs, respectivamente. Para melhor compreensão, é preciso conhecer noções básicas do protocolo para requisições HTTP.

Como é fácil de imaginar, o controle de acesso a determinadas informações é essencial no processo de desenvolvimento web e mobile. É preciso garantir que as informações sejam acessadas apenas pelas pessoas autorizadas. Uma das ferramentas utilizadas para alcançar este objetivo é o Javascript Web Token, ou jwt.

O jwt provê um meio de troca de informações entre o cliente e o servidor de forma segura, por meio da assinatura de um token, usando pares de chaves públicas/privadas. Esse processo permite certificar que a parte que possui a chave privada é quem assinou o token. Para informações mais aprofundadas, acesse aqui https://jwt.io/introduction .

Descrevo abaixo os procedimentos que realizei para implementar esta funcionalidade no meu projeto de rede social para amantes de vinhos.

Autenticação por meio da assinatura do token

Para fazer login, é preciso fazer uma requisição POST com as credenciais da pessoa (email e password, neste caso). O servidor verifica no banco de dados se as credenciais estão corretas. Em caso positivo, um token é assinado e enviado para o cliente, com validade de 20 minutos. O token recebido é salvo no navegador como cookie e redireciona para a rota na qual serão mostradas as informações solicitadas.

A função "handleSubmit", do componente , é chamada quando clicamos em "Enviar", após preenchermos email e senha:

import { FormEvent, useState } from 'react'
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Cookie from "js-cookie";

async function handleSubmit(e: FormEvent){
  e.preventDefault();
  try {
    const result = await axios.post("http://localhost:3333/login", {
      email,
      password,
    });
    Cookie.set("token", result.data.token);
    navigate("/dashboard");
  } catch (error: any) {
      if (error.response.data.message === "E-mail não cadastrado!") {
        setEmailError(error.response.data.message);
        }
      if (error.response.data.message === "Senha incorreta!") {
        setPasswordError(error.response.data.message);
      }
    }
}

No backend, mais precisamente no controller do usuário, a assinatura do token é realizada pelo método "userLogger". Para tanto, em primeiro lugar, o método "validationResult" da biblioteca "express-validator" verifica se os dados recebidos pela requisição POST estão no formato correto. Após, se existe alguma pessoa cadastrada no banco de dados com as credenciais informadas. Havendo sucesso nestas validações, o token é assinado e enviado como resposta, junto com os dados solicitados pelo cliente. Se estas validações falharem, uma mensagem de erro é enviada para o cliente.

const { validationResult } = require("express-validator");
const bcrypt = require("bcryptjs");
const db = require("../database/models");
const jwt = require("jsonwebtoken");

const UserController = {
  userLogger: async(req, res) => {
    const errorsList = validationResult(req);
    if(errorsList.isEmpty()){
      const { email, password } = req.body;
      const usr = await db.User.findOne({
        where: { email }
      });
    if ((usr.mail === email) && (bcrypt.compareSync(password, usr.password))){
      const profile = {
        id: usr.id,
        name: usr.name,
        surname: usr.surname,
        description: usr.description,
        email: usr.email,
        avatar_picture: usr.avatar_picture
      }
      const token = jwt.sign({id: profile.id}, process.env.SECRET, {expiresIn: "20m"});
      return res.json({auth: true, token, profile})
    } else {
      return res.status(500).json({message: 'Login Inválido'});
  }
}

Validação do token

Para acessar as informações privadas, é preciso que o servidor verifique se o token é válido. Para tanto, é necessário incluir o token - que está salvo como cookie neste caso - nos headers da requisição GET pela qual se pretende se obter as informações.

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import Cookies from "js-cookie";

export function Dashboard() {
  const [parameter, setParameter] = useState("");
  const [user, setUser] = useState({
    name: "",
    surname: "",
    description: "",
    avatar_picture: "",
    background_picture: "",
  });
  const [brotherhoods, setBrotherhoods] = useState([]);
  const [events, setEvents] = useState([]);
  const token = Cookies.get("token");
  const navigate = useNavigate();

  useEffect(()=>{
    fetch('http://localhost:3333/dashboard', {
      headers: { authorization: `Bearer ${token}`}
    }).then(
      response => response.json()
     ).then(
        response => {
          setUser(response.User);
          setBrotherhoods(response.brotherhoods);
          setEvents(response.events)
        }).catch(
            error => navigate('/login')
          );
  }, [token, navigate]);

Antes de consultar e retornar as informações requisitadas, um middleware é responsável por verificar se o token recebido no headers da requisição é válido. Em caso negativo, o acesso às informações é negado.

const jwt = require("jsonwebtoken");
  module.exports = (req, res, next) => {
    const token = req.headers.authorization.split(" ")[1];
    const decoded =jwt.verify(token, process.env.SECRET, function (err, decoded) {
     if(err){
       return res.status(401).send({
         mensagem: "Sessão expirada. Por favor, logue novamente"
       });
     return decoded;
  });
  req.headers.authorization = decoded;

  next();
}

Renderização da informação privada na interface do cliente

Utilizando os hooks useState e useEffect a informação recebida como resposta da requisição é atribuída a variáveis e enviadas aos respectivos componentes como propriedades para que possam ser renderizados.

<BrotherhoodsSection brotherhoods={brotherhoods} />
<EventsSection events={events} />

Neste artigo te convidei a acompanhar todo o processo de assinatura e validação de um JavaScript Web Token, desde a requisição do cliente até a resposta do servidor. Podemos resumir o fluxo da seguinte forma:

Cliente faz requisição, enviando suas credenciais;
Servidor recebe requisição, confere as credenciais e, em caso de sucesso, assina um novo token e o devolve ao cliente;
No nosso exemplo, o token é recebido pelo cliente e salvo como cookie no navegador;
Quando o precisa acessar informações protegidas, o cliente busca o cookie no navegador e o envia nos headers da requisição ao servidor;
Servidor valida se o token é válido e se foi assinado pelo cliente que está requisitando a informação. Em caso positivo, os dados solicitados são enviados, caso contrário, é enviada uma mensagem solicitando que um novo login seja realizado, reiniciando o ciclo.

Se você chegou até aqui, agradeço sua atenção! Você implementaria esta funcionalidade de forma diferente? Conhece uma maneira de tornar esse código mais eficiente? Tem alguma dúvida? Adoraria obter o seu feedback.

Até a próxima!

Começando com Jest e React Testing Library

Jailson Anjos — Fri, 24 Jun 2022 16:31:00 +0000

A fase de testes é essencial no processo de desenvolvimento de software. Este momento é fundamental para verificar se o produto, de fato, atende às especificações estabelecidas. Além disto, permite identificar e corrigir comportamentos inesperados que poderiam comprometer a qualidade e a confiabilidade da aplicação.

Quando começamos a programar, o processo de testagem acontece de forma orgânica. Por exemplo, ao criarmos um botão que ao ser clicado muda de cor, após escrevermos o código para tanto, é natural querermos executar manualmente o programa e verificarmos o seu funcionamento. Todavia, em projetos maiores, não seria prático testar todas as funcionalidades desta forma. Testes automatizados reduzem custos, aumentam a produtividade, a eficiência e a eficácia do time. Além disso, possibilitam implementar novas funcionalidades sem “quebrar” o código antigo. Desenvolvedores que trabalham com React têm à disposição o Jest e a React Testing Library (RTL) para testar suas aplicações.

A lógica por trás do uso destas ferramentas é simular a execução das funcionalidades da aplicação e conferir se a resposta é igual à esperada. Ao testarmos manualmente um botão de cor A que muda para cor B quando clicado, provavelmente, seguiríamos esta sequência de ações:

Abrir a página;
Procurar pelo botão de cor A;
Clicar no botão;
Conferir se o botão mudou para a cor B.

O teste automatizado para verificar o funcionamento de um botão azul, com o texto “Troca a Cor”, presente no componente < Page />, que ao ser clicado deva mudar para a cor vermelha, poderia ser escrito assim:


import { render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";
import Page from './Page';

test('Deve trocar a cor de azul para vermelha quando clicado', () => {

  //Abrir a página
  render(<Page />);

  //Encontrar o botão com o nome “Troca a Cor”
  const colorButton = screen.getByRole('button', {name: 'Troca a Cor'});

  //Clicar no botão
  userEvent.click(colorButton);

  //Verificar se o botão assumiu a cor vermelha
  expect(colorButton).toHaveStyle({backgroundColor: 'red'});

});

Como observado, é possível estabelecer um paralelo entre o teste automatizado e o teste realizado de forma manual, o que facilita a compreensão de cada passo realizado.

Dissecando o código

Quem entendeu o exemplo acima observando os comentários pode pular esta seção.

Para abrir a página, utilizamos a função "render()";
Para procurar pelo botão, poderíamos utilizar a query “getByRole”, informando que a “role”, ou papel desempenhado, é de um botão;
Para clicar no botão, poderíamos utilizar a biblioteca “userEvent”, que simula interações com a interface;
Para verificar se o botão mudou de cor, utilizamos o expect(), para verificar se a propriedade “background color” do CSS aplicado é a cor B.

Este exemplo é simples e, naturalmente, conforme a complexidade do código aumenta, funcionalidades mais sofisticadas disponíveis no Jest e na RTL serão necessárias para que os testes sejam realizados de forma adequada. Contudo, objetivo deste artigo não é exaurir todas as possibilidades de uso destas tecnologias, mas ajudar iniciantes a compreender um pouco do funcionamento destas ferramentas fundamentais para garantir a qualidade do código e das próprias interfaces construídas em React.

Sim, mas o que é o Jest?

O Jest é um framework para testes em JavaScript e responsável por localizar, executar e informar se os testes passaram ou falharam. Pode ser utilizado em aplicações em React, Vue, Node, Typescript, Angular, etc.
Por meio do comando “expect()”, podemos verificar se o objeto possui o atributo que esperamos para definir se a funcionalidade atende ou não às especificações requeridas.

Quais são as responsabilidades da React Testing Library?

A RTL disponibiliza uma DOM virtual, na qual, podemos localizar os elementos que compõem a página. O objeto “screen” exportado por esta DOM virtual contém os comandos de busca (queries) necessários para encontrar estes elementos e seu uso é recomendado, pois, realizar a mesma tarefa utilizando apenas o Jest seria muito trabalhoso.

A query utilizada para encontrar o botão foi da família “getBy”. Este tipo de query é utilizado quando esperamos encontrar um objeto na página. Caso esperássemos não encontrar o objeto, utilizaríamos “queryBy”, e, nas situações em que encontrar o objeto procurado depende do carregamento de uma requisição assíncrona (como, por exemplo, o retorno das informações referentes a uma consulta a um banco de dados), utilizaríamos “findBy”.

Nota sobre acessibilidade

No exemplo, localizamos o botão pesquisando pelo papel (role) que o mesmo desempenha na página (button). Todavia, é importante mencionar que é possível localizar elementos pesquisando pelo texto, pelo id, pelo título, entre outras possibilidades. A query getByRole, contudo, é capaz de localizar todos os elementos acessíveis na tela. Se não for possível encontrar o elemento em questão com esta ferramenta, é possível que haja problemas de acessibilidade na aplicação.

Resumo e dicas

Nesse artigo, falamos um pouco sobre testes automatizados e sua importância para a manutenção da qualidade do software. Além disso, discutimos a respeito do framework Jest e da biblioteca RTL, utilizados para realizar testes automatizados em aplicações React. Para aprofundar um pouco mais sobre o assunto, recomendo este curso da Bonnie Schulkin, hospedado na Udemy, que serviu de base para este texto. Outra dica é consultar as documentações da RTL e do Jest, e começar a experimentar os conceitos em seus projetos. Ainda há a opção de utilizar o praticar na no playground do RTL. Para ir ainda mais fundo, este artigo, escrito por um dos criadores da RTL, pode ser bastante proveitoso.

Já usa RTL e Jest? Deixe seu comentário! Até a próxima!