Authentification JWT sécurisée avec Laravel et React

JWT : Comment ça fonctionne ?

Un JSON Web Token (JWT) est un token signé encodant des informations (claims) sur l'utilisateur. Il se compose de trois parties : header, payload et signature — encodés en base64 et séparés par des points.

Laravel côté backend

Laravel Sanctum ou tymon/jwt-auth permettent de générer et valider des tokens JWT. À la connexion réussie, le serveur retourne un access token (courte durée) et un refresh token (longue durée) :

// Connexion
public function login(Request $request)
{
    if (!$token = auth()->attempt($request->only('email', 'password'))) {
        return response()->json(['error' => 'Unauthorized'], 401);
    }
    return $this->respondWithToken($token);
}

Stockage sécurisé côté React

Le stockage des tokens est critique pour la sécurité. Les cookies HttpOnly sont préférables au localStorage car inaccessibles via JavaScript, protégeant contre les attaques XSS.

Axios Interceptors

Les interceptors Axios ajoutent automatiquement le token à chaque requête et gèrent le refresh automatique quand l'access token expire :

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

Protection des routes React

Un composant PrivateRoute vérifie la validité du token et redirige vers la page de login si l'utilisateur n'est pas authentifié. La vérification doit aussi se faire côté serveur.

Refresh Token Flow

Quand l'access token expire (401), l'interceptor utilise le refresh token pour obtenir un nouveau access token de façon transparente, sans déconnecter l'utilisateur.

Conclusion

Une authentification JWT bien implémentée offre sécurité et flexibilité pour les applications SPA. La combinaison Laravel + React avec des cookies HttpOnly représente aujourd'hui le standard de l'industrie pour les APIs REST sécurisées.