Simular un sistema de autenticación con JWT (JSON ...

Para simular un sistema de autenticación con JWT utilizando Zustand y Axios, realizaremos los siguientes pasos:

1. Configuraremos un store en Zustand para gestionar el estado de autenticación.
2. Simularemos una API de inicio de sesión que devolverá un JWT.
3. Utilizaremos Axios para enviar las credenciales de inicio de sesión.
4. Al recibir el token, lo guardaremos en el estado de Zustand y en localStorage para mantener la sesión activa incluso después de recargar la página.
5. Implementaremos la validación del token para comprobar la autenticación.

1. Configuración del proyecto

Si aún no tienes un proyecto de React, crea uno con los siguientes comandos:

bash
npx create-react-app jwt-auth-demo
cd jwt-auth-demo
npm install axios zustand

2. Creación del Store de Zustand

En src/store/authStore.js, creamos el store para manejar el estado de autenticación.

javascript
import create from 'zustand';

const useAuthStore = create((set) => ({
  isAuthenticated: false,
  userData: null,
  token: localStorage.getItem('token') || null,

  login: (token, userData) => {
    set({ isAuthenticated: true, userData, token });
    localStorage.setItem('token', token); // Guardamos el token en localStorage
  },

  logout: () => {
    set({ isAuthenticated: false, userData: null, token: null });
    localStorage.removeItem('token'); // Limpiamos el token de localStorage
  },

  validateToken: () => {
    const token = localStorage.getItem('token');
    if (token) {
      set({ isAuthenticated: true, token });
    } else {
      set({ isAuthenticated: false, token: null });
    }
  }
}));

export default useAuthStore;

3. Creación de la API simulada

Simulamos una API que devuelve un JWT en respuesta al inicio de sesión. En un archivo src/api/auth.js, configuramos Axios y la simulación de la API.

javascript
import axios from 'axios';

// Simulación de una API de autenticación
export const fakeLogin = async (username, password) => {
  // Simulamos que la API devuelve un token JWT si las credenciales son correctas
  if (username === 'usuario' && password === 'contraseña') {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          token: 'fake-jwt-token', // Este es un token simulado
          user: { name: 'Usuario Ejemplo', username: 'usuario' },
        });
      }, 1000); // Simulamos un retraso de 1 segundo
    });
  } else {
    throw new Error('Credenciales inválidas');
  }
};

4. Creación del componente de inicio de sesión

En el archivo src/components/Login.js, creamos el componente que gestionará el inicio de sesión.

javascript
import React, { useState } from 'react';
import useAuthStore from '../store/authStore';
import { fakeLogin } from '../api/auth';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    try {
      const response = await fakeLogin(username, password);
      login(response.token, response.user); // Guardamos el token y los datos del usuario
    } catch (err) {
      setError('Credenciales inválidas');
    }
  };

  return (
    <div>
      <h2>Iniciar sesión</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Usuario</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label>Contraseña</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        {error && <p>{error}</p>}
        <button type="submit">Iniciar sesión</button>
      </form>
    </div>
  );
};

export default Login;

5. Componente protegido que verifica el estado de autenticación

En src/components/Protected.js, creamos un componente protegido que solo se muestra si el usuario está autenticado.

javascript
import React from 'react';
import useAuthStore from '../store/authStore';

const Protected = () => {
  const { isAuthenticated, userData, logout } = useAuthStore((state) => ({
    isAuthenticated: state.isAuthenticated,
    userData: state.userData,
    logout: state.logout,
  }));

  if (!isAuthenticated) {
    return <p>Acceso denegado. Necesitas iniciar sesión.</p>;
  }

  return (
    <div>
      <h2>Bienvenido, {userData.name}</h2>
      <p>Estás autenticado.</p>
      <button onClick={logout}>Cerrar sesión</button>
    </div>
  );
};

export default Protected;

6. Componente principal que gestiona la autenticación

En src/App.js, gestionamos el flujo de autenticación y mostramos los componentes adecuados.

javascript
import React, { useEffect } from 'react';
import useAuthStore from './store/authStore';
import Login from './components/Login';
import Protected from './components/Protected';

const App = () => {
  const { isAuthenticated, validateToken } = useAuthStore((state) => ({
    isAuthenticated: state.isAuthenticated,
    validateToken: state.validateToken,
  }));

  useEffect(() => {
    validateToken(); // Validamos el token cuando la app se carga
  }, [validateToken]);

  return (
    <div>
      <h1>Simulación de autenticación con JWT</h1>
      {isAuthenticated ? <Protected /> : <Login />}
    </div>
  );
};

export default App;

7. Resumen

Este código implementa un sistema de autenticación con JWT utilizando Zustand para el manejo de estado y Axios para enviar solicitudes. Los pasos clave son:

• El componente Login gestiona el inicio de sesión y guarda el token JWT en el store y en localStorage.
• El componente Protected muestra contenido solo si el usuario está autenticado.
• Se usa useAuthStore para manejar el estado de autenticación globalmente.
• Al recargar la página, el token persiste en localStorage, y el estado de autenticación se mantiene gracias a la validación del token.

Ahora, puedes correr tu aplicación y probar la funcionalidad de inicio de sesión y el acceso a rutas protegidas.

bash
npm start