VOOZH about

URL: https://dev.to/zerodrop/testing-password-reset-flows-end-to-end-in-nextjs-with-playwright-4kjn

⇱ Testing Password Reset Flows End-to-End in Next.js with Playwright - DEV Community


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

  1. User requests a password reset
  2. App sends a reset email with a unique token link
  3. User clicks the link
  4. User sets a new password
  5. 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