Para crear un sistema de autenticación usando React.js en el frontend, Express.js en el backend, necesitamos implementar lo siguiente:

• Frontend (React.js con Pulsy): maneja el inicio y cierre de sesión, mantiene el estado de autenticación del usuario y conserva los tokens.
• Backend (Express.js): proporciona puntos finales de autenticación (por ejemplo, inicio de sesión, cierre de sesión, validación de usuario).

Paso 1: Configuración del backend (Express.js)

Comencemos con el backend para manejar la autenticación de usuarios y la generación de tokens.

Instalar los paquetes necesarios

npm install express bcryptjs jsonwebtoken cors

Código de fondo (Express.js)

Cree un archivo authController.js para manejar la lógica de autenticación:

// 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' });
  }
};

A continuación, cree el archivo server.js principal para configurar 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: autentica a un usuario y devuelve un token JWT.
• GET /api/validate: valida un token y devuelve la información del usuario.

Paso 2: Frontend (React.js con Pulsy)

Ahora configuremos la interfaz usando React.js y Pulsy para manejar el estado de autenticación.

Instalar los paquetes necesarios

npm install axios pulsy

Configuración de la tienda Pulsy

Crearemos una tienda Pulsy para gestionar el estado de autenticación globalmente.

// 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;
});

Esta tienda mantendrá el estado de autenticación (usuario y token) y aplicará automáticamente el encabezado de Autorización para solicitudes autenticadas.

Funciones de autenticación

Crear funciones auxiliares para manejar solicitudes de inicio de sesión y validación:

// 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');
};

Paso 3: crear componentes de autenticación

Ahora creemos los componentes de React para iniciar sesión y vistas autenticadas.

Componente de inicio de sesión

// 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;

Componente autenticado

// 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;

Paso 4: componente de la aplicación

En el componente App.js, querrás verificar si el usuario está autenticado y representar condicionalmente el inicio de sesión o el panel.

// 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;

Paso 5: Ejecute la aplicación

Ahora que tenemos configurados el backend y el frontend, puedes ejecutar la aplicación.

1. Iniciar el servidor Express:

   node server.js

1. Iniciar la interfaz de React:

   npm start

Una vez que ambos se estén ejecutando:

• Puedes visitar http://localhost:3000 para ver la página de inicio de sesión.
• Después de iniciar sesión, el token de autenticación se guardará y serás redirigido al panel.
• Si el token es válido, permanecerás conectado; de lo contrario, serás redirigido nuevamente a la página de inicio de sesión.

Resumen

Este ejemplo muestra cómo integrar Pulsy con un sistema de autenticación React respaldado por una API Express.js. Pulsy le ayuda a gestionar el estado global de la autenticación, incluida la persistencia del token de autenticación y los datos del usuario entre sesiones, lo que la convierte en una herramienta de gestión del estado potente y fácil de usar.