Introduction

Bienvenue dans ce tutoriel complet où nous explorerons comment construire une application React moderne avec un système d’authentification intégré en utilisant la Context. Ce guide est idéal pour les développeurs qui souhaitent apprendre à gérer l’état global de l’authentification de manière efficace et sécurisée.

Nous aborderons la création d’un contexte d’authentification, le développement de composants pour la connexion et la déconnexion, et la mise en place de routes protégées avec React Router. Que vous soyez débutant en React ou que vous cherchiez à approfondir vos connaissances sur le contexte et les routes, ce tutoriel vous fournira les bases nécessaires pour implémenter des fonctionnalités d’authentification dans vos applications web.

Préparez votre environnement de développement, et plongeons ensemble dans le monde de React !

Si vous souhaitez en savoir plus sur l’installation et les fondamentaux de React, nous vous invitons à consulter notre article précédent avant de plonger dans ce tutoriel.

Créer un dossier Context dans le dossier src.

Créer un dossier Components dans le dossier src.

Création du fichier AuthContext.jsx dans le dossier Context:

Création du fichier Login.jsx dans le dossier Components :

• Ajouter le code pour le formulaire de connexion :

Création du fichier HomePage.jsx dans le dossier Components :

• Ajoute le code pour la page d’accueil avec un bouton de déconnexion :

Étape 5: Mise à jour de App.js

• Mettre à jour App.js pour utiliser AuthProvider et conditionnellement afficher Login ou HomePage basé sur l’état du token :

Note : Ici, j’ai créé un composant ProtectedRoute qui s’occupe de vérifier si l’utilisateur est authentifié (via le authToken).

Si l’utilisateur est authentifié, il voit la page d’accueil (HomePage) sinon, il est redirigé vers le formulaire de connexion (Login).

Si vous souhaitez implémenter un système de navigation plus avancé (par exemple, avec des routes différentes), vous pouvez utiliser react-router-dom. Voici comment vous pourrez intégrer cela :

1. Installation de React Router : Ouvrir un terminal à la racine de ton projet et exécuter :

Mise à jour de App.js avec React Router

Modifier App.js pour utiliser le Router :

Mise à jour de Login.jsx pour utiliser le Router :

1. Lancer l’application : Exécuter npm start dans votre terminal pour démarrer l’application et ouvrez votre navigateur à l’adresse http://localhost:3000. Tu devrais voir la page de connexion.
2. Tester la connexion : Utiliser les identifiants que vous avez définis (ou les valeurs factices du tutoriel) pour tester la connexion. Vous devrez être redirigé vers la page d’accueil.
3. Teste la déconnexion : Sur la page d’accueil, cliquez sur le bouton de déconnexion pour voir si vous êtes renvoyé à la page de connexion.

Félicitations ! Tu as maintenant une application React fonctionnelle avec un système d’authentification basique. Ce projet t’a permis de comprendre comment utiliser React Context pour gérer l’état global lié à l’authentification d’une manière simple et efficace. Tu peux continuer à étendre ce projet en ajoutant plus de fonctionnalités et en améliorant la sécurité de l’authentification.

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.