Mettre en place une authentification JWT avec Node/express Typescript

Par /

Mettons nous dans le contexte d’une application avec front et back découplé. NodeJS/Express est le back avec une base de données, et le front par exemple est une application ReactJS. Toute l’application n’est que webservice, et l’on pourra tester l’application rien qu’avec Postman.

Ce dernier prend en charge l’authentification, grâce à la possibilité de stocker le token JWT et de le renvoyer à chaque requête.

Installation des packages NPM

Je suppose que vous avez déjà bootstrappé une application node/Express/Typescript, sinon allez visiter la page du lien. LEs paquet à installer sont jsonwebtoken, bcrypt et comme on travaille en typescript il faudra les fichier type pour l’autocomplétion. Je mets aussi mysql2 au cas où vous ne l’auriez pas installé.

npm install mysql2 bcrypt jsonwebtoken
npm install --save-dev @types/bcrypt @types/jsonwebtoken

Configurer le fichier d’environnement .env

JWT_SECRET=ta_cle_secrete_ici_change_la
JWT_EXPIRES_IN=1h
BCRYPT_SALT_ROUNDS=10

Voici le code de la route (!) qui s’occupe de l’authentification

app.post('/api/auth', async (req: Request, res: Response) => {

    const { email, password } = req.body

    if (!email || !password) {
        res.status(400).json({ message: "Email et mot de passe requis." });
    }
    try {
        const [rows] = await pool.execute(
            "SELECT id, email, password FROM utilisateurs WHERE email = ?", [email]
        )

        const users = rows as any[];

        if (users.length === 0) {
            res.status(401).json({ message: "Utilisateur inconnu." })
        }
        // vérification du mot de passe
        const user = users[0]
        const match = await bcrypt.compare(password, user.password);

        if (!match) {
            res.status(401).json({ message: "Mot de passe incorrect." });
        }

        // sinon on génère un JWT token
        const token = jwt.sign(
            { id: user.id, email: user.email },
            process.env.JWT_SECRET || "secretKey",
            { expiresIn: "24h" }
        );

        res.json({ token });

    } catch (err) {
        console.log(error);
        res.status(500).json({ message: 'Erreur serveur' })
    }

})

Je vous laisse mettre les imports qu’il faut. Aussi il vous faudra avoir la table utilisateurs pour

Requêter avec Postman.

Postman c’est comme un navigateur sans écran, en fait un navigateur est composé d’un écran et d’une antenne émettrice-réceptrice. Installez Postman, et démarrez votre serveur nodeJS, la route de l’authentification est http://localhost:3000/api/auth, faites une requête POST

Vous recevrez le JWT en réponse.

Stocker le JWT dans Postman

Copiez le token (sans les guillements et collez dans le champs avec à gauche la liste déroulante mis sur l’item Bearer Token.

Comprendre le fonctionnement du JWT

A chaque requêtes le serveur, en en-tête Authorization sera envoyé

Authorization: JhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwiZW1haWwiOiJ5dm9uLmh1eW5oQGdtYWlsLmNvbSIsImlhdCI6MTc1ODQ3NzgwOSwiZXhwIjoxNzU4NTY0MjA5fQ.JZ2Z5WRzCdSYiFcbIxknV5B9byJ_Fo9ueNDT9-iH40U

Côté serveur, on crée un middleware qui va :

  • Vérifier la présence du token.
  • Le valider avec jsonwebtoken.verify.
  • Attacher les infos décodées (userId, email, …) à req.user.
  • Laisser passer la requête si le token est valide.

Création du middleware pour authentifier la requête

Nous avons une route protégée, toute requête doit passer par la vérification de la validité du token, non expiré et valide.

app.get('/api/utilisateur/add', requireAuth, (req: AuthRequest, res: Response) => {
    res.json({ message: "accès  réussi" })
})

requireAuth est un middleware, il va filtrer toutes les requêtes qui viennent d’un client, l’avantage du middleware est qu’on n’a pas besoin de faire la validation manuellement dans la route, c’est automatique. Je le mets dans le répertoire src/middleware

fichier middleware/auth.ts

import { Request, Response, NextFunction } from "express";
import jwt from "jsonwebtoken";
import dotenv from "dotenv";

dotenv.config();

// solution JWT Stateless simple
const JWT_SECRET = process.env.JWT_SECRET || "dev_secret";
;

const verifyJwt = <T = object>(token: string): T => {
    return jwt.verify(token, JWT_SECRET) as T
}


export interface AuthRequest extends Request {
    user?: any;
}

export const requireAuth = (req: AuthRequest, res: Response, next: NextFunction) => {
    const authHeader = req.headers.authorization;
    if (!authHeader || !authHeader.startsWith("Bearer ")) {
        res.status(401).json({ message: "Missing or invalid authorization header" });
        return;//le simple fait de mettre return permet à authHeader de ne plus avoir de undefined possible (enlever le return pour montrer l'erreur)
    }

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

    if (!token) {
        return res.status(401).json({ message: "Token invalide" });
    }
    try {
        const payload = verifyJwt(token);
        req.user = payload;
        next();
    } catch (err) {
        res.status(403).json({ message: "Forbidden, vous êtes authentifié mais n'avez pas accès à la ressource, problème de permission" });
    }
}

Pour aller plus loin : https://www.youtube.com/watch?v=AU5WLAJkaC8

Retour en haut