Autenticación

Configurar la autenticación de tu aplicación es fácil con Wasp. De hecho, ya está configurada en el archivo main.wasp:

  auth: {
    userEntity: User,
    methods: {
      email: {},
      google: {},
      gitHub: {},
      discord: {}
    },
    onAuthFailedRedirectTo: "/",
  },

La gran ventaja es Qué, al definir tu configuración de autenticación en el archivo main.wasp, Wasp gestiona la mayor parte del proceso de autenticación por ti, incluyendo las entidades de base de datos relacionadas con la autenticación para credenciales de usuario y sesiones, así como componentes de cliente generados automáticamente para tu aplicación (también conocidos como AuthUI, puedes verlos en uso en la carpeta src/auth).

Autenticación con Email Verificado

El método email es el método de autenticación predeterminado en Open SaaS y TalentBricksAI.

Dado que necesita enviar emails para verificar usuarios y restablecer contraseñas, requiere un proveedor de envío de emails: un servicio que pueda usar para enviar correos electrónicos. El proveedor de “envío de emails” se configura mediante el campo app.emailSender en el archivo main.wasp.

Para facilitar el inicio, Open SaaS y TalentBricksAI inicialmente vienen con el proveedor Dummy de “envío de emails”, que no envía ningún correo electrónico, sino que registra todos los enlaces/tokens de verificación de email en la consola del servidor. Luego puedes seguir estos enlaces para verificar al usuario y continuar con el proceso de registro.

  emailSender: {
    provider: Dummy, // registra todos los enlaces/tokens de verificación de email en la consola del servidor
    defaultFrom: {
      name: "TalentBricksAI",
      email: "noreply@talentbricks.ai"
    },
  },

No puedes usar el proveedor Dummy en producción y tu aplicación no se compilará hasta que cambies a un proveedor listo para producción, como SendGrid. A continuación describimos el proceso de migración a SendGrid.

configuración de Email para Producción

Para usar el método de autenticación email en producción, deberás cambiar del proveedor Dummy de “envío de emails” a un proveedor listo para producción como SendGrid:

Primero, configura el emailSender de tu aplicación en el archivo main.wasp siguiendo la guía de Email Sending de Open SaaS (o la guía de Wasp).
Agrega tu SENDGRID_API_KEY al archivo .env.server.
Asegúrate de que la dirección de email que usas en el objeto fromField sea la misma dirección de email que configuraste en tu cuenta de SendGrid para enviar correos. Al final, tu archivo main.wasp debería verse algo así:

  auth: {
    methods: {
      email: {
        fromField: {
          name: "TalentBricksAI",
          // Al usar SendGrid, ¡debes usar la misma dirección de email que configuraste en tu cuenta para enviar emails!
          email: "noreply@talentbricks.ai"
        },
        //...
      },
    }
  },
  //...
  emailSender: {
    provider: Dummy,
    provider: SendGrid,
    defaultFrom: {
      name: "TalentBricksAI",
      // Al usar SendGrid, ¡debes usar la misma dirección de email que configuraste en tu cuenta para enviar emails!
      email: "noreply@talentbricks.ai"
    },
  },

Y eso es todo. Wasp se encargará del resto y actualizará tus componentes AuthUI en consecuencia.

Consulta la documentación de Auth de Wasp para obtener más información.

Autenticación con Google, GitHub y Discord

También hemos personalizado y pre-construido el flujo de autenticación de Google y GitHub para ti. Para comenzar a usarlos, sólo necesitas descomentar los métodos que deseas en tu archivo main.wasp y obtener las claves API adecuadas para agregar a tu archivo .env.server.

Google OAuth

Para crear una aplicación OAuth de Google y obtener tus claves API de Google, sigue las instrucciones en la documentación de Autenticación de Google de Wasp.

Agrega las siguientes variables de entorno a tu archivo .env.server:

GOOGLE_CLIENT_ID=tu-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=tu-client-secret

GitHub OAuth

Para crear una aplicación OAuth de GitHub y obtener tus claves API de GitHub, sigue las instrucciones en la documentación de Autenticación de GitHub de Wasp.

Agrega las siguientes variables de entorno a tu archivo .env.server:

GITHUB_CLIENT_ID=tu-github-client-id
GITHUB_CLIENT_SECRET=tu-github-client-secret

Discord OAuth

Para crear una aplicación OAuth de Discord y obtener tus claves API de Discord, sigue las instrucciones en la documentación de Autenticación de Discord de Wasp.

Agrega las siguientes variables de entorno a tu archivo .env.server:

DISCORD_CLIENT_ID=tu-discord-client-id
DISCORD_CLIENT_SECRET=tu-discord-client-secret

Nuevamente, Wasp se encargará del resto y actualizará tus componentes AuthUI en consecuencia.

Componentes de Autenticación

Los componentes de autenticación pre-construidos se encuentran en la carpeta app/src/auth/ e incluyen:

Login (LoginPage.tsx) - Página de inicio de sesión
Signup (SignupPage.tsx) - Página de registro
Email Verification (EmailVerificationPage.tsx) - Verificación de email
Password Reset (RequestPasswordResetPage.tsx, PasswordResetPage.tsx) - Restablecimiento de contraseña

Estos componentes utilizan el sistema AuthUI de Wasp y se adaptan automáticamente según los métodos de autenticación que hayas habilitado en main.wasp.

Personalización

Puedes personalizar la apariencia y el comportamiento de los componentes de autenticación editando los archivos en app/src/auth/. Los componentes están construidos con React y usan los componentes de UI de ShadCN.

Para más información sobre personalización de autenticación, consulta la documentación de Wasp.

Verificación en Desarrollo

En modo de desarrollo con el proveedor Dummy, los enlaces de verificación de email se imprimen en la consola del servidor. Busca líneas como:

✅ Verification email for user sent! ✅
Click the following link to verify your email: http://localhost:3000/email-verification?token=...

Simplemente copia y pega este enlace en tu navegador para completar el proceso de verificación.