Autenticação JWT no React Native com API REST em NodeJS

Uma das funcionalidades mais comuns em aplicações móveis ou web, com certeza, é a parte de autenticação e quando lidamos com uma API REST, nesse caso criada com NodeJS, é muito comum utilizarmos a técnica de JWT (JSON web token).

O JWT consiste em um token criptografado que é gerado pelo back-end no processo de login e utilizado pelo front-end em todas requisições subsequentes.

Além de validar o acesso do usuário, o token ainda consegue guardar algumas informações codificadas como ID do usuário para identificação posterior.

Nesse post vamos conhecer como esse processo é realizado utilizando uma API construída com NodeJS, Express e MongoDB e consumida por uma aplicação móvel feita em React Native.

Autenticação no back-end com JWT

Vamos começar pelo servidor NodeJS configurado para aceitar cadastro de novos usuários e autenticação retornando um token JWT.

Eu deixei um projeto com essa API já configurada e pronto para você executar em sua máquina, para isso, com o Git vamos clonar o repositório e fazer as devidas configurações:

git clone https://github.com/Rocketseat/blog-auth-rn-node-backend
cd auth-rn-node-backend
npm install

Assim que todas as dependências estiverem instaladas, você pode executar o comando node server.js (você precisa ter o Node instalado).

Ah, nesse exemplo utilizei um banco de dados MongoDB online, ou seja, se você quiser utilizar um banco offline configure a URL de conexão com o MongoDB no arquivo server.js.

Com o projeto rodando você tem duas ações disponíveis na API:

POST http://localhost:3000/api/register: Acessando esse endpoint com método POST e enviando um JSON com os dados abaixo podemos cadastrar um novo usuário.

{
  "name": "Diego Fernandes",
  "email": "diego@example.com",
  "password": 123456
}

POST http://localhost:3000/api/authenticate: Esse segundo endpoint é utilizado para autenticar um usuário recebendo o e-mail e senha por JSON e retornando dados do usuário logado e o token JWT que será utilizado para autorizar o usuário nas próximas requisições.

GET http://localhost:3000/api/me: Essa rota está configurada para ser acessada APENAS se o usuário estiver autenticado enviando o token JWT.

Pontos importantes

Antes de continuarmos para a parte do React Native precisamos analisar alguns pontos importantes dentro dessa estrutura que deixei pronta para entendermos como está funcionando o processo de autenticação.

Primeiramente, no arquivo models/user.js temos alguns pontos que são cruciais para o funcionamento da autenticação:

// models/user.js
// ...

UserSchema.pre("save", async function hashPassword(next) {
  if (!this.isModified("password")) next();

  this.password = await bcrypt.hash(this.password, 8);
});

UserSchema.methods = {
  compareHash(hash) {
    return bcrypt.compare(hash, this.password);
  },

  generateToken() {
    return jwt.sign({ id: this.id }, "secret", {
      expiresIn: 86400
    });
  }
};

// ...

O primeiro trecho de código UserSchema.pre... é utilizado para criptografar a senha do usuário automaticamente toda vez que um novo usuário for criado ou alterado.

Além disso, adicionei dois métodos ao usuário, o compareHash faz a comparação da senha para validar se a senha digitada está correta enquanto que o método generateToken gera o token JWT que vamos utilizar posteriormente.

Além disso, você poderá ver toda lógica de criação/autenticação do usuário no arquivo controllers/userController.js.

Um último ponto importante é analisarmos o arquivo middlewares/auth.js que é responsável por autorizar o acesso às rotas bloqueadas para usuários autenticados.

Basicamente, esse arquivo busca a presença de uma variável chamada Authorization no cabeçalho da nossa requisição com o seguinte formato:

Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViMGMzODM3MGE1OTU4MGRmNjE5ZDEyMCIsImlhdCI6MTUyNzUyNzQ4MCwiZXhwIjoxNTI3NjEzODgwfQ.pAfw3KQ5JnkGYCpZN3kyTMz1_G3cvVRBYAl__-X0bG4

Utilizando JWT no React Native

Entendendo as rotas e a maneira que o token de autenticação é enviado para o back-end podemos partir para o front-end no React Native que precisará enviar o token JWT em todas as requisições após o login para poder acessar a rota.

Se você ainda não tem conhecimento em React Native, recomendo fazer esse minicurso gratuito.

Para seguir os passos e consumir essa API no React Native eu escrevi outro post falando sobre fluxo de autenticação no React Native que você pode seguir.

No fim, você terá uma aplicação com o seguinte comportamento:

Concluindo

Agora você já consegue aplicar o conceito de autenticação com JWT no React Native utilizando uma API construída com Express no NodeJS.

Se você quiser ir mais a fundo e ver como enviar o token JWT em todas requisições à API utilizando o React Native, recomendo assistir esse vídeo:

Ah, se gostou do post, não esquece de deixar um comentário aí embaixo e compartilhar com os amigos 🙂