OAuth 2.0 et autorisation JWT en TypeScript : guide complet pour débutants

Introduction à OAuth 2.0 et JWT en TypeScript

Dans le développement web moderne, l'autorisation sécurisée des utilisateurs est la base de toute application. Les deux normes les plus populaires — OAuth 2.0 et JWT (JSON Web Token) — permettent de mettre en œuvre un système fiable d'authentification et de contrôle d'accès. Dans cet article, nous allons voir comment combiner ces technologies en TypeScript pour créer une API sécurisée à partir de zéro.

Cet article est destiné aux développeurs débutants qui connaissent déjà les bases de TypeScript et souhaitent comprendre comment fonctionne l'autorisation en pratique. Nous n'entrerons pas dans des détails théoriques complexes, mais nous concentrerons sur des exemples de code concrets.

Qu'est-ce que OAuth 2.0 ?

OAuth 2.0 est un protocole d'autorisation qui permet aux applications tierces d'obtenir un accès limité aux ressources d'un utilisateur sans transmettre son mot de passe. Imaginez que vous souhaitiez vous connecter à un site via Google : vous ne donnez pas votre mot de passe Google au site, mais vous l'autorisez simplement à obtenir votre email et votre nom. C'est cela, OAuth 2.0.

Qu'est-ce que JWT ?

JWT (JSON Web Token) est un format de jeton compact et autonome qui contient toutes les informations nécessaires sur l'utilisateur sous forme cryptée. Le jeton se compose de trois parties : l'en-tête, la charge utile (payload) et la signature. Grâce à la signature, le serveur peut être certain que le jeton n'a pas été falsifié.

1. Configuration du projet et installation des dépendances

Pour commencer, créons un nouveau projet en TypeScript. Ouvrez le terminal et exécutez les commandes suivantes :

mkdir oauth-jwt-ts\ncd oauth-jwt-ts\nnpm init -y\nnpm install express jsonwebtoken bcrypt dotenv cors\nnpm install -D typescript ts-node @types/express @types/jsonwebtoken @types/bcrypt @types/cors @types/node nodemon

Créez le fichier tsconfig.json avec une configuration de base :

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "commonjs",\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules"]\n}

La structure des dossiers sera la suivante :

\n
• src/ — code source
\n
• src/controllers/ — contrôleurs
\n
• src/middleware/ — middleware pour la vérification des jetons
\n
• src/models/ — modèles de données
\n
• src/routes/ — routes
\n
• .env — variables d'environnement
\n

2. Implémentation de l'authentification de base avec JWT

Commençons par créer un mécanisme simple d'inscription et de connexion utilisant JWT. Créons le fichier src/config.ts pour stocker les constantes :

import dotenv from 'dotenv';\ndotenv.config();\n\nexport const config = {\n  jwtSecret: process.env.JWT_SECRET || 'your-secret-key',\n  jwtExpiresIn: process.env.JWT_EXPIRES_IN || '15m',\n  refreshTokenExpiresIn: process.env.REFRESH_TOKEN_EXPIRES_IN || '7d',\n  port: process.env.PORT || 3000\n};

Créons maintenant un middleware pour vérifier le jeton JWT. Fichier src/middleware/auth.middleware.ts :

import { Request, Response, NextFunction } from 'express';\nimport jwt from 'jsonwebtoken';\nimport { config } from '../config';\n\nexport interface AuthRequest extends Request {\n  user?: { userId: string; email: string };\n}\n\nexport const authenticateToken = (req: AuthRequest, res: Response, next: NextFunction) => {\n  const authHeader = req.headers['authorization'];\n  const token = authHeader && authHeader.split(' ')[1]; // Bearer TOKEN\n\n  if (!token) {\n    return res.status(401).json({ message: 'Jeton non fourni' });\n  }\n\n  try {\n    const decoded = jwt.verify(token, config.jwtSecret) as { userId: string; email: string };\n    req.user = decoded;\n    next