Descodificar JWT en JavaScript o Node

JSON Web Tokens (JWT) se utilizan comúnmente para autenticación y autorización en aplicaciones web y apps. Cuando un usuario inicia sesión, el servidor crea un token JWT y lo envía al cliente. El cliente puede almacenar el token en la memoria o en el almacenamiento local y enviarlo en cada solicitud para demostrar que está autorizado. Con ello, el backend puede verificar la validez del token y permitir o denegar el acceso a los recursos protegidos. Además, incluye información muy útil del cliente. Hablamos de un estándar de tokens de acceso basado en JSON (JavaScript Object Notation). Es un formato compacto y seguro para transmitir información de manera segura entre partes.

A continuación puedes ver un ejemplo clásico, un string comúnmente devuelvo al identificarte. Los desarrolladores de Apps están aburridos de verlo cuando el cliente hace login sobre Apple o Google.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMzQ1Njc4OTAiLCJuYW1lIjoiSm9obiBEb2UiLCJlbWFpbCI6ImNvcnJlb0BlamVtcGxvLmNvbSJ9.bSTW96-557UM0vV3fD3TTXtFZLBWjsTY5exzTA0Befw

Si lo separamos por puntos, nos encontramos 3 partes con objetivos diferentes.

1. La cabecera: Descripción del algoritmo y tipo de token.

Si descodificamos eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 nos encontraremos el tipo de algoritmo que se esta utilizando.

{
  "alg": "HS256",
  "typ": "JWT"
}

2. Payload: La información.

Si descodificamos eyJpZCI6IjEyMzQ1Njc4OTAiLCJuYW1lIjoiSm9obiBEb2UiLCJlbWFpbCI6ImNvcnJlb0BlamVtcGxvLmNvbSJ9 veremos la información sobre el cliente o usuario.

{
  "id": "1234567890",
  "name": "John Doe",
  "email": "correo@ejemplo.com"
}

3. Verificación de firma: Comprueba que los datos no han sido manipulados.

Si descodificamos bSTW96-557UM0vV3fD3TTXtFZLBWjsTY5exzTA0Befw habrá un código para verificar la integridad de los datos.

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),

)

¿Cómo puedo descodificarlo?

Para descodificarlo y obtener una previa puedes usar herramientas online como https://jwt.io/.

No obstante, si quieres ver su contenido desde el lado del cliente, usando JavaScript vainilla, puedes usar la siguiente función:

/**
 * Decode JWT (JSON Web Token - <https://jwt.io/>) to object
 * @param {string} token
 * @returns {object}
 */
function decodeJWT(token) {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
    return JSON.parse(jsonPayload);
}

Si ejecuto el string anterior obtendría el JSON que hemos puesto como ejemplo:

decodeJWT("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyMzQ1Njc4OTAiLCJuYW1lIjoiSm9obiBEb2UiLCJlbWFpbCI6ImNvcnJlb0BlamVtcGxvLmNvbSJ9.bSTW96-557UM0vV3fD3TTXtFZLBWjsTY5exzTA0Befw");
// { id: "1234567890", name: "John Doe", email: "correo@ejemplo.com" }

En caso de utilizar Node, también te proporciono un ejemplo más minimalista usando Buffer:

/**
 * Decode JWT (JSON Web Token - https://jwt.io/) to object
 * @param {string} token
 * @returns {object}
 */
function decodeJWT(token) {
    return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
}

Para más información, librerías y aclaraciones técnicas puedes consultar https://jwt.io/introduction.