Construir un sistema de autenticación funcional requiere conectar formularios, actions, cookies y redirecciones de forma coordinada. Aquí se detalla paso a paso cómo implementar un flujo de login completo que crea un access token, lo almacena en una cookie y modifica la interfaz según el estado de sesión del usuario.
¿Cómo crear el action de login para manejar la autenticación?
El punto de partida es una página de login con un formulario clásico que solicita correo y contraseña. Para procesar esos datos se crea un action dedicado dentro del proyecto [01:00].
El action se define como una función asíncrona llamada handleLogin. Su trabajo es:
- Recibir el form data del formulario.
- Convertirlo en un objeto con
Object.fromEntries(formData) para extraer fácilmente los campos.
- Llamar a la función
createAccessToken pasándole el email y el password como strings [01:30].
javascript
export const handleLogin = async (formData) => {
const formDataObject = Object.fromEntries(formData);
const accessToken = await createAccessToken(
formDataObject.email,
formDataObject.password
);
if (accessToken) {
redirect("/store");
}
};
Un detalle importante es que la función createAccessToken se modifica para retornar el access token en lugar de solo crear la cookie. Esto permite verificar que el token se generó correctamente antes de ejecutar el redirect hacia la tienda [01:50].
¿Cómo conectar el formulario con el action mediante handleSubmit?
Dentro del componente del formulario de login se crea una función handleSubmit que actúa como puente entre la interfaz y el action [02:20].
Los pasos clave son:
- Prevenir el comportamiento por defecto del formulario con
event.preventDefault().
- Construir un objeto FormData a partir del
event.target, que representa el formulario HTML.
- Pasar ese
formData a la función handleLogin de manera asíncrona.
javascript
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
await handleLogin(formData);
};
Finalmente, se asigna handleSubmit al evento onSubmit del formulario. Con esto, al enviar las credenciales el sistema crea la cookie con el access token y redirige al usuario automáticamente [02:50].
¿Cómo verificar si el usuario está logueado desde el header?
Una vez que el login funciona, el siguiente paso es reflejar el estado de sesión en la interfaz. El header del sitio, al ser un server component, puede acceder directamente a las cookies del servidor [03:30].
Para leer la cookie se utiliza la función cookies importada desde next/headers:
javascript
import { cookies } from "next/headers";
const cookiesStore = cookies();
const token = cookiesStore.get("access_token")?.value;
El método get retorna un objeto con las propiedades name y value. Lo que interesa es únicamente el value, que contiene el token en sí [03:55].
Con esa información se realiza un renderizado condicional:
- Si existe el token, se muestra un mensaje de bienvenida: "Hola".
- Si no existe, se muestra un enlace que lleva a la página de login.
jsx
{token ? <p>Hola</p> : <Link href="/login">Login</Link>}
Al borrar manualmente la cookie del access token en el navegador y recargar, el sistema detecta la ausencia del token y presenta el enlace de login nuevamente [04:30].
¿Qué limitaciones tiene este flujo de autenticación?
Aunque el flujo funciona, tiene una vulnerabilidad importante: si alguien conoce el nombre de la cookie y coloca cualquier string como valor, aparecerá como logueado sin tener credenciales válidas [05:00].
La solución recomendada es validar el token contra la API de Shopify para confirmar que pertenece a un usuario real. De esta forma, el sistema no solo verifica la existencia de la cookie, sino también su legitimidad.
¿Has implementado validación de tokens en tus proyectos? Comparte tu experiencia y las estrategias que has usado para proteger la autenticación.
