Vigencia por confirmar

Documento preexistente migrado al estándar docs-standard el 2026-08-19. Describe el frontend como completo y el backend de Medusa como pendiente de configurar; no se pudo verificar desde este repositorio si esa configuración del backend ya se hizo. Requiere revisión humana.

Configuración de Recuperación de Contraseña¶

Este documento describe los pasos necesarios para completar la implementación del flujo de recuperación de contraseña en Medusa.

Estado Actual (Frontend - Completado)¶

Se han creado los siguientes componentes en el storefront:

Componentes creados:¶

src/modules/account/components/forgot-password/index.tsx
Formulario para solicitar reset de contraseña
Usa sdk.auth.resetPassword("customer", "emailpass", { identifier: email })
src/modules/account/components/reset-password/index.tsx
Formulario para establecer nueva contraseña
Usa sdk.auth.updateProvider("customer", "emailpass", { email, password }, token)
src/modules/account/templates/login-template.tsx (actualizado)
Nuevas vistas: FORGOT_PASSWORD y RESET_PASSWORD
Lee parámetros token y email de la URL automáticamente
src/modules/account/components/login/index.tsx (actualizado)
Agregado enlace "¿Olvidaste tu contraseña?"

Pendiente: Configuración del Backend (Medusa)¶

Para que el flujo funcione completamente, necesitas configurar el backend de Medusa para enviar emails cuando se solicita un reset de contraseña.

Paso 1: Crear el Subscriber para el evento de reset¶

En tu proyecto de Medusa backend, crea el archivo:

src/subscribers/reset-password.ts

import { SubscriberArgs, SubscriberConfig } from "@medusajs/framework"
import { Modules } from "@medusajs/framework/utils"

export default async function resetPasswordHandler({
  event,
  container,
}: SubscriberArgs<{ entity_id: string; token: string; actor_type: string }>) {
  const notificationModuleService = container.resolve(Modules.NOTIFICATION)
  const customerModuleService = container.resolve(Modules.CUSTOMER)

  // Solo procesar si es un customer
  if (event.data.actor_type !== "customer") {
    return
  }

  // Obtener datos del customer
  const customer = await customerModuleService.retrieveCustomer(
    event.data.entity_id
  )

  // URL del storefront para reset (ajustar según tu configuración)
  const storefrontUrl = process.env.STOREFRONT_URL || "http://localhost:8000"
  const resetUrl = `${storefrontUrl}/account?token=${event.data.token}&email=${encodeURIComponent(customer.email)}`

  // Enviar notificación (email)
  await notificationModuleService.createNotifications({
    to: customer.email,
    channel: "email",
    template: "reset-password", // Nombre del template de email
    data: {
      customer_name: customer.first_name || customer.email,
      reset_url: resetUrl,
      token: event.data.token,
    },
  })
}

export const config: SubscriberConfig = {
  event: "auth.password_reset",
}

Paso 2: Configurar el proveedor de email¶

Necesitas tener configurado un módulo de notificaciones con un proveedor de email. Opciones populares:

Opción A: SendGrid¶

npm install @medusajs/notification-sendgrid

En medusa-config.ts:

module.exports = defineConfig({
  // ... otras configuraciones
  modules: [
    {
      resolve: "@medusajs/notification",
      options: {
        providers: [
          {
            resolve: "@medusajs/notification-sendgrid",
            id: "sendgrid",
            options: {
              channels: ["email"],
              api_key: process.env.SENDGRID_API_KEY,
              from: process.env.SENDGRID_FROM_EMAIL,
            },
          },
        ],
      },
    },
  ],
})

Opción B: Resend¶

npm install @medusajs/notification-resend

En medusa-config.ts:

module.exports = defineConfig({
  // ... otras configuraciones
  modules: [
    {
      resolve: "@medusajs/notification",
      options: {
        providers: [
          {
            resolve: "@medusajs/notification-resend",
            id: "resend",
            options: {
              channels: ["email"],
              api_key: process.env.RESEND_API_KEY,
              from: process.env.RESEND_FROM_EMAIL,
            },
          },
        ],
      },
    },
  ],
})

Paso 3: Crear el template de email¶

Crea el template de email para el reset de contraseña. La ubicación depende de tu proveedor de email.

Ejemplo de contenido HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Restablecer contraseña</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
    <h1 style="color: #1a1a1a;">Restablecer contraseña</h1>

    <p>Hola {{customer_name}},</p>

    <p>Recibimos una solicitud para restablecer la contraseña de tu cuenta.</p>

    <p>Haz clic en el siguiente botón para crear una nueva contraseña:</p>

    <div style="text-align: center; margin: 30px 0;">
      <a href="{{reset_url}}"
         style="background-color: #000; color: #fff; padding: 12px 30px;
                text-decoration: none; border-radius: 5px; display: inline-block;">
        Restablecer contraseña
      </a>
    </div>

    <p>Si no solicitaste este cambio, puedes ignorar este correo.</p>

    <p>Este enlace expirará en 1 hora por razones de seguridad.</p>

    <hr style="border: none; border-top: 1px solid #eee; margin: 30px 0;">

    <p style="font-size: 12px; color: #666;">
      Si el botón no funciona, copia y pega este enlace en tu navegador:<br>
      <a href="{{reset_url}}">{{reset_url}}</a>
    </p>
  </div>
</body>
</html>

Paso 4: Variables de entorno¶

Asegúrate de tener estas variables en tu .env del backend:

# URL del storefront (para construir el link de reset)
STOREFRONT_URL=https://tu-tienda.com

# SendGrid (si usas SendGrid)
SENDGRID_API_KEY=SG.xxxxx
SENDGRID_FROM_EMAIL=noreply@tu-tienda.com

# O Resend (si usas Resend)
RESEND_API_KEY=re_xxxxx
RESEND_FROM_EMAIL=noreply@tu-tienda.com

Flujo Completo¶

Usuario va a /account y hace clic en "¿Olvidaste tu contraseña?"
Usuario ingresa su email y envía el formulario
Frontend llama a sdk.auth.resetPassword()
Medusa Backend genera un token y dispara el evento auth.password_reset
Subscriber captura el evento y envía email con el link
Usuario recibe email con URL: /account?token=xxx&email=user@example.com
Usuario hace clic en el link
Frontend detecta los parámetros y muestra formulario de nueva contraseña
Usuario ingresa nueva contraseña
Frontend llama a sdk.auth.updateProvider() con el token
Medusa Backend actualiza la contraseña
Usuario puede iniciar sesión con la nueva contraseña

Testing¶

Para probar el flujo sin configurar email:

Solicita el reset desde el frontend
Revisa los logs del backend de Medusa para ver el token generado
Construye manualmente la URL: /account?token=TOKEN_DEL_LOG&email=tu@email.com
Abre esa URL en el navegador para probar el formulario de reset