Cómo implementar autenticación en React con JWT

La autenticación es una parte fundamental de cualquier aplicación web que necesite proteger información o permitir el acceso únicamente a usuarios registrados. En aplicaciones desarrolladas con React, una de las alternativas más utilizadas es JWT (JSON Web Token), especialmente cuando existe un backend desarrollado con tecnologías como .NET, Node.js o Java.

En este tutorial veremos cómo implementar una autenticación básica utilizando React y JWT.

¿Qué es JWT?

JWT es un estándar que permite transmitir información de forma segura entre el cliente y el servidor. Después de iniciar sesión correctamente, el backend genera un token que identifica al usuario.

Un JWT normalmente contiene tres partes:

header.payload.signature

El frontend recibe este token y lo utiliza posteriormente para realizar solicitudes a endpoints protegidos.

1. Crear el formulario de inicio de sesión

Podemos comenzar creando un componente Login.jsx:

import { useState } from "react";

function Login() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const iniciarSesion = async (e) => {
        e.preventDefault();

        const respuesta = await fetch("https://localhost:5001/api/auth/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ email, password })
        });

        const datos = await respuesta.json();

        if (respuesta.ok) {
            localStorage.setItem("token", datos.token);
            window.location.href = "/dashboard";
        } else {
            alert("Credenciales incorrectas");
        }
    };

    return (
        <form onSubmit={iniciarSesion}>
            <input
                type="email"
                placeholder="Correo"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />

            <input
                type="password"
                placeholder="Contraseña"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />

            <button type="submit">Iniciar sesión</button>
        </form>
    );
}

export default Login;

Cuando el servidor responde correctamente, guardamos el JWT para utilizarlo en futuras solicitudes.

2. Enviar el token al backend

Para acceder a una ruta protegida debemos enviar el token mediante el encabezado Authorization:

const token = localStorage.getItem("token");

const respuesta = await fetch(
    "https://localhost:5001/api/productos",
    {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }
);

El backend puede verificar la firma del token antes de permitir el acceso.

3. Proteger rutas en React

También podemos evitar que usuarios no autenticados accedan a determinadas páginas.

Por ejemplo:

function RutaProtegida({ children }) {
    const token = localStorage.getItem("token");

    if (!token) {
        window.location.href = "/login";
        return null;
    }

    return children;
}

Después podemos utilizarla alrededor de nuestro dashboard:

<Route
    path="/dashboard"
    element={
        <RutaProtegida>
            <Dashboard />
        </RutaProtegida>
    }
/>

4. Cerrar sesión

Cerrar sesión es sencillo:

function cerrarSesion() {
    localStorage.removeItem("token");
    window.location.href = "/login";
}

Esto elimina el token almacenado y devuelve al usuario al formulario de autenticación.

Recomendaciones de seguridad

Aunque localStorage es sencillo para aprender y crear prototipos, en aplicaciones reales debes evaluar alternativas más seguras, como cookies HttpOnly, especialmente para reducir riesgos relacionados con XSS. Además, el backend siempre debe validar el JWT; ocultar una ruta únicamente en React no constituye seguridad real.

JWT permite construir sistemas de autenticación modernos y escalables. React se encarga principalmente de gestionar la interfaz y el estado de sesión, mientras que el backend debe validar las credenciales, emitir los tokens y proteger los recursos.