Authentification avec JWT sur Frontend et Backend : implémentation avec Node.js et ReactJS (en TypeScript)

L'authentification via JSON Web Token (JWT) est largement utilisée pour sécuriser les API et garantir que seuls les utilisateurs autorisés peuvent accéder à certaines données. Dans cet article, nous allons vous montrer comment configurer JWT en backend avec Node.js et en frontend avec ReactJS en utilisant TypeScript, de la génération de tokens à la gestion sécurisée des sessions utilisateur.

Configurer le backend avec Node.js

Tout d'abord, créons une API avec Node.js, Express et TypeScript qui génère et valide les jetons JWT.

Étape 1 : configuration de l'environnement

Créez un nouveau projet et installez les principales dépendances :

npm init -y
npm install express jsonwebtoken bcryptjs dotenv
npm install -D typescript @types/node @types/express @types/jsonwebtoken @types/bcryptjs ts-node

Créez un fichier tsconfig.json pour la configuration TypeScript :

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Étape 2 : structurer le backend

Créez une structure simple, en commençant par un fichier server.ts et un dossier routes pour organiser les routes d'authentification.

serveur.ts

import express, { Application } from 'express';
import dotenv from 'dotenv';
import authRoutes from './routes/authRoutes';

dotenv.config();

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

app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Servidor rodando na porta ${PORT}`));

routes/authRoutes.ts

Créez un fichier pour les routes d'authentification. Ici, nous aurons une route de connexion qui validera l'utilisateur et renverra le jeton JWT.

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

const router = express.Router();

// Simulação de banco de dados
const users = [{ username: 'usuario', password: 'senha123' }];

router.post('/login', async (req: Request, res: Response) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user || !(await bcrypt.compare(password, user.password))) {
        return res.status(401).json({ message: 'Credenciais inválidas' });
    }

    const token = jwt.sign({ username }, process.env.JWT_SECRET as string, { expiresIn: '1h' });
    res.json({ token });
});

export default router;

Étape 3 : Sécuriser les itinéraires avec un middleware

Ajoutez un middleware pour protéger les routes qui nécessitent une authentification.

middleware/authMiddleware.ts

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

interface JwtPayload {
    username: string;
}

export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
    const token = req.headers['authorization'];
    if (!token) {
        res.status(403).json({ message: 'Token não fornecido' });
        return;
    }

    jwt.verify(token, process.env.JWT_SECRET as string, (err, decoded) => {
        if (err) {
            res.status(401).json({ message: 'Token inválido' });
            return;
        }
        req.user = decoded as JwtPayload;
        next();
    });
};

Configurer le frontend avec ReactJS

Sur le frontend, nous utiliserons React pour gérer l'authentification, l'envoi des informations d'identification et le stockage du jeton JWT.

Étape 1 : configuration de l'interface de connexion

Tout d'abord, créez un composant Login.tsx pour capturer les informations d'identification de l'utilisateur et envoyer une demande de connexion au backend.

Connexion.tsx

import React, { useState } from 'react';
import axios from 'axios';

const Login: React.FC = () => {
    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [error, setError] = useState<string>('');

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const response = await axios.post('/api/auth/login', { username, password });
            localStorage.setItem('token', response.data.token);
            window.location.href = '/dashboard';
        } catch (err) {
            setError('Credenciais inválidas');
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">Login</button>
            {error && <p>{error}</p>}
        </form>
    );
};

export default Login;

Étape 2 : Protéger les routes dans le frontend

Créez une fonction pour les routes protégées, en utilisant le jeton JWT pour accéder à l'API.

PrivateRoute.tsx

import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
    component: React.ComponentType<any>;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) =>
            localStorage.getItem('token') ? (
                <Component {...props} />
            ) : (
                <Redirect to="/login" />
            )
        }
    />
);

export default PrivateRoute;

Étape 3 : Envoyer le jeton JWT dans les requêtes

Configurez axios pour inclure automatiquement le jeton JWT dans les requêtes protégées.

axiosConfig.ts

import axios from 'axios';

const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = token;
}

export default axios;

Étape 4 : Exemple d'utilisation avec une route protégée

Maintenant, créez un exemple de page protégée à laquelle le jeton est nécessaire pour accéder.

Tableau de bord.tsx

import React, { useEffect, useState } from 'react';
import axios from './axiosConfig';

const Dashboard: React.FC = () => {
    const [data, setData] = useState<string>('');

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/protected');
                setData(response.data.message);
            } catch (error) {
                console.error(error);
            }
        };
        fetchData();
    }, []);

    return <h1>{data || 'Carregando...'}</h1>;
};

export default Dashboard;

Conclusion

Avec ces étapes, nous avons mis en place une authentification JWT complète dans TypeScript pour un projet qui utilise Node.js sur le backend et React sur le frontend. Cette approche est hautement sécurisée, efficace et largement adoptée pour protéger les applications modernes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!