React : Authentification et Context

Introduction

Authentification avec localStorage

Dans notre précédent tutoriel, nous avons appris à utiliser le Context API de React pour gérer l’état d’authentification. Cependant, nous avons remarqué que l’état est perdu lorsqu’on rafraîchit la page. Pour résoudre ce problème, nous allons explorer comment utiliser localStorage pour persister l’état d’authentification entre les sessions.

Nous comparerons également localStorage avec les cookies et sessionStorage, et nous verrons comment implémenter un token qui expire après un temps défini.

Pourquoi utiliser localStorage pour l’authentification ?

localStorage offre une manière simple de stocker des données localement sur le navigateur de l’utilisateur pour une durée indéterminée, jusqu’à ce que les données soient effacées explicitement. Cela est particulièrement utile pour les scénarios d’authentification où nous souhaitons que l’utilisateur reste connecté même après avoir fermé le navigateur.

sessionStorage est similaire à localStorage mais est plus éphémère : ses données sont perdues lorsque l’onglet du navigateur est fermé. Ceci est utile pour les données de session qui ne doivent pas être conservées longtemps.

Les cookies sont une autre méthode qui permet de stocker des données côté client, mais elles sont envoyées au serveur à chaque requête HTTP, ce qui peut être moins efficace et moins sécurisé pour stocker des tokens d’authentification, surtout sans configuration appropriée.

Mise en place de localStorage pour l’authentification

Pour notre application React, voici comment nous allons modifié le AuthProvider pour utiliser localStorage:

Copier

Gestion de l’expiration du token

Pour rendre un token invalide après un certain temps, par exemple 3 heures, vous pouvez enregistrer un timestamp avec le token et vérifier si le token est expiré lors de l’initialisation ou d’une tentative d’accès.

Copier

import React, { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [authToken, setAuthToken] = useState(() => {
    const token = localStorage.getItem('authToken');
    return token;
  });

return (
    <AuthContext.Provider value={{ authToken, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export function useAuth() {
  return useContext(AuthContext);
}

Utiliser localStorage pour gérer l’authentification dans vos applications React vous permet de maintenir les sessions d’utilisateurs de manière efficace et sûre. Avec l’ajout d’une gestion de l’expiration du token, vous pouvez contrôler la durée de l’authentification et améliorer la sécurité de votre application.

Sécurité et Implications

localStorage est pratique, mais il comporte des risques de sécurité importants, en particulier concernant les attaques de type XSS (Cross-Site Scripting) :

Vulnérabilité aux XSS : Les données stockées dans localStorage sont accessibles via JavaScript, ce qui les rend vulnérables aux attaques XSS. Les attaquants peuvent injecter des scripts malveillants pour voler des tokens d’authentification.
Précautions : Pour réduire ces risques, assurez-vous de valider et de nettoyer toutes les entrées utilisateur et de mettre en œuvre des mesures de sécurité côté serveur.

Bonnes pratiques

Pour renforcer la sécurité des sessions utilisateurs dans vos applications, suivez ces meilleures pratiques :

Expiration et renouvellement des sessions :
- Définissez une politique d’expiration claire : Les tokens et les sessions doivent avoir une durée de vie limitée pour réduire les risques en cas de compromission.
- Renouvelez les sessions régulièrement : Implémentez un mécanisme pour émettre de nouveaux tokens à intervalles réguliers ou à chaque reconnexion.
Surveillance des sessions :
- Logs d’activité : Maintenez des logs détaillés pour les actions critiques afin de détecter et de réagir rapidement à des activités suspectes.

Merci d’avoir suivi ce tutoriel ! Si vous avez envie d’en savoir plus sur le développement d’applications web, sur le dev/ops ou la conception d’applications,inscrivez-vous à notre formation Développeur web et web mobile ou Concepteur Développeur d’Application (CDA) afin de viser l’excellence, acquérir un savoir-faire concret dans le développement web et d’obtenir un diplôme national RNCP reconnus par l’État.

React : Authentification et Context

Introduction

Pourquoi utiliser localStorage pour l’authentification ?

Mise en place de localStorage pour l’authentification

Gestion de l’expiration du token

Sécurité et Implications

Bonnes pratiques

SHENRON FORMATION

Shenron Formation

Dernières actusnewsinfos

Qui sommes-nous ?

Nos formations