React : Authentification et Context

Introduction

Dans ce tutoriel, nous allons apprendre comment intégrer une authentification sécurisée dans une application React utilisant une API Laravel équipée de Sanctum pour la gestion des sessions et des tokens. Nous couvrirons la récupération du token de session, son stockage, l’utilisation pour des requêtes authentifiées, et finalement sa gestion à la déconnexion.Lorsque vous travaillez avec React, choisir le bon outil pour gérer les requêtes HTTP est crucial pour la performance et la maintenabilité de votre application. Cet article détaille pourquoi et comment réaliser l’intégration d’Axios dans React, offrant une comparaison approfondie avec Fetch pour vous aider à prendre la meilleure décision pour vos besoins de développement.

Nous vous fournirons un guide complet sur l’intégration d’Axios, en démontrant ses avantages significatifs tels que la gestion simplifiée des erreurs, les intercepteurs de requêtes, et bien plus encore. Que vous soyez nouveau dans le monde de React ou que vous cherchiez à optimiser une application existante, ce guide est votre ressource idéale pour améliorer la communication avec votre API de manière robuste et sécurisée.

Prérequis

Pour l’intégration d’Axios dans React:

Une API Laravel configurée avec Sanctum pour l’authentification.
Une application React prête à communiquer avec cette API.

Une série de tuto est disponible :

React : Authentification et Context

Laravel 10 : Créer une API REST

Comparaison entre Axios et Fetch

Axios et Fetch sont deux méthodes populaires pour effectuer des requêtes HTTP en JavaScript. Chacune a ses propres caractéristiques et avantages qui peuvent la rendre plus adaptée à certaines situations que l’autre.

Fetch

Standard intégré : Fetch est une API native qui est incluse dans les navigateurs modernes. Cela signifie qu’il n’y a pas besoin d’ajouter une librairie externe pour l’utiliser.
Promesses et Async/Await : Fetch retourne des promesses et est donc facile à utiliser avec async/await pour un code asynchrone plus lisible.
Traitement manuel des erreurs : Avec Fetch, vous devez gérer les erreurs HTTP manuellement car il ne rejette pas les promesses sur les réponses d’erreurs HTTP (par exemple, un statut 404 ou 500). Vous devez vérifier explicitement la réponse.

Copier

Axios

Gestion simplifiée des erreurs : Axios rejette automatiquement les promesses sur les réponses d’erreur HTTP, ce qui simplifie la gestion des erreurs.
Intercepteurs : Permet d’intercepter les requêtes ou réponses avant qu’elles ne soient traitées, ce qui peut être utile pour mettre en place des fonctionnalités comme les tokens d’authentification automatiques ou la gestion des erreurs globales.
Support de l’ancien navigateur : Axios inclut un support pour les anciens navigateurs (comme Internet Explorer).
Progression de téléchargement : Axios permet de gérer les événements de progression pour les requêtes de téléchargement, ce qui est moins intuitif avec Fetch.

os :

Copier

Quand utiliser Fetch ou Axios ?

Utilisez Fetch si :
- Vous préférez une solution sans dépendance externe et que vous êtes prêt à écrire un peu plus de code pour des fonctionnalités comme la gestion des erreurs ou les intercepteurs.
- Votre projet n’a pas besoin de fonctionnalités avancées fournies par Axios, comme les intercepteurs ou la support des anciens navigateurs.
Utilisez Axios si :
- Vous avez besoin de fonctionnalités robustes et prêtes à l’emploi pour les requêtes HTTP, comme des intercepteurs automatiques, une meilleure gestion des erreurs ou le support des anciens navigateurs.
- Vous souhaitez simplifier la configuration des requêtes avec des fonctionnalités comme l’envoi automatique de cookies ou le chargement de la progression.

En résumé, le choix entre Axios et Fetch dépend de vos préférences personnelles, des besoins spécifiques de votre projet, et de votre confort avec la gestion manuelle de certaines fonctionnalités dans Fetch par rapport aux options prêtes à l’emploi offertes par Axios.

Configuration de l’Environnement React

Installation de Axios

Nous utiliserons Axios pour gérer les requêtes HTTP dans React :

Copier

Configuration Axios

Créez un dossier Service dans src.

Créez un fichier axios.js dans Service pour configurer les requêtes Axios :

Copier

Connexion Utilisateur

Modifier votre composant Login.jsx pour gérer la connexion des utilisateurs.

Copier

import React, { useState, useEffect } from 'react';
import axios from '../Service/axios'; 
import { useAuth } from '../Context/AuthContext';
import { useNavigate } from 'react-router-dom';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');  
  const { authToken, login } = useAuth();
  const navigate = useNavigate();

useEffect(() => {
    if (authToken) {
      navigate('/home');  // Naviguer vers la page d'accueil si authentifié
    }
  }, [authToken, navigate]);

return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit">Log In</button>
      {error && <p style={{ color: 'red' }}>{error}</p>} 
    </form>
  );
}

export default Login;

Si vous rencontrez une erreur CORS lors de la tentative de connexion entre votre application frontale React et votre API Laravel, cela peut être dû à des restrictions de sécurité appliquées par les navigateurs pour empêcher les requêtes intersites malveillantes. L’erreur spécifique mentionnée indique que la politique CORS (Cross-Origin Resource Sharing) n’autorise pas les requêtes provenant de l’origine spécifiée avec des credentials (cookies, authentification HTTP).

Pour résoudre cette erreur, vous devez configurer correctement les headers CORS sur votre serveur backend Laravel. Voici un exemple de configuration à placer dans votre fichier config/cors.php. Ce fichier définit les règles qui permettent ou restreignent les requêtes intersites vers votre API.

Copier

Cette configuration autorise toutes les méthodes HTTP, accepte les requêtes de l’origine http://localhost:3000, et crucial, permet les requêtes avec des credentials. Modifier ces paramètres garantit que les requêtes valides de votre application frontale sont correctement acceptées par votre serveur Laravel, facilitant ainsi une communication sécurisée et efficace entre vos applications front et backend.

Test de l’application

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.
Lancer votre API: Exécuter php artisan serv dans votre terminal pour démarrer l’API Laravel
Tester la connexion : Utiliser les identifiants que vous avez définis pour tester la connexion. Vous devrez être redirigé vers la page d’accueil.
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.

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

Prérequis

Comparaison entre Axios et Fetch

Fetch

Axios

os :

Quand utiliser Fetch ou Axios ?

Configuration de l’Environnement React

Installation de Axios

Configuration Axios

Connexion Utilisateur

Test de l’application

SHENRON FORMATION

Shenron Formation

Dernières actusnewsinfos

Qui sommes-nous ?

Nos formations