Comment implémenter l'authentification dans React à l'aide de JWT (jetons Web JSON)

L'authentification est un élément essentiel de nombreuses applications Web, et la sécurisation des routes dans React nécessite une compréhension du fonctionnement des jetons, tels que les jetons Web JSON (JWT). JWT vous permet de transmettre en toute sécurité des informations entre le client et le serveur, ce qui est particulièrement utile pour implémenter l'authentification des utilisateurs dans les applications Web modernes. Dans cet article, nous apprendrons comment implémenter l'authentification dans React à l'aide de JWT.

Qu’est-ce que JWT ?

Les jetons Web JSON (JWT) sont des jetons compacts et sécurisés pour les URL, utilisés pour représenter les réclamations entre deux parties. JWT est un choix populaire pour l'authentification dans les applications monopage (SPA), car il est léger, sans état et facile à mettre en œuvre.

Un JWT typique se compose de trois parties :
1. En-tête : Contient des métadonnées sur le jeton, y compris l'algorithme de signature.
2. Payload : Contient les réclamations (données) que vous souhaitez transmettre, telles que les informations utilisateur.
3. Signature : Utilisé pour vérifier que l'expéditeur est bien celui qu'il prétend être et pour s'assurer que le message n'a pas été modifié en cours de route.

Étapes pour implémenter l'authentification JWT dans React

1. Configuration du backend (Node.js Express JWT)

• Installez les dépendances requises : express, jsonwebtoken, bcryptjs.
• Configurez un serveur Express simple et créez des itinéraires pour la connexion et l'accès aux données protégées.
• Générez un jeton JWT une fois la connexion réussie. Exemple de code backend (Node.js Express JWT) :

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const users = [{ username: 'test', password: 'a$...' }]; // Example user data

app.use(express.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Verify user credentials
  const user = users.find(u => u.username === username);
  if (user && bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
    return res.json({ token });
  } else {
    return res.status(401).send('Invalid credentials');
  }
});

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

2. Configuration du front-end (React JWT) :

• Utilisez les hooks useState et useEffect de React pour gérer l'état d'authentification.
• Stockez le jeton JWT dans un stockage local ou dans des cookies après une connexion réussie.
• Utilisez le jeton JWT pour envoyer des requêtes authentifiées à l'API backend. Exemple de code frontend (React JWT) :

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

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/login', { username, password });
      localStorage.setItem('token', response.data.token); // Store the JWT
      alert('Login successful');
    } catch (error) {
      alert('Login failed');
    }
  };

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

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://localhost:5000/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(response => setData(response.data))
      .catch(error => console.error(error));
    }
  }, []);

  return (
    <div>
      <h1>Protected Dashboard</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}