¿Cómo funciona el proceso de autenticación?

El proceso de autenticación del usuario en una aplicación frontend generalmente consiste en los siguientes pasos:

1. Solicitar credenciales: El usuario ingresa su nombre de usuario y contraseña en un formulario en el sitio web o en la aplicación.
2. Enviar datos al servidor: El frontend envía estos datos al servidor (backend) mediante una solicitud HTTP (generalmente POST) a un endpoint de autenticación específico. Los datos pueden enviarse en el cuerpo de la solicitud en formato JSON o FormData.
3. Verificación en el servidor: El backend recibe los datos, verifica si existen en su base de datos (por ejemplo, si el nombre de usuario corresponde a un usuario existente y si el hash de la contraseña ingresada coincide con el hash almacenado).
4. Generación de token/sesión: Si las credenciales son correctas, el servidor genera un token de autenticación único. Esto puede ser:
   • ID de sesión: El servidor crea una sesión y la vincula con el usuario, enviando al cliente un identificador de sesión (por ejemplo, en una cookie con la bandera HttpOnly).
   • Token (por ejemplo, JWT): El servidor genera un token que contiene información del usuario y sus permisos, firmándolo con su clave secreta. Este token se envía al cliente.
5. Enviar token/sesión al cliente: El servidor responde al frontend enviando el token de autenticación generado.
   • Si se usa un ID de sesión, generalmente se transmite en la cabecera HTTP Set-Cookie.
   • Si se usa un token, puede enviarse en el cuerpo de la respuesta (JSON) o en la cabecera Authorization (por ejemplo, Bearer <token>).
6. Almacenar el token en el cliente: El frontend recibe el token y lo almacena para futuras solicitudes.
   • El ID de sesión se guarda automáticamente en las cookies del navegador.
   • El token puede almacenarse en localStorage, sessionStorage o cookies (con la bandera HttpOnly para protección contra XSS). Es recomendable usar cookies HttpOnly para tokens de acceso, ya que reduce el riesgo de robo mediante ataques XSS. Para JWT, también puede almacenarse un token de actualización en cookies HttpOnly.
7. Usar el token para solicitudes protegidas: En solicitudes posteriores a recursos protegidos (que requieren autenticación), el frontend envía el token almacenado en cada solicitud.
   • Para sesiones, el navegador envía automáticamente las cookies correspondientes con el ID de sesión.
   • Para tokens, el frontend debe agregar explícitamente el token en la cabecera Authorization (por ejemplo, Authorization: Bearer <token>).
8. Verificación del token en el servidor: Al recibir cada solicitud a un recurso protegido, el servidor extrae el token de la solicitud y verifica su validez (por ejemplo, la expiración del token, la firma del token, la existencia de una sesión con ese ID).
9. Autorización: Si el token es válido, el servidor determina qué usuario está asociado con ese token y verifica sus permisos para acceder al recurso solicitado (esto es parte del proceso de autorización, posterior a la autenticación).
10. Ejecutar la solicitud: Si el usuario está autenticado y autorizado, el servidor realiza la solicitud y envía la respuesta. De lo contrario, envía un error (por ejemplo, 401 Unauthorized o 403 Forbidden).

Los esquemas de autenticación varían (basados en sesiones, tokens JWT, OAuth2, OpenID Connect, etc.), pero los pasos básicos para obtener y usar un token para identificar al usuario son similares.

Ejemplo de envío de datos al servidor (usando fetch API y token):

// Datos del usuario
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Envío de datos al servidor
fetch('/api/login', { // Endpoint de autenticación en el servidor
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Login fallido');
  }
  return response.json(); // Se espera que el servidor devuelva JSON con el token
})
.then(data => {
  const authToken = data.token; // Se obtiene el token de la respuesta del servidor
  localStorage.setItem('authToken', authToken); // Se guarda el token (por ejemplo, en localStorage)
  console.log('Inicio de sesión exitoso, token guardado.');
  // Redirigir al usuario a la página protegida
})
.catch(error => {
  console.error('Error de autenticación:', error);
  // Mostrar mensaje de error al usuario
});

// Ejemplo de solicitud protegida usando el token almacenado
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // Agregar el token en la cabecera Authorization
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token expirado o inválido. Redirigiendo a login.');
        // El token no es válido, limpiar y redirigir a login
        localStorage.removeItem('authToken');
        // window.location.href = '/login'; // Ejemplo de redirección
      }
      throw new Error('Error al obtener recurso protegido');
    }
    return response.json();
  })
  .then(data => {
    console.log('Datos protegidos:', data);
  })
  .catch(error => {
    console.error('Error al obtener recurso protegido:', error);
  });
} else {
  console.log('No se encontró token de autenticación. Redirigiendo a login.');
  // window.location.href = '/login'; // Ejemplo de redirección
}

Aspectos importantes de seguridad:

• Usa siempre HTTPS para enviar credenciales y tokens, evitando que sean interceptados.
• Almacena los tokens de forma segura (evitando guardar información sensible como contraseñas o tokens de acceso en código o campos públicos).
• Para tokens JWT: usa una duración corta para los tokens de acceso y actualízalos con tokens de actualización almacenados en cookies HttpOnly. Los tokens de acceso pueden almacenarse en memoria o localStorage, considerando los riesgos de XSS.
• Valida todos los datos en el servidor.