Travailler avec les jetons JWT en TypeScript : bibliothèque jsonwebtoken et guide complet

Jetons JWT en TypeScript : guide complet avec la bibliothèque jsonwebtoken

\n\n

JSON Web Token (JWT) est un standard ouvert (RFC 7519) pour la création de jetons d'accès basés sur le format JSON. JWT est largement utilisé pour l'authentification et l'échange d'informations entre le client et le serveur. En TypeScript, grâce au typage strict, travailler avec JWT devient particulièrement pratique et sécurisé. Dans cet article, nous verrons comment utiliser la bibliothèque populaire jsonwebtoken en TypeScript pour créer, vérifier et gérer les jetons JWT.

\n\n

Installation et configuration

\n\n

Pour commencer, installons les paquets nécessaires :

\n\n

npm install jsonwebtoken\nnpm install -D @types/jsonwebtoken

\n\n

Le premier paquet est la bibliothèque elle-même, le second est les types TypeScript pour celle-ci. Après l'installation, créons un fichier jwt.service.ts où nous stockerons toute la logique de gestion des jetons.

\n\n

Création d'un jeton JWT

\n\n

La fonction principale de jsonwebtoken est sign(). Voyons son utilisation avec le typage :

\n\n

import jwt from 'jsonwebtoken';\n\ninterface TokenPayload {\n  userId: number;\n  email: string;\n  role: 'user' | 'admin';\n}\n\nconst createAccessToken = (payload: TokenPayload): string => {\n  const secret = process.env.JWT_SECRET || 'default_secret';\n  const options: jwt.SignOptions = {\n    expiresIn: '15m', // le jeton est valide 15 minutes\n    algorithm: 'HS256',\n  };\n\n  return jwt.sign(payload, secret, options);\n};

\n\n

Important : ne stockez jamais la clé secrète dans le code. Utilisez des variables d'environnement (fichier .env).

\n\n

Vérification et décodage du jeton

\n\n

Pour vérifier l'authenticité du jeton, on utilise la fonction verify(). Elle vérifie automatiquement la signature et la date d'expiration :

\n\n

const verifyToken = (token: string): TokenPayload => {\n  const secret = process.env.JWT_SECRET || 'default_secret';\n\n  try {\n    const decoded = jwt.verify(token, secret) as TokenPayload;\n    return decoded;\n  } catch (error) {\n    if (error instanceof jwt.TokenExpiredError) {\n      throw new Error('Le jeton a expiré');\n    }\n    if (error instanceof jwt.JsonWebTokenError) {\n      throw new Error('Jeton invalide');\n    }\n    throw error;\n  }\n};

\n\n

Notez le cast de type as TokenPayload — cela garantit que TypeScript connaîtra la structure des données décodées.

\n\n

Jetons de rafraîchissement : prolongation de session

\n\n

En pratique, les jetons d'accès ont une courte durée de vie (15-30 minutes), d'où la nécessité d'un mécanisme pour les renouveler. Pour cela, on utilise un jeton de rafraîchissement avec une durée de vie plus longue :

\n\n

const createRefreshToken = (payload: TokenPayload): string => {\n  const secret = process.env.JWT_REFRESH_SECRET || 'refresh_secret';\n  const options: jwt.SignOptions = {\n    expiresIn: '7d', // une semaine\n    algorithm: 'HS256',\n  };\n\n  return jwt.sign(payload, secret, options);\n};\n\nconst refreshAccessToken = (refreshToken: string): string => {\n  const secret = process.env.JWT_REFRESH_SECRET || 'refresh_secret';\n\n  try {\n    const decoded = jwt.verify(refreshToken, secret) as TokenPayload;\n    // On peut vérifier si le jeton de rafraîchissement n'a pas été révoqué dans la base de données\n    return createAccessToken({\n      userId: decoded.userId,\n      email: decoded.email,\n      role: decoded.role,\n    });\n  } catch {\n    throw new Error('Jeton de rafraîchissement invalide');\n  }\n};

\n\n

Middleware pour Express en TypeScript

\n\n

L'intégration de JWT avec Express.js nécessite la création d'un middleware. Voici une version typée :

\n\n

import { Request, Response, NextFunction } from 'express';\n\ninterface AuthRequest extends Request {\n  user?: TokenPayload;\n}\n\nconst authMiddleware = (req: AuthRequest, res: Response, next: NextFunction) => {\n  const authHeader = req.headers.authorization;\n\n  if (!authHeader || !authHeader.startsWith('Bearer ')) {\n    return res