InboxTap

Guías

Probar correos de verificación de Better Auth

Verifica los correos de registro de Better Auth en una aplicación Next.js con Playwright.
Mantenido por colaboradoresÚltima actualización

Better Auth entrega enlaces de verificación, enlaces mágicos y códigos de un solo uso mediante SMTP sin cifrado. Por ello, una aplicación Next.js puede dirigirlo a InboxTap y probar cada flujo de autenticación de extremo a extremo. El proyecto ejecutable completo está en examples/better-auth-nextjs.

Conectar Better Auth con InboxTap

Crea una función auxiliar de Nodemailer que apunte al puerto SMTP de InboxTap. InboxTap usa SMTP sin cifrado, por lo que el transporte desactiva TLS y no envía credenciales:

import { createTransport } from "nodemailer";

const transport = createTransport({
  host: process.env.SMTP_HOST ?? "localhost",
  port: Number(process.env.SMTP_PORT ?? 1025),
  secure: false,
  ignoreTLS: true,
});

Canaliza cada función de devolución de llamada de correo de Better Auth mediante esa función auxiliar. Mantén cada correo en texto sin formato, con exactamente un enlace o un código de seis dígitos, para que la extracción siga siendo determinista:

export const auth = betterAuth({
  database: new Database("./auth.db"),
  emailAndPassword: { enabled: true, requireEmailVerification: true },
  emailVerification: {
    sendOnSignUp: true,
    autoSignInAfterVerification: true,
    sendVerificationEmail: async ({ user, url }) => {
      await sendMail({ to: user.email, subject: "Verify your email", text: `Open: ${url}` });
    },
  },
  plugins: [
    magicLink({
      sendMagicLink: async ({ email, url }) => {
        await sendMail({ to: email, subject: "Your sign-in link", text: `Sign in: ${url}` });
      },
    }),
    emailOTP({
      sendVerificationOTP: async ({ email, otp }) => {
        await sendMail({ to: email, subject: "Your sign-in code", text: `Your code is ${otp}` });
      },
    }),
  ],
});

Manejar los flujos con Playwright

Deja que Playwright gestione ambos procesos: webServer inicia npx inboxtap, espera a su punto de comprobación de estado y después inicia la aplicación. En local reutiliza los servidores que ya estén en marcha.

export default defineConfig({
  testDir: "./tests",
  use: { baseURL: "http://localhost:3000" },
  webServer: [
    {
      command: "npx inboxtap",
      url: "http://localhost:8025/health",
      reuseExistingServer: !process.env.CI,
    },
    {
      command: "npm run db:migrate && npm run dev",
      url: "http://localhost:3000",
      reuseExistingServer: !process.env.CI,
      timeout: 120_000,
    },
  ],
});

Cada prueba crea su propio buzón, se registra mediante el formulario real y sigue el enlace capturado:

test("signs up, verifies via the emailed link, and lands signed in", async ({ page }) => {
  const inbox = await inboxTap.createInbox({ alias: "signup" });

  await page.goto("/signup");
  await page.getByLabel("Email").fill(inbox.address);
  await page.getByLabel("Password").fill(password);
  await page.getByRole("button", { name: "Create account" }).click();

  const verificationUrl = await inbox.waitForLink({
    subject: /verify your email/i,
    timeoutMs: 20_000,
  });
  await page.goto(verificationUrl);

  await page.goto("/");
  await expect(page.getByText(`Signed in as ${inbox.address} (verified: true)`)).toBeVisible();
});

La prueba del enlace mágico funciona igual con un filtro de asunto distinto, mientras que la prueba del código OTP cambia waitForLink() por waitForCode(). El código OTP predeterminado de Better Auth tiene seis dígitos y coincide exactamente con el patrón de código predeterminado de InboxTap.

Ejecutar el ejemplo

cd examples/better-auth-nextjs
npm install
npx playwright install chromium
npm test

El conjunto de pruebas cubre la verificación del registro, el bloqueo del inicio de sesión antes de la verificación, el registro automático mediante un enlace mágico, el inicio de sesión con un código OTP y el reenvío del código. No hay que coordinar varias terminales, porque las pruebas inician InboxTap y la aplicación. El README del ejemplo también documenta un flujo interactivo: npx inboxtap en una terminal, npm run dev en otra, y después regístrate y lee el correo capturado con curl http://localhost:8025/api/emails/latest.