Implementación de Flujo de Login con Tokens y Cookies

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:50

Implementación de Flujo de Login con Tokens y Cookies

Curso de Next.js 14

Clase 43 de 57

Clase 43 / 57

Recursos

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.

Comentarios (6)6 comentarios

Juan Felipe Gutiérrez Torres

Hace 2 años

Quería tomarme un momento para darles ánimo a todos! Estamos en quizá de las partes más complicadas del curso, así que ánimo, van muy bien y estamos a menos de 20% de terminar!

Daniel Felipe Merchan Fuquen

Hace 3 años

Aún no entiendo la importancia de usar los server actions. Qué beneficios tiene que se realicen estos envios de formularios desde el server? Aumentar la seguridad?

Platzi

Los server actions permiten ejecutar código en el servidor, independientemente de si el componente es de servidor o cliente, ofreciendo ventajas como acceso a recursos del servidor y mejorar la autorización mediante el manejo de headers y cookies.

Cristian Javier Martinez Barcinilla

Hace 10 meses

tambien es impportante tener en cuenta que los server actions no retornan nada, solo ejecutan logica

Eduardo Razo Cobián

Solo como tip, cuando registren un usuario, ingresen una contraseña robusta, al parecer me estaba dando un error al intentar hacer login.

Borre usuario y registre contraseña segura y listo, me dejo ingresar sin problemas desde /login

Juan Gómez

O quizás, por el mensaje de error, intentaste acceder con un correo/contraseña no registrado previamente

Nicolás García López

Al igual que Juan te diría que a lo mejor es porque fue con algún usuario no registrado, ya que no hemos generado algún restricción de contraseñas, yo use 123456 por ejemplo y funciona de manera correcta

Gerardo J. Rito

Hace 8 meses

en next 16 se requiere que cookies sea async sino te va a marcar error

WYLDER ESTIVEN QUICENO OLAYA

Pregunta cual es la diferencia entre usar el onSubmit y usar action en el form de cara a validar el state del formulario?

Por ejemplo yo para tomar los mensajes de error use useFormState y le pase el dispatch directamente al formulario usando action

const initialState: { message?: string } = {};
const [state, disptach] = useFormState(handleLogin, initialState);

<form action={disptach} className="flex flex-col gap-y-8">
```En mi action le agregue el parametro prevState y retorno el mensaje de error

```js
export const handleLogin = async (
  prevState: { message?: string },
  formData: FormData,
) => {
  const formDataObject = Object.fromEntries(formData);
  const response = await createAccessToken(
    formDataObject.email as string,
    formDataObject.password as string,
  );

  if (response?.error) {
    return {
      message: response.error as string,
    };
  } else if (response?.accesToken) {
    console.log(response.accesToken);
    redirect("/store");
  }

  return prevState;
};
```Ahora en el cliente puedo usar el mensaje de error&#x20;

Cual es la forma correcta o no correcta en si, si no la forma estándar de manejar el uso de las actions en un formulario?

Josue David

no se si soy yo, pero de donde salio ese tipo u objecto FormData? No me acuerdo que se haya establecido en algun lado.

Juan Carlos Montilla Sánchez

FormData es una utiliza que te provee JavaScript del lado del cliente y es una forma para obtener datos desde formularios.

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Implementación de Flujo de Login con Tokens y Cookies