Como Integrar Autenticação JWT em Apps Mobile com Expo e NestJS

Introdução

Integrar autenticação em aplicações mobile é um passo fundamental para garantir a segurança dos dados dos usuários. Neste artigo, você aprenderá como implementar a autenticação JWT (JSON Web Token) em um aplicativo desenvolvido com Expo e um backend em NestJS. Essa integração não apenas proporciona segurança, mas também melhora a experiência do usuário ao garantir que apenas usuários autenticados tenham acesso a funcionalidades específicas.

O Que é JWT?

JWT é um padrão aberto (RFC 7519) que define um formato compacto e autossuficiente para a transmissão de informações entre partes como um objeto JSON. Ele é utilizado principalmente para autenticação e troca de informações seguras.

Vantagens do JWT

• Compacto: Pode ser enviado através de URLs, parâmetros POST ou cabeçalhos HTTP.
• Autocontido: Contém todas as informações necessárias sobre o usuário, eliminando a necessidade de consultar o banco de dados.
• Segurança: Pode ser assinado e criptografado, garantindo que os dados não sejam alterados.

Preparando o Ambiente

1. Configurando o NestJS

Primeiro, você precisa de um backend em NestJS que suporte autenticação. Siga os passos abaixo:

Instalação do NestJS

npm i -g @nestjs/cli
nest new backend

Adicionando Dependências

Para trabalhar com JWT, instale as seguintes bibliotecas:

npm install @nestjs/jwt @nestjs/passport passport passport-jwt

2. Criando um Módulo de Autenticação

Crie um módulo de autenticação no NestJS:

nest generate module auth
nest generate service auth
nest generate controller auth

Implementando a Lógica de Autenticação

No serviço de autenticação, implemente a lógica para gerar e validar tokens JWT. Um exemplo básico seria:

import { Injectable } from '@nestjs/common'
import { JwtService } from '@nestjs/jwt'

@Injectable()
export class AuthService {
  constructor(private readonly jwtService: JwtService) {}

  async login(user: any) {
    const payload = { username: user.username, sub: user.userId }
    return {
      access_token: this.jwtService.sign(payload),
    }
  }
}

3. Configurando o Expo

Agora, vamos preparar o aplicativo mobile utilizando Expo.

Criando o Projeto Expo

expo init mobile
cd mobile

Instalando Axios

Utilizaremos o Axios para fazer requisições HTTP ao nosso backend:

npm install axios

Integrando o JWT no App Mobile

1. Autenticando o Usuário

Crie uma função para autenticar o usuário e armazenar o token JWT no armazenamento local:

import axios from 'axios'
import AsyncStorage from '@react-native-async-storage/async-storage'

const login = async (username, password) => {
  try {
    const response = await axios.post('http://seu-backend.com/auth/login', {
      username,
      password,
    })
    const { access_token } = response.data
    await AsyncStorage.setItem('token', access_token)
  } catch (error) {
    console.error('Erro de autenticação', error)
  }
}

2. Protegendo as Rotas

Ao fazer requisições para rotas que requerem autenticação, inclua o token JWT nos cabeçalhos:

const fetchData = async () => {
  const token = await AsyncStorage.getItem('token')
  const response = await axios.get('http://seu-backend.com/protegido', {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
  return response.data
}

Exemplos de Uso

Caso 1: Aplicativo de Tarefas

Um aplicativo de tarefas implementou autenticação JWT com Expo e NestJS, permitindo que os usuários se autenticem de forma rápida e segura. O sistema reduziu o tempo de login em 40% e melhorou a experiência do usuário.

Caso 2: E-commerce

Um e-commerce utilizou JWT para proteger a área de administração, garantindo que apenas usuários autenticados pudessem acessar informações sensíveis. A implementação resultou em uma melhoria significativa na segurança da plataforma.

Conclusão

Integrar autenticação JWT em aplicativos mobile usando Expo e NestJS é uma abordagem eficaz para garantir a segurança e a eficiência. Ao seguir os passos descritos, você pode oferecer uma experiência de usuário fluida e segura.

Chamada para Ação

Pronto para implementar autenticação segura em seu app?

Entre em contato com nossa equipe e descubra como podemos ajudar a integrar JWT no seu projeto.

Solicitar orçamento