¿Qué es un JWT?

En el mundo del diseño y desarrollo web, hay múltiples tecnologías y herramientas que los desarrolladores deben aprender para mejorar la experiencia de los usuarios y la seguridad de las aplicaciones. En mi experiencia como desarrollador, he pasado de ser un Frontend Developer a un Backend Developer, y una de las herramientas que más me ha impresionado es el JWT o JSON Web Token, especialmente cuando se trata de la autenticación en aplicaciones que usan REST APIs.

¿Qué es un JWT?

Un JWT (JSON Web Token) es un estándar abierto que define una forma compacta y autónoma de transmitir información entre dos partes de forma segura como un objeto JSON. Este token se firma digitalmente usando una clave privada (o un secreto compartido) que asegura que el token no haya sido alterado.

El JWT contiene tres partes:

1. Header (Encabezado): Define el tipo de token (JWT) y el algoritmo de cifrado que se usará para la firma, como HMAC o SHA256.
2. Payload (Cuerpo): Contiene las afirmaciones o datos sobre el usuario o la aplicación, como el ID del usuario o permisos.
3. Signature (Firma): Es el resultado de la combinación del encabezado codificado en base64 y el payload, firmados con la clave secreta del servidor.

Autenticación con JWT: Ejemplo práctico

Uno de los usos más comunes de JWT es en la autenticación de usuarios. En mi proyecto Marbust Accounts, utilizo JWT para manejar el inicio de sesión y mantener la sesión de los usuarios de manera segura. Cuando un usuario inicia sesión, el backend genera un JWT que incluye el ID del usuario en el payload. Este token se devuelve al frontend y se almacena, por ejemplo, en el localStorage del navegador. En cada solicitud posterior que requiera autenticación, el frontend envía el token al backend en los encabezados de la solicitud, y el backend verifica su validez.

Generación de un JWT en Node.js & Express:

Instalar las dependencias:

npm install jsonwebtoken bcryptjs

En el controlador del inicio de sesión, genera el JWT de la siguiente manera:

const token = jwt.sign({ userId: user.id, roleId: user.roleId }, config.jwtSecret, { expiresIn: '1h' });
res.status(200).json({
    user: data,
    message: "¡Inicio de sesión exitoso!",
    token: token
});

Aquí se firma el JWT con una clave secreta que puedes definir en tu archivo de configuración.

Verificación de un JWT:

Para verificar un JWT en Node.js, podemos usar un middleware en Express, que actúa como un filtro para las rutas que requieren autenticación.

Middleware para verificar JWT:

const jwt = require('jsonwebtoken');
const config = require('../config');

module.exports = (req, res, next) => {
    const authHeader = req.get('Authorization');
    if (!authHeader) {
        return res.status(401).json({ error: 'Not authenticated.' });
    }
    const token = authHeader.split(' ')[1];
    try {
        const decodedToken = jwt.verify(token, config.jwtSecret);
        req.userId = decodedToken.userId;
        req.roleId = decodedToken.roleId;
        next();
    } catch (err) {
        return res.status(500).json({ error: 'Token verification failed.' });
    }
};

Este middleware verifica que el token esté presente en la cabecera de la solicitud, lo separa, lo decodifica y verifica su firma usando la clave secreta.

Beneficios de JWT:

• Seguridad: Los JWT están firmados, lo que garantiza que la información contenida en ellos no ha sido alterada.
• Escalabilidad: Almacenar el JWT en el cliente y enviarlo con cada solicitud reduce la carga en el servidor, ya que no es necesario mantener sesiones en el servidor.
• Compatibilidad: JWT es compatible con múltiples lenguajes y frameworks, lo que lo convierte en una excelente opción para aplicaciones que requieren interoperabilidad entre diferentes tecnologías.

Conclusión

El uso de JWT en el desarrollo de aplicaciones web modernas es clave para implementar sistemas de autenticación seguros y escalables. Implementar y gestionar JWT puede parecer complicado al principio, pero una vez que entiendes cómo funcionan y cómo integrarlos en tus aplicaciones, resultan ser una herramienta sumamente valiosa.

Si deseas aprender más sobre diseño y desarrollo web, te invito a leer otros artículos en mi blog y también en mi canal de YouTube, donde subo contenido relacionado con estas temáticas.

Sobre el Autor:

Marco Antonio Bustillos Quiroz
Bachelor of Science in Web Design and Development (BYU-Idaho)
Full Stack Web Developer con más de 7 años de experiencia en desarrollo Front End y 5 años en desarrollo Back End. Mis proyectos incluyen sitios web, landing pages, aplicaciones web, REST APIs, e-commerce, y mucho más. Mi pasión es crear experiencias digitales impactantes y compartir conocimientos con otros desarrolladores.