Pour créer un système d'authentification utilisant React.js sur le frontend, Express.js sur le backend, nous devons implémenter les éléments suivants :

• Frontend (React.js avec Pulsy) : gérer la connexion et la déconnexion, maintenir l'état d'authentification des utilisateurs et conserver les jetons.
• Backend (Express.js) : fournissez des points de terminaison d'authentification (par exemple, connexion, déconnexion, validation de l'utilisateur).

Étape 1 : Configuration du backend (Express.js)

Commençons par le backend pour gérer l'authentification des utilisateurs et la génération de jetons.

Installer les packages requis

npm install express bcryptjs jsonwebtoken cors

Code back-end (Express.js)

Créez un fichier authController.js pour gérer la logique d'authentification :

// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Mock user data (in production, you would use a real database)
const users = [
  {
    id: 1,
    username: 'john',
    password: '$2a$10$O1s8iLKRLPbPqhc1uTquLO.xODTC1U/Z8xGoEDU6/Dc0PAQ3MkCKy', // hashed password for 'password123'
  },
];

// JWT Secret
const JWT_SECRET = 'supersecretkey';

exports.login = (req, res) => {
  const { username, password } = req.body;

  const user = users.find((u) => u.username === username);

  if (!user) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }

  bcrypt.compare(password, user.password, (err, isMatch) => {
    if (isMatch) {
      // Create a token
      const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
      return res.json({ token });
    } else {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
  });
};

exports.validateToken = (req, res) => {
  const token = req.header('Authorization').replace('Bearer ', '');

  if (!token) {
    return res.status(401).json({ error: 'No token provided' });
  }

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    res.json({ user: { id: decoded.id, username: decoded.username } });
  } catch (err) {
    res.status(401).json({ error: 'Invalid token' });
  }
};

Ensuite, créez le fichier server.js principal pour configurer Express :

// server.js
const express = require('express');
const cors = require('cors');
const { login, validateToken } = require('./authController');

const app = express();
app.use(express.json());
app.use(cors());

// Authentication routes
app.post('/api/login', login);
app.get('/api/validate', validateToken);

// Start the server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• POST /api/login : authentifie un utilisateur et renvoie un jeton JWT.
• GET /api/validate : valide un jeton et renvoie les informations utilisateur.

Étape 2 : Frontend (React.js avec Pulsy)

Configurons maintenant le frontend en utilisant React.js et Pulsy pour gérer l'état d'authentification.

Installer les packages requis

npm install axios pulsy

Configuration du magasin Pulsy

Nous allons créer une boutique Pulsy pour gérer l'état d'authentification à l'échelle mondiale.

// authStore.js
import { createStore, addMiddleware } from 'pulsy';
import axios from 'axios';

// Create a store to hold the user and token
createStore('auth', {
  user: null,
  token: null,
}, { persist: true }); // Persist the auth state in localStorage

// Middleware to add Authorization header for authenticated requests
addMiddleware('auth', (nextValue, prevValue, storeName) => {
  if (nextValue.token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${nextValue.token}`;
  } else {
    delete axios.defaults.headers.common['Authorization'];
  }
  return nextValue;
});

Ce magasin conservera l'état d'authentification (utilisateur et jeton) et appliquera automatiquement l'en-tête Authorization pour les demandes authentifiées.

Fonctions d'authentification

Créez des fonctions d'assistance pour gérer les demandes de connexion et de validation :

// authService.js
import { setStoreValue } from 'pulsy';
import axios from 'axios';

const API_URL = 'http://localhost:5000/api';

export const login = async (username, password) => {
  try {
    const response = await axios.post(`${API_URL}/login`, { username, password });
    const { token } = response.data;

    // Set token and user info in Pulsy store
    setStoreValue('auth', { token, user: { username } });

    return true;
  } catch (error) {
    console.error('Login failed', error);
    return false;
  }
};

export const validateToken = async () => {
  try {
    const response = await axios.get(`${API_URL}/validate`);
    const user = response.data.user;

    // Update the store with the user info
    setStoreValue('auth', { user, token: localStorage.getItem('auth_token') });
    return true;
  } catch (error) {
    console.error('Token validation failed', error);
    return false;
  }
};

export const logout = () => {
  setStoreValue('auth', { user: null, token: null });
  localStorage.removeItem('pulsy_auth');
};

Étape 3 : Créer des composants d'authentification

Créons maintenant les composants React pour la connexion et les vues authentifiées.

Composant de connexion

// Login.js
import React, { useState } from 'react';
import { login } from './authService';

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

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(username, password);
    if (!success) {
      setError('Invalid credentials. Try again.');
    }
  };

  return (
    

      
Login
      

         setUsername(e.target.value)}
          placeholder="Username"
          required
        />
         setPassword(e.target.value)}
          placeholder="Password"
          required
        />
        Login
      
      {error && 
{error}
}
    
  );
};

export default Login;

Composant authentifié

// Dashboard.js
import React from 'react';
import { usePulsy } from 'pulsy';
import { logout } from './authService';

const Dashboard = () => {
  const [auth] = usePulsy('auth');

  const handleLogout = () => {
    logout();
    window.location.reload(); // Simple page refresh to redirect to login
  };

  return (
    

      
Welcome, {auth.user.username}!
      Logout
    
  );
};

export default Dashboard;

Étape 4 : composant d'application

Dans le composant App.js, vous souhaiterez vérifier si l'utilisateur est authentifié et afficher sous condition la connexion ou le tableau de bord.

// App.js
import React, { useEffect } from 'react';
import { usePulsy } from 'pulsy';
import { validateToken } from './authService';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  const [auth] = usePulsy('auth');

  useEffect(() => {
    // Check token validity on app load
    if (auth.token) {
      validateToken();
    }
  }, [auth.token]);

  return (
    

      {auth.user ?  : }
    
  );
}

export default App;

Étape 5 : Exécutez l'application

Maintenant que le backend et le frontend sont configurés, vous pouvez exécuter l'application.

1. Démarrer le serveur Express :

   node server.js

1. Démarrez l'interface React :

   npm start

Une fois les deux exécutés :

• Vous pouvez visiter http://localhost:3000 pour voir la page de connexion.
• Après vous être connecté, le jeton d'authentification sera enregistré et vous serez redirigé vers le tableau de bord.
• Si le token est valide, vous restez connecté, sinon vous serez redirigé vers la page de connexion.

Résumé

Cet exemple montre comment intégrer Pulsy à un système d'authentification React soutenu par une API Express.js. Pulsy vous aide à gérer l'état global de l'authentification, y compris la persistance du jeton d'authentification et des données utilisateur d'une session à l'autre, ce qui en fait un outil de gestion d'état puissant et facile à utiliser.