Autorisation et authentification en TypeScript : guide complet

Autorisation et authentification en TypeScript : guide complet

Dans le développement web moderne, la sécurité des applications est un aspect crucial. TypeScript, en tant que surcouche de JavaScript, offre des outils puissants pour créer des systèmes d'autorisation et d'authentification typés et sécurisés. Dans cet article, nous allons explorer les concepts clés, les bibliothèques populaires et écrire des exemples pratiques en TypeScript.

Concepts de base

Avant de passer au code, il est important de distinguer deux termes :

• Authentification (Authentication) — vérification de l'identité de l'utilisateur (qui êtes-vous ?). Généralement effectuée via identifiant/mot de passe, jetons ou biométrie.
• Autorisation (Authorization) — détermination des droits d'accès (que pouvez-vous faire ?). Par exemple, accès au panneau d'administration uniquement pour le rôle "admin".

Bibliothèques populaires pour TypeScript

Dans l'écosystème TypeScript/Node.js, il existe plusieurs solutions éprouvées :

• Passport.js — la bibliothèque la plus populaire pour les stratégies d'authentification (local, JWT, OAuth). Elle bénéficie d'un excellent support TypeScript via les types @types/passport.
• jsonwebtoken — travail avec JWT (JSON Web Tokens). Entièrement typée.
• bcrypt — hachage de mots de passe. Utilisée avec d'autres bibliothèques.
• express-session — gestion des sessions côté serveur.

Exemple 1 : Authentification de base avec JWT

Créons un système simple avec des jetons d'accès. Installez les dépendances :

npm install express jsonwebtoken bcrypt @types/express @types/jsonwebtoken @types/bcrypt

Créons un serveur avec inscription et connexion :

import express, { Request, Response } from 'express';import jwt from 'jsonwebtoken';import bcrypt from 'bcrypt';

const app = express();app.use(express.json());

const SECRET_KEY = 'your-secret-key';const users: { username: string; passwordHash: string }[] = [];

// Inscriptionapp.post('/register', async (req: Request, res: Response) => {  const { username, password } = req.body;  const passwordHash = await bcrypt.hash(password, 10);  users.push({ username, passwordHash });  res.status(201).json({ message: 'User created' });});

// Connexionapp.post('/login', async (req: Request, res: Response) => {  const { username, password } = req.body;  const user = users.find(u => u.username === username);  if (!user) return res.status(401).json({ error: 'Invalid credentials' });

  const isValid = await bcrypt.compare(password, user.passwordHash);  if (!isValid) return res.status(401).json({ error: 'Invalid credentials' });

  const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });  res.json({ token });});

// Route protégéeapp.get('/protected', (req: Request, res: Response) => {  const authHeader = req.headers.authorization;  if (!authHeader) return res.status(401).json({ error: 'No token provided' });

  const token = authHeader.split(' ')[1]; // Bearer token  try {    const decoded = jwt.verify(token, SECRET_KEY);    res.json({ message: 'Access granted', user: decoded });  } catch {    res.status(403).json({ error: 'Invalid token' });  }});

app.listen(3000, () => console.log('Server running on port 3000'));

Exemple 2 : Middleware pour l'autorisation avec rôles

Ajoutons un modèle basé sur les rôles. Créons un middleware typé :

interface JwtPayload {  username: string;  role: 'user' | 'admin';}

// Middleware pour vérifier l'authentificationfunction authenticate(req: Request, res: Response, next: Function) {  const token = req.headers.authorization?.split(' ')[1];  if (!token) return res.status(401).json({ error: 'Unauthorized' });

  try {    const decoded = jwt.verify(token, SECRET_KEY) as JwtPayload;    (req as any).user =