Authentification dans React

Pourquoi Authentification dans React ?

L'authentification est un élément fondamental pour tout application web moderne, qu'elle soit basée sur React ou d'autres frameworks. Elle permet de garantir la sécurité des données et des interactions entre l'utilisateur et l'application. Le contexte réel est que chaque utilisateur doit être authentifié avant de pouvoir accéder à certaines fonctionnalités, comme modifier son profil, consulter ses informations personnelles ou effectuer des transactions financières.

Un cas d'utilisation concret est le système de gestion de contenu (CMS) où les utilisateurs doivent s'authentifier pour créer, modifier ou publier des articles. Sans authentification, n'importe qui pourrait accéder et modifier le contenu sans autorisation, ce qui serait une violation grave de la sécurité.

Prerequis

Pour suivre ce tutoriel, vous devez disposer des compétences suivantes :

• Connaissance avancée de React
• Familiarité avec les concepts de state et de props
• Expérience avec les hooks de React (useEffect, useState)
• Compréhension de l'utilisation d'APIs

Les outils nécessaires sont :

• Node.js (version recommandée : 14.0 ou ultérieure)
• npm (Node Package Manager) (version recommandée : 6.0 ou ultérieure)
• Un éditeur de code comme Visual Studio Code
• Une base de données SQL (comme PostgreSQL ou MySQL) pour stocker les utilisateurs et leurs informations

Concepts fondamentaux

1. Authentification vs Autorisation

Authentification : Vérifie l'identité d'un utilisateur. Autorisation : Détermine ce que l'utilisateur peut faire une fois authentifié.

2. Méthodes d'authentification courantes

• Mot de passe : Utilisateur saisit son nom d'utilisateur et mot de passe
• JWT (JSON Web Tokens) : Jeton sécurisé envoyé dans le header Authorization
• OAuth 2.0 : Protocole d'autorisation pour accéder aux API

3. Contexte React pour l'authentification

En React, nous pouvons utiliser le contexte (Context) pour partager les informations d'authentification à travers l'application.

// AuthContext.js
import React, { createContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

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

export default AuthContext;

4. Utilisation du contexte dans une application React

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <AuthProvider>
      <div>
        <h1>Mon Application</h1>
        <Login />
        <Dashboard />
      </div>
    </AuthProvider>
  );
};

export default App;

Mise en pratique : Projet fil rouge

Étape 1 : Création du projet

npx create-react-app auth-app
cd auth-app
npm install axios react-router-dom

Étape 2 : Structure de l'application

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AuthProvider from './AuthContext';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
        </Switch>
      </Router>
    </AuthProvider>
  );
};

export default App;

Étape 3 : Composant Login

// src/Login.js
import React, { useState } from 'react';
import axios from 'axios';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:3001/login', { username, password });
      login(response.data);
    } catch (error) {
      console.error(error.response.data.message);
    }
  };

  return (
    <div>
      <h2>Connexion</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Nom d'utilisateur" />
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Mot de passe" />
        <button type="submit">Se connecter</button>
      </form>
    </div>
  );
};

export default Login;

Étape 4 : Composant Dashboard

// src/Dashboard.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <div>Veuillez vous connecter pour accéder au tableau de bord</div>;
  }

  return (
    <div>
      <h2>Tableau de bord</h2>
      <p>Bienvenue, {user.username}!</p>
    </div>
  );
};

export default Dashboard;

Erreurs frequentes et debugging

1. Erreur : "Cannot read property 'username' of null"

Cause : L'utilisateur n'est pas correctement authentifié avant d'accéder au tableau de bord.

// src/Dashboard.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <div>Veuillez vous connecter pour accéder au tableau de bord</div>;
  }

  return (
    <div>
      <h2>Tableau de bord</h2>
      <p>Bienvenue, {user.username}!</p>
    </div>
  );
};

export default Dashboard;

2. Erreur : "Uncaught SyntaxError: Unexpected token u in JSON at position 0"

Cause : La réponse de l'API est undefined.

// src/Login.js
import React, { useState } from 'react';
import axios from 'axios';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:3001/login', { username, password });
      if (response.data) {
        login(response.data);
      } else {
        console.error('Reponse vide de l\'API');
      }
    } catch (error) {
      console.error(error.response ? error.response.data.message : error.message);
    }
  };

  return (
    <div>
      <h2>Connexion</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Nom d'utilisateur" />
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Mot de passe" />
        <button type="submit">Se connecter</button>
      </form>
    </div>
  );
};

export default Login;

3. Erreur : "TypeError: Cannot read property 'user' of undefined"

Cause : Le contexte n'est pas correctement utilisé.

// src/Dashboard.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';

const Dashboard = () => {
  const authContext = useContext(AuthContext);

  if (!authContext.user) {
    return <div>Veuillez vous connecter pour accéder au tableau de bord</div>;
  }

  return (
    <div>
      <h2>Tableau de bord</h2>
      <p>Bienvenue, {authContext.user.username}!</p>
    </div>
  );
};

export default Dashboard;

Pour aller plus loin

1. Sécurité des tokens JWT

En utilisant JWT pour l'authentification, vous devez vous assurer que les tokens ne sont pas volés et ne soient pas utilisés sans autorisation. Pour cela, utilisez un secret fort pour signer les tokens.

2. Authentification avec OAuth 2.0

OAuth 2.0 est un protocole d'autorisation qui permet aux applications de partager des ressources sécurisées avec d'autres services. Il existe de nombreux fournisseurs OAuth 2.0 comme Google, Facebook ou GitHub.

3. Sécurité des routes React

Utilisez le hook useEffect pour vérifier l'état de connexion avant d'afficher certaines routes. Cela permet d'empêcher les utilisateurs non authentifiés d'accéder à des routes protégées.

// src/Dashboard.js
import React, { useContext, useEffect } from 'react';
import AuthContext from './AuthContext';

const Dashboard = () => {
  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (!user) {
      window.location.href = '/';
    }
  }, [user]);

  return (
    <div>
      <h2>Tableau de bord</h2>
      <p>Bienvenue, {user.username}!</p>
    </div>
  );
};

export default Dashboard;

Défi pratique

Créez un formulaire de réinitialisation de mot de passe qui utilise JWT pour générer un lien sécurisé permettant à l'utilisateur de modifier son mot de passe. Assurez-vous que le lien est valide pendant une période limitée et qu'il ne peut être utilisé qu'une seule fois.

Ce tutoriel couvre les concepts fondamentaux de l'authentification dans React, montre comment mettre en œuvre une authentification simple avec JWT et fournit des exemples de code complets. Il aborde également les erreurs courantes et offre des pistes pour approfondir la sécurité de l'application.