Autorisation et authentification en TypeScript : guide complet

Autorisation et authentification en TypeScript : de la théorie à la pratique

Dans le développement web moderne, la sécurité des applications est une pierre angulaire. TypeScript, en tant que surcouche fortement typée de JavaScript, offre des outils puissants pour construire des systèmes fiables d'authentification (vérification de l'identité de l'utilisateur) et d'autorisation (vérification des droits d'accès). Dans cet article, nous allons aborder les concepts clés, les bibliothèques populaires et écrire un exemple fonctionnel en TypeScript.

Concepts de base : authentification vs autorisation

Ces termes sont souvent confondus. Distinguons-les clairement :

• Authentification (Authentication) — processus de vérification de qui vous êtes. Par exemple, connexion par identifiant et mot de passe ou via un service tiers (Google, GitHub).
• Autorisation (Authorization) — processus de vérification de ce que vous pouvez faire. Par exemple, accès au panneau d'administration ou possibilité de supprimer des articles.

En TypeScript, ces processus sont implémentés via des middleware (gestionnaires intermédiaires) qui vérifient les tokens ou les sessions avant d'exécuter la requête.

Bibliothèques populaires pour TypeScript

Pour implémenter l'autorisation et l'authentification dans les projets TypeScript, on utilise le plus souvent :

• jsonwebtoken — travail avec JWT (JSON Web Tokens).
• bcrypt — hachage des mots de passe.
• passport (avec les types @types/passport) — middleware flexible pour Express.
• express-session — gestion des sessions côté serveur.
• crypto — module intégré de Node.js pour le travail avec les hachages.

Exemple pratique : authentification JWT en TypeScript

Voyons la création d'une API REST simple avec authentification via JWT. L'exemple sera basé sur Express + TypeScript.

Étape 1. Installation des dépendances

npm install express jsonwebtoken bcrypt dotenvnpm install -D typescript @types/express @types/jsonwebtoken @types/bcrypt ts-node nodemon

Étape 2. Configuration TypeScript (tsconfig.json)

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

Étape 3. Création du middleware d'authentification

// src/middleware/auth.tsimport { Request, Response, NextFunction } from 'express';import jwt from 'jsonwebtoken';

interface UserPayload {  id: string;  email: string;}

// Étendre l'interface Request pour stocker les données utilisateurdeclare global {  namespace Express {    interface Request {      user?: UserPayload;    }  }}

export const authenticate = (  req: Request,  res: Response,  next: NextFunction): void => {  const authHeader = req.headers.authorization;

  if (!authHeader || !authHeader.startsWith('Bearer ')) {    res.status(401).json({ message: 'Token non fourni' });    return;  }

  const token = authHeader.split(' ')[1];

  try {    const decoded = jwt.verify(      token,      process.env.JWT_SECRET || 'default_secret'    ) as UserPayload;    req.user = decoded;    next();  } catch (error) {    res.status(401).json({ message: 'Token invalide' });  }};

Étape 4. Middleware d'autorisation par rôles

// src/middleware/authorize.tsimport { Request, Response, NextFunction } from 'express';

export const authorize = (...allowedRoles: string[]) => {  return (req: Request, res: Response, next: NextFunction): void => {    // On suppose que le rôle est stocké dans req.user après l'authentification    const userRole = (req as any).user?.role || 'user';

    if (!allowedRoles.includes(userRole)) {      res.status(403).json({ message: 'Accès refusé' });