Cómo Integrar la Autenticación JWT en Aplicaciones Móviles con Expo y NestJS

Introducción

Integrar la autenticación en aplicaciones móviles es un paso fundamental para garantizar la seguridad de los datos de los usuarios. En este artículo, aprenderá cómo implementar la autenticación JWT (JSON Web Token) en una aplicación desarrollada con Expo y un backend en NestJS. Esta integración no solo proporciona seguridad, sino que también mejora la experiencia del usuario al garantizar que solo los usuarios autenticados tengan acceso a funcionalidades específicas.

¿Qué es JWT?

JWT es un estándar abierto (RFC 7519) que define un formato compacto y autosuficiente para la transmisión de información entre partes como un objeto JSON. Se utiliza principalmente para la autenticación y el intercambio seguro de información.

Ventajas de JWT

• Compacto: Puede enviarse a través de URLs, parámetros POST o encabezados HTTP.
• Autocontenido: Contiene toda la información necesaria sobre el usuario, eliminando la necesidad de consultar la base de datos.
• Seguridad: Puede ser firmado y cifrado, garantizando que los datos no sean alterados.

Preparando el Entorno

1. Configurando NestJS

Primero, necesitas un backend en NestJS que soporte autenticación. Sigue los pasos a continuación:

Instalación de NestJS

npm i -g @nestjs/cli
nest new backend

Agregando Dependencias

Para trabajar con JWT, instala las siguientes bibliotecas:

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

2. Creando un Módulo de Autenticación

Crea un módulo de autenticación en NestJS:

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

Implementando la Lógica de Autenticación

En el servicio de autenticación, implementa la lógica para generar y validar tokens JWT. Un ejemplo básico sería:

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 Expo

Ahora, vamos a preparar la aplicación móvil utilizando Expo.

Creando el Proyecto Expo

expo init mobile
cd mobile

Instalando Axios

Utilizaremos Axios para hacer peticiones HTTP a nuestro backend:

npm install axios

Integrando JWT en la Aplicación Móvil

1. Autenticando al Usuario

Crea una función para autenticar al usuario y almacenar el token JWT en el almacenamiento 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://tu-backend.com/auth/login', {
      username,
      password,
    })
    const { access_token } = response.data
    await AsyncStorage.setItem('token', access_token)
  } catch (error) {
    console.error('Error de autenticación', error)
  }
}

2. Protegiendo las Rutas

Al hacer solicitudes a rutas que requieren autenticación, incluye el token JWT en los encabezados:

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

Ejemplos de Uso

Caso 1: Aplicación de Tareas

Una aplicación de tareas implementó autenticación JWT con Expo y NestJS, permitiendo a los usuarios autenticarse de forma rápida y segura. El sistema redujo el tiempo de inicio de sesión en un 40% y mejoró la experiencia del usuario.

Caso 2: E-commerce

Un e-commerce utilizó JWT para proteger el área de administración, asegurando que solo los usuarios autenticados pudieran acceder a información sensible. La implementación resultó en una mejora significativa en la seguridad de la plataforma.

Conclusión

Integrar la autenticación JWT en aplicaciones móviles usando Expo y NestJS es un enfoque efectivo para garantizar la seguridad y la eficiencia. Siguiendo los pasos descritos, puedes ofrecer una experiencia de usuario fluida y segura.

Listo para implementar autenticación segura en tu aplicación?

Ponte en contacto con nuestro equipo y descubre cómo podemos ayudarte a integrar JWT en tu proyecto.

Solicitar presupuesto