Testing Password Reset Flows End-to-End in Next.js with P...

Password reset is one of the most critical flows in any application. It's also one of the most commonly untested.

The reason is always the same — the flow requires a real email. You click "Forgot password", an email arrives, you click the link, you reset. There's no way to test this without catching that email.

This guide shows how to test the complete password reset flow in a Next.js app using Playwright and ZeroDrop — end-to-end, in CI, without mocking.

The flow we're testing

User requests a password reset
App sends a reset email with a unique token link
User clicks the link
User sets a new password
User logs in with the new password

Every step needs to work. Most test suites only test step 4 and 5 by navigating directly to the reset URL with a hardcoded token. That's not a real test.

The Next.js API routes

// app/api/auth/forgot-password/route.ts
import { Resend } from 'resend';
import { db } from '@/lib/db';
import crypto from 'crypto';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const { email } = await req.json();

  // Generate a secure reset token
  const token = crypto.randomBytes(32).toString('hex');
  const expires = new Date(Date.now() + 60 * 60 * 1000); // 1 hour

  // Store token in database
  await db.passwordResetToken.create({
    data: { email, token, expires }
  });

  const resetUrl = `${process.env.NEXT_PUBLIC_URL}/reset-password?token=${token}`;

  // Send reset email
  await resend.emails.send({
    from: 'noreply@yourapp.com',
    to: email,
    subject: 'Reset your password',
    html: `
      <p>You requested a password reset.</p>
      <p>Click <a href="${resetUrl}">here</a> to reset your password.</p>
      <p>This link expires in 1 hour.</p>
    `,
  });

  return Response.json({ success: true });
}

// app/api/auth/reset-password/route.ts
export async function POST(req: Request) {
  const { token, password } = await req.json();

  const resetToken = await db.passwordResetToken.findUnique({
    where: { token }
  });

  if (!resetToken || resetToken.expires < new Date()) {
    return Response.json({ error: 'Invalid or expired token' }, { status: 400 });
  }

  // Update password and delete token
  await db.user.update({
    where: { email: resetToken.email },
    data: { password: await hashPassword(password) }
  });

  await db.passwordResetToken.delete({ where: { token } });

  return Response.json({ success: true });
}

The Playwright test

import { test, expect } from '@playwright/test';
import { ZeroDrop } from 'zerodrop-client';

const mail = new ZeroDrop();

test.describe('Password reset flow', () => {
  test('user can reset password via email link', async ({ page }) => {
    // 1. Generate a disposable inbox
    const inbox = mail.generateInbox();

    // 2. Create a test user with this inbox
    // (assuming you have a signup flow or seed script)
    await page.goto('/signup');
    await page.fill('[data-testid="email"]', inbox);
    await page.fill('[data-testid="password"]', 'OriginalPassword123!');
    await page.click('[data-testid="submit"]');
    await expect(page).toHaveURL('/dashboard');

    // 3. Sign out
    await page.click('[data-testid="signout"]');
    await expect(page).toHaveURL('/login');

    // 4. Request password reset
    await page.goto('/forgot-password');
    await page.fill('[data-testid="email"]', inbox);
    await page.click('[data-testid="submit"]');

    await expect(page.getByText('Check your email')).toBeVisible();

    // 5. Catch the reset email — magic link auto-extracted
    const email = await mail.waitForLatest(inbox, { timeout: 30000 });

    expect(email.subject).toContain('Reset your password');
    expect(email.magicLink).not.toBeNull();

    // 6. Click the reset link
    await page.goto(email.magicLink!);
    await expect(page).toHaveURL(/reset-password/);

    // 7. Set new password
    await page.fill('[data-testid="password"]', 'NewPassword123!');
    await page.fill('[data-testid="confirm-password"]', 'NewPassword123!');
    await page.click('[data-testid="submit"]');

    await expect(page.getByText('Password updated')).toBeVisible();

    // 8. Login with new password
    await page.goto('/login');
    await page.fill('[data-testid="email"]', inbox);
    await page.fill('[data-testid="password"]', 'NewPassword123!');
    await page.click('[data-testid="submit"]');

    // 9. Assert logged in successfully
    await expect(page).toHaveURL('/dashboard');
  });

  test('expired reset link shows error', async ({ page }) => {
    const inbox = mail.generateInbox();

    // Request reset
    await page.goto('/forgot-password');
    await page.fill('[data-testid="email"]', inbox);
    await page.click('[data-testid="submit"]');

    const email = await mail.waitForLatest(inbox, { timeout: 30000 });

    // Tamper with the token to simulate expiry
    const expiredUrl = email.magicLink!.replace(/token=\w+/, 'token=expired_token');
    await page.goto(expiredUrl);

    await expect(page.getByText('Invalid or expired')).toBeVisible();
  });
});

Testing with NextAuth

If you're using NextAuth for authentication, the password reset flow is handled differently. Here's how to test it:

import { test, expect } from '@playwright/test';
import { ZeroDrop } from 'zerodrop-client';

const mail = new ZeroDrop();

test('NextAuth email sign-in (magic link)', async ({ page }) => {
  const inbox = mail.generateInbox();

  // Request magic link sign-in
  await page.goto('/auth/signin');
  await page.fill('[name="email"]', inbox);
  await page.click('[type="submit"]');

  await expect(page.getByText('Check your email')).toBeVisible();

  // Catch the magic link email
  const email = await mail.waitForLatest(inbox, { timeout: 30000 });

  expect(email.magicLink).not.toBeNull();

  // Click the sign-in link
  await page.goto(email.magicLink!);

  // Should be signed in
  await expect(page).toHaveURL('/dashboard');
});

In GitHub Actions

name: E2E Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: npm ci

      - run: npx playwright install --with-deps chromium

      - name: Generate test inbox
        id: inbox
        uses: zerodrop-dev/create-inbox@8706a59 # v1.0.0

      - name: Run E2E tests
        run: npx playwright test
        env:
          TEST_INBOX: ${{ steps.inbox.outputs.inbox }}
          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
          NEXT_PUBLIC_URL: ${{ secrets.STAGING_URL }}
          DATABASE_URL: ${{ secrets.TEST_DATABASE_URL }}

// Use CI inbox or generate locally
const inbox = process.env.TEST_INBOX ?? mail.generateInbox();

What you're actually testing

A complete password reset test with ZeroDrop verifies:

✅ Your API correctly generates a reset token
✅ Your email provider actually delivers the email
✅ The reset link contains a valid token
✅ The token correctly authenticates the reset
✅ The new password works for login
✅ The old password no longer works
✅ Expired tokens are rejected

That's the full security surface of your password reset flow — tested on every commit.

ZeroDrop — disposable email inboxes for CI pipelines. Free, no signup, no Docker.
→ zerodrop.dev · docs · npm

推荐订阅源

DEV Community